JavaScript(자바스크립트) - 연산과 반복문 if, for , while 알아보기

 

 

String concatenation

​

위와 같이 찍어서 출력을 하게 되면

첫번째 줄을 각 string 인 my 와 cat이 합쳐져서 my cat 이라고 출력이 되며

두번째 줄은 string 과 number가 합쳐져서 12로 출력이 된다.

마지막 줄은 string literals : 1+2 = 3 이 출력이 되는 것을 볼 수 있다.

​

 

Numeric operators

​

코드를 보면 그의 뜻을 써놓은게 있고 안써놓은게 있는데 그냥 간단하다

첫번째줄부터 내려오면 1+1 말 그대로 1+1 을 한다는거고

1-1 을 한다는 것 1/1 을 한다는 것이고 1*1을 한다는 것이다.

그리고 따로 어떤 뜻인지 써놓은 것도 있는데 5% 2 와 2 ** 3 의 경우이다.

이 경우는 5 % 2 는 우선 나눗셈을 먼저 한 후 그의 나머지 값이라는 뜻이다.

그리고 2 ** 3 은 2의 3승이라는 뜻이라고 보면 된다.

옆에 출력 값과 비교해보면 쉽다.

 

 

 

Increment and decrement operators

​

위에는 코드 4줄이 있는데 두줄 두줄씩 나누어서 보면 된다.

그리고 주석으로 써놓은 것과 같이 console.log를 제외한 코드들은 같은 의미를 가지고 있다.

counter를 기준으로 ++ 이 앞에 있는 경우에는 기존 카운터의 값인 2에 1의 값이 더해져서

3으로 출력이 되는데 그 아래 적은 예시의 코드와 같다보면 된다.

counter = 2 나 counter = counter + 1; 이나 결국 같은 2이기 때문이다.

​

그리고 counter 의 값 뒤에 ++ 이 붙은 경우인 counter++ 인 경우도 있는데 이건

++counter와 반대로 2가 먼저 출력이 된 후 1의 값이 더해져서 3인 상태가 되어버린다.

 

 

Logical operators: ||(or) or &&(and) or !(not)

​

위의 코드는 || 이건 또는 이라는 뜻이고 &&은 and 그리고 라는 뜻 !는 not 원래의 뜻의

반대라는 값을 주는거라고 생각하면 쉽다.

​

지금 보게 되면 맨 위의 console.log 에 값을 봤을 때 check 를 포함해서

true 값이 하나라도 나오게 되면 거기서 멈추고 그냥 바로 true를 반환하지만

true 값이 하나라도 안나오면 check 의 값에 따라 true 값이 return 된다.

즉, value1 이 true 이기 때문에 그 뒤의 value2 , check 는 실행이 안되고 value1 의 값이

바로 출력이 되는거라고 보면 된다.

​

and 는 그와 반대로 셋 다 같은 값을 가져야 출력이 되는거라고 생각을 하면 되는데

value1의 값이 true 이기 때문에 value2도 true , check 도 true 여야 된다.

단 하나라도 false 의 값이 있다면 그 뒤의 코드는 실행되지 않고 false 가 출력 된다.

