기본 연산자와 수학

특이한 것

형변환

• Number(null) = 0
• Number(undefined) = NaN

할당 연산자

• 할당 연산자를 중간에 쓸 수 있음
• 할당 연산자에 값이 있음
• 체이닝 가능

a = b = c = 2 + 2;

쉼표 연산자

• 모든 표현식이 사용된다.
• 마지막 표현식의 결과만 값이 반환(?)된다.

문제

"" + 1 + 0
"" - 1 + 0
true + false
6 / "3"
"2" * "3"
4 + 5 + "px"
"$" + 4 + 5
"4" - 2
"4px" - 2
7 / 0
"  -9  " + 5
"  -9  " - 5
null + 1
undefined + 1
" \t \n" - 2

• 해답

    "" + 1 + 0 = "10"
    "" - 1 + 0 = -1
    true + false = 1
    6 / "3" = 2
    "2" * "3" = 6
    4 + 5 + "px" = "9px"
    "$" + 4 + 5 ="$45"
    "4" - 2 = 2
    "4px" - 2 = NaN
    7 / 0 = Infinity // 틀렸음
    "  -9  " + 5 = "  -9  5"  // 틀렸음
    "  -9  " - 5 = -14
    null + 1 = 1
    undefined + 1 = NaN
    " \t \n" - 2 = -2

비교 연산자

특이한점

• 서로 다른 형을 비교할 때 자바스크립트는 숫자형으로 바꿔서 비교한다.
• null 이나 undefined 를 ==로 비교할 때 서로를 비교하는 경우에만 true를 return 하고 나머지는 false를 반환한다

문제

let a = 0;
alert( Boolean(a) ); // ??

let b = "0";
alert( Boolean(b) ); // ??

alert(a == b); //결과는? 이유는?

• 해답

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true! 서로 다른 형을 비교할 때 자바스크립트는 숫자형으로 바꿔서 비교한다.

---

alert( null > 0 );  // ?
alert( null == 0 ); // ?
alert( null >= 0 ); // ?

• 해답

alert( null > 0 );  // (1) false
alert( null == 0 ); // (2) false
alert( null >= 0 ); // (3) true

---

alert( undefined > 0 ); // ??
alert( undefined < 0 ); // ??
alert( undefined == 0 ); // ??

• 해답

alert( undefined > 0 ); // false (1)
alert( undefined < 0 ); // false (2)
alert( undefined == 0 ); // false (3)

---

5 > 4
"apple" > "pineapple"
"2" > "12"
undefined == null
undefined === null
null == "\n0\n"
null === +"\n0\n"

• 해답

5 > 4 → true
"apple" > "pineapple" → false
"2" > "12" → true
undefined == null → true
undefined === null → false
null == "\n0\n" → false
null === +"\n0\n" → false

if, ? 연산자

문제

• 어쩔 때 if문을 사용하고 어쩔 때 ? 연산자를 사용해야할까?

논리 연산자

특이사항

|| 의 사용

• 변수 또는 표현식 목록에서 첫번째 truthy 얻기
• 단락 평가

&& 의 사용

• 첫 번째 falsy 찾기(첫번째 falsy의 값을 return, falsy가 없다면 마지막 값 return)

null 병합 연산자 ??

• null 병합 연산자(nullish coalescing operator) ??를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 ‘확정되어있는’ 변수를 찾을 수 있습니다.

문제

• ??와 ||의 차이

• 해답

  0은 falsy이기 때문에 0은 || 로 값이 선택되어 나오지 못하기 때문에 ??를 사용할 때가 있음

반복문

특이사항

break/continue와 label

• 여러개의 중첩 반복문을 한 번에 빠져나와야 하는 경우 사용

    outer: for (let i = 0; i < 3; i++) {

      for (let j = 0; j < 3; j++) {

        let input = prompt(`(${i},${j})의 값`, '');

        // 사용자가 아무것도 입력하지 않거나 Cancel 버튼을 누르면 두 반복문 모두를 빠져나옵니다.
        if (!input) break outer; // (*)

        // 입력받은 값을 가지고 무언가를 함
      }
    }
    alert('완료!');

함수

문제

함수 표현식과 함수 선언문의 차이

• 해답
  1. 자바스크립트 엔진이 언제 함수를 생성하는지에 따라 다르다.
     • 함수 표현식은 해당 함수에 도달했을 때 함수를 생성한다.
     • 함수 선언문은 함수 선언문이 정의되기 이전에 호출할 수 있다.
  2. 스코프에 차이가 있다.
     • 엄격 모드에서 함수 선언문이 코드 블록 내에 위치하면 해당 함수는 블록 어디에서든 접근할 수 있지만 블록 밖에서는 함수에 접근하지 못한다.
     • 함수 표현식을 사용하면 가능합니다. if문 밖에 선언한 변수 welcome에 함수 표현식으로 만든 함수를 할당하면 되죠. ⇒ 결국 선언과 정의를 따로 할 수 있다는 의미겠지?

        let age = prompt("나이를 알려주세요.", 18);

        let welcome;

        if (age < 18) {

          welcome = function() {
            alert("안녕!");
          };

        } else {

          welcome = function() {
            alert("안녕하세요!");
          };

        }

        welcome(); // 제대로 동작합니다.