JavaScript ES6 | operator, if, for loop

1.Operator

 

-String concatenation

 

 

-Numeric operators

 

 

 

-Increment and decrement operators

* preIncrement

++변수 -> 변수에 1을 증가한 다음에 preIncrement에 그 값을 할당한다.

 

* postIncrement

변수++ ->변수의 값을 postIncrement에 할당한 다음에 1을 증가 시킴.

 

* preDecrement / postDecrement

Increment와 같은 규칙으로 -됨.

 

 

 

-Assignment operators

x += y는 x = x + y 라는 의미. 중복되는 x를 줄여서 써준다.

 

 

-Comparison operators

비교하는 operators

 

 

-Logical operators

|| (or) : value1, value2, check중에 하나라도 true면 true.

value1, value2는 false이고 check는 결국 true로 리턴되는 값이니까 true.

그렇기 때문에 결과값은 true.

 

만약 value1, value2에서 true값이 나오면 뒤에는 읽지 않기 때문에

'😱'값이 나오지 않음. 

코드 효율성을 위해 복잡한 함수식은 뒤로 빼놓고 작성하는 것이 좋음.

 

 

&& (and), finds the first falsy value : 모든 값이 true여야 true.

value1에서 false가 나와 버렸기 때문에 뒤에는 읽지도 않고 값이 false.

때문에 and도 헤비한 함수식같은 오퍼레이션일수록 뒤로 작성해주는 것이 좋음.

 

and는 null을 체크할 때도 사용함.

nullableObject가 null이 아닐 때 something값을 보여줌.

 

 

 

! (not) : 값을 반대로 바꿔줌.

value1이 false라서 true가 됨.

 

 

 

-Equality

 

==loose equality, with type conversion : 타입을 변경해서 검사해줌.

stringFive와 numberFive의 타입은 다르지만

JS가 봤을 때 똑같은 숫자기 때문에 같다고 결론이 남.

때문에 ==는 ture. !=는 false 값이 나옴.

 

 

=== string equality, no type conversion :타입까지 반영해서 검사함.

 

이렇게 stringFive는 '5'(문자열),

numberFive는 5(숫자)이기 때문에 타입이 다름.

JS가 보기에는 다른 것으로 결론이 남.

*코딩할 때 === string equality로 검사하는 게 더 좋다.

 

 

object equality by reference

ellie1과 ellie2는 reference 자체가 다름. 

 

console.log(ellie1 == ellie2); 는 reference가 다르기때문에 false.

console.log(ellie1 === ellie2);는 똑같은 타입이여도 reference가 달라서 false.

console.log(ellie1 == ellie3);는 ellie1이 가지고 있는 reference를 ellie3으로 할당했기때문에 ture.

 

* reference 구조를 이미지로. (유튜브 '드림코딩' 영상에서 발췌함.)

 

 

 

equality - puzzler

*문제 풀이

93. 0, null, undefined, empty string은 모두 false임. 때문에 true.

94. 하지만 0은 boolean type이 아니기 때문에 ===에서는 false.

95. empty 문자열은 false가 맞기 때문에 true.

96. empty 문자열은boolean type이 아니기 때문에 ===에서는 false.

97. null과 undefined은 같은 것으로 간주되어 true.

98. null과 undefined은 type이 달라서 false.

 

 

 

 

-Conditional operators: if

if, else if, else

값이 ellie면(if) 'Welcome, Ellie!'를 띄우고

ellie아니고 coder면(else if) 'You are amazing coder' ,

둘 다 아니면(else) 'unkwnon' 띄움.

 

 

- Ternary operator: ?  (간단한 if 대신 사용하기 좋음)

condition ? value : value2;

name === 'ellie' ? -> '?' 앞에가

true면 :의 왼쪽, false라면 :의 오른쪽을 실행해줘. 라는 뜻.

 

*많은식은 묶고 묶어서 사용하는 것보다 가독성을 위해 if나 switch를 사용하는 것이 좋음.

 

 

 

-Switch statement

use for multiple if checks

use for enum-like value check

use for multiple type check in TS

browser가 'IE'라서 'go away!'가 출력됨.

여기서 'Chrome'과 'Firefox'의 출력값이 같기때문에

밑에 그림과 같이 같이 쓸 수 있음.

 

 

 

-Loops

while loop, while the condition is truthy,

body code is excuted.

while 반복문.

조건에 충족하면 불충족할때까지 반복해서 값을 출력함.

i가 3부터 시작해서 --니까 1씩 줄어듬.

0보다 클때까지만 출력되고 작거나 같으면 멈춤.

 

 

반면에 do while loop, body code is executed first,

then check the condition.

먼저 블럭을 실행한 다음에 조건의 여부를 확인함.

*블럭을 먼저 실행할때 사용함.

 

 

 

for loop, for(begin; condition; step)

(begin; condition; step)

: begin자리에 있는건 딱 한번만 실행 시키고 그 다음부터는

condition과 step을 실행하면서condition이 맞지 않을 때까지 출력.

 

for안에서 let 지역변수를 선언해서 작성하는 것도 좋음.

 

 

 

nested loops

i가 0일때 j를 0-9까지 빙빙 돌림.

이것을 i가 9가 될때까지 반복.

 

이렇게 작성하는 것은 CPU에 좋지 않음. 되도록 지양하는게 좋음.

 

 

**퀴즈

Q1. continue를 사용하여 0-10 중에 짝수만 출력.

Q2. 0-10까지 반복하다가 8을 만나면 break하기.

 

 

**풀이

Q1.

i가 0부터 11보다 작을때까지 뺑뺑 돌다가

숫자가 홀수인 경우에는 continue를 호출하여 그 다음으로 넘어가게 함.

 

continue를 연습하기 위함이지 사실 위에 코드로 작성하는게 더 깔끔.

(짝수만 출력하는 코드)

 

 

 

Q2.

i가 0부터 10까지 1씩 증가하다가

8보다 작을때 멈춰라.