즉, 위의 코드에서 console.log(`and~~~) 라고 써져있는 곳을 보면 value2는 false 값이기 때문에

출력은 false가 되었다.

​

그리고 마지막 ! 는 값을 반전시켜주는거라고 보면 되는데

console.log(!value1); 을 하게 되면 value1 은 true 값인데 !를 통해 반전을 시켰으니

출력을 하게 되면 false 값이 나오게 된다.

 

 

Equality

​

이번에는 loose equality 와 strict equality 를 보면 된다.

우선 loose equality 는 단순하게 타입까지 안보고 값만 보게 되는데

stringFive 에는 string 값으로 5가 들어가있고 numberFive 에는 number 값인 숫자 5가 있다.

즉 문자와 숫자 타입인데 결국 같은 값이기 때문에

console.log(stringFive == numberFive); 의 출력값은 true로 나오게 된다.

타입은 다르지만 값이 같기 때문이다.

​

하지만 strict equality 는 값만 보는게 아닌 타입까지 보기 때문에 어지만 하면

strict equality 를 통해서 값을 비교하는게 좋다.

그렇기 때문에 결과적으로

console.log(stringFive === numberFive); 의 출력값은 false 로 나오게 된다.

 

 

 

이번엔 다른 건 아니고 위의 코드의 결과값들을 보려고 하는데

잘 보면 david1과 david2에 같은 값이 들어가있지만

console.log(david1 == david2); 를 출력했을 때에는 false의 값이 나온다

왜냐하면 david1 과 david2 에는 같은 값이지만 레퍼런스가 서로 다르게 저장되었기 때문에

false 값이 출력이 되게 되며

console.log(david1 === david2) 도 결과적으로 false 값이 출력이 된다.

​

하지만 마지막인 console.log(david1 === david3) 에는 true 값이 출력이 되게 되는데

david3 에는 david1의 레퍼런스와 값이 전부 같기 때문에 true가 출력이 된다.

 

 

 

Conditional operators : if, else if , else

​

이번에는 if와 else if, else에 대해서 알아볼텐데 이 부분은 자바에서도 쓰인다.

그냥 위에서부터 읽어보면 const name = 'david'; 라고 주어지긴 했지만 이건 일단 무시하고

if 만약에 name 의 값이 david와 같다면

console.log 를 통해 Welcome david 를 출력하게 되는거고

else if 만약 name 이 david가 아니고 eric 이라고 한다면

console.log 를 통해 You are amazing eric 을 출력하게 된다.

근데 만약 name 의 값이 david도 아니고 eric도 아니라면 else를 통해 unknow를 출력하게 된다.

 

Ternary operator

​

이건 ? 를 활용해서 쉽게 값을 비교 후 출력을 할 수 있는거라고 보면 되는데

console.log만 봐도 충분하다.

name 의 값이 === 'david' 라면 ? yes 를 출력하고 : 아니라면 no를 출력한다.

즉 name 이 먼저 david 가 맞는지 아닌지 알고 싶은지에 대한 부분을 바로 알 수 있다.

console.log (name === 'david' ? 'yes' : 'no');

를 통해서 한 번에 david가 맞는지 아닌지를 알 수 있다.

이걸 자주 쓰면 코드의 가독성이 좋지 않기 때문에 많이 쓸꺼면 차라리 switch 또는 if를 쓰는게 훨씬 더 낫다고 한다.

 

 

 

Switch statement

​

이건 Switch 라고 하는데 한 번 해석을 해보게 된다면 우선 const browser 의 값이 'Chrome' 이다.

그냥 시작 자체를 switch 를 쓰고 (browser) 의 값을 switch 안에 넣어주고

case는 무시하고 IE 면 no를 출력하고 Chrome 이면 Yes를 출력하고 Safari 여도 yes를 출력하고

그 외에 다른거면 same all! 을 출력하게 되는 것과 같다.

다만 밑에 똑같은 코드를 써놨는데 조금은 차이가 있다는 것을 볼 수 있는데

Chrome 일 때와 Safari 일 때 출력값이 같이 때문에 하나로 뭉쳐준거라고 볼 수 있다.

​

 

 

While, do While

​

음.. 드이어 while 문까지 왔다...

그냥 바로 해석을 해보자, 우선 let i = 3; 해서 i의 값을 3으로 지정을 해주었다.

그리고 while 문을 통해서 계속 값을 반복을 해주게 될건데

while (i > 0) << 지금 이 상태값이 false 가 될 때까지 무한 반복이 된다고 보면 된다.

그렇기 때문에 console.log 밑에 i--; 를 쓴 것을 볼 수 있는데 i-- 는

console.log 위에 찍혔기 때문에 맨처음 그냥 i의 값인 3이 출력이 된 후 -- 로 인해

i 값이 2로 변해서 2가 출력이 된 후 다시 -- 되서 i 값이 1로 변해서 1이 출력이 된다.

근데 i--; 를 빼고 그냥 console.log(`while: ${i}`); 만 하게 된다면

while (i > 0) 의 값이 true 이기 때문에 계~~~~~~~~속 끝나지 않고 반복이 된다.

i-- 로 인해 i 의 값이 3에서 0까지 가면서 while(i>0) 의 값이 false가 되어 멈춘다.

​

그리고 do while 문이 있는데 밑의 코드를 보면 된다.

do while 문은 우선적으로 출력을 먼저 해버리고 조건문에 대한 것을 본다

그렇기 때문에 제일 큰 차이점만 비교 하면 된다.

블럭을 먼저 실행하고 싶다면 do-while을 조건문이 맞을 때만 블럭을 실행하고 싶다면 while을 쓰면 된다.

 

 

For 문

​

for문에 왔다.

for 문은 거의 대부분은 for 문 안에서 전부 지정을 해준다.

for 안에 (i = 3; i > 0; i--) 전부 써준다고 보면 된다.

안에 있는 내용만 보자면 i 한테 3의 값을 주고 조건문을 걸어준 후 i-- 를 해준다

그리고는 console.log (`for: ${i}`);를 통해 i의 값을 출력을 해준다.

저렇게 해서 출력하면 3 나오고 2 나오고 1 나오고 출력이 끝난다.

​

근데 그 밑에 for 안에 let 이라는 지역 변수를 선언해서 작성을 할 수도 있다.

저것도 지역 변수만 선언했을 뿐이지 작동하는 원리는 위의 for문과 같다.