[모던 자바스크립트 Deep Dive] #8~9. 제어문, 타입변환과 단축평가

 

▣ 08장: 제어문
     제어문 : 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용

8.1 블록문
     블록문(코드 블록, 블록) : 0개 이상의 문을 중괄호로 묶은 것, 하나의 실행 단위로 취급,
                                     단독 사용 가능, 일반적으로 제어문이나 함수 정의할 때 사용.

    // 블록문
    {
      var foo = 10;
    }

    // 제어문
    var x = 1;
    if (x < 10) {
      x++;
    }

    // 함수 선언문
    function sum(a, b) {
      return a + b;
    }

8.2 조건문
____8.2.1 if...else 문
____8.2.2 switch 문

8.3 반복문
____8.3.1 for 문

    // 무한루프
    for (;;) { ... }

____8.3.2 while 문
____8.3.3 do...while 문

8.4 break 문
     break 문 : 레이블 문, 반복문, switch 문의 코드 블록을 탈출함.
     레이블 문 : 식별자가 붙은 문

    // outer라는 식별자가 붙은 레이블 for 문
    outer: for (var i = 0; i < 3; i++) {
      for (var j = 0; j < 3; j++) {
        // i + j === 3이면 outer라는 식별자가 붙은 레이블 for 문을 탈출한다.
        if (i + j === 3) break outer; //for문 2개 탈출!
        console.log(`inner [${i}, ${j}]`);
      }
    }

    console.log('Done!');

     객체인지 레이블인지 헷갈림. 가독성 나쁘고 오류 발생 가능성 높음. 아래처럼 함수로 쓰는걸 추천

    function a(){
      for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
          if (i + j === 3) return;
          console.log(`inner [${i}, ${j}]`);
        }
      }
    }
    a();
    console.log('Done!');

8.5 continue 문

 

▣ 09장: 타입 변환과 단축 평가
9.1 타입 변환이란?
     명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것.

    var x = 10;

    // 명시적 타입 변환
    // 숫자를 문자열로 타입 캐스팅한다.
    var str = x.toString();
    console.log(typeof str, str); // string 10

    // x 변수의 값이 변경된 것은 아니다.
    console.log(typeof x, x); // number 10

     암묵적 타입 변환(타입 강제 변환) : 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 
                                                  의해 암묵적으로 타입이 자동 변환되는 것.

    var x = 10;

    // 암묵적 타입 변환
    // 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.
    var str = x + '';
    console.log(typeof str, str); // string 10

    // x 변수의 값이 변경된 것은 아니다.
    console.log(typeof x, x); // number 10

     암묵적 타입 변환이 가독성 측면에서 더 좋을 수 도 있음, 간결하고 이해 쉬움.

9.2 암묵적 타입 변환
     cf) falsy data : 0, ' ', null, undefined, false, NaN
____9.2.1 문자열 타입으로 변환
____9.2.2 숫자 타입으로 변환

    1 - '1'   // -> 0
    1 * '10'  // -> 10
    1 / 'one' // -> NaN
    '1' > 0  // -> true

____9.2.3 불리언 타입으로 변환

9.3 명시적 타입 변환
____9.3.1 문자열 타입으로 변환

    // 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
    // 숫자 타입 => 문자열 타입
    String(1);        // -> "1"
    String(NaN);      // -> "NaN"
    String(Infinity); // -> "Infinity"
    // 불리언 타입 => 문자열 타입
    String(true);     // -> "true"
    String(false);    // -> "false"

    // 2. Object.prototype.toString 메서드를 사용하는 방법
    // 숫자 타입 => 문자열 타입
    (1).toString();        // -> "1"
    (NaN).toString();      // -> "NaN"
    (Infinity).toString(); // -> "Infinity"
    // 불리언 타입 => 문자열 타입
    (true).toString();     // -> "true"
    (false).toString();    // -> "false"

    // 3. 문자열 연결 연산자를 이용하는 방법
    // 숫자 타입 => 문자열 타입
    1 + '';        // -> "1"
    NaN + '';      // -> "NaN"
    Infinity + ''; // -> "Infinity"
    // 불리언 타입 => 문자열 타입
    true + '';     // -> "true"
    false + '';    // -> "false"

____9.3.2 숫자 타입으로 변환

    // 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
    // 문자열 타입 => 숫자 타입
    Number('0');     // -> 0
    Number('-1');    // -> -1
    Number('10.53'); // -> 10.53
    // 불리언 타입 => 숫자 타입
    Number(true);    // -> 1
    Number(false);   // -> 0

    // 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
    // 문자열 타입 => 숫자 타입
    parseInt('0');       // -> 0
    parseInt('-1');      // -> -1
    parseFloat('10.53'); // -> 10.53

    // 3. + 단항 산술 연산자를 이용하는 방법
    // 문자열 타입 => 숫자 타입
    +'0';     // -> 0
    +'-1';    // -> -1
    +'10.53'; // -> 10.53
    // 불리언 타입 => 숫자 타입
    +true;    // -> 1
    +false;   // -> 0

    // 4. * 산술 연산자를 이용하는 방법
    // 문자열 타입 => 숫자 타입
    '0' * 1;     // -> 0
    '-1' * 1;    // -> -1
    '10.53' * 1; // -> 10.53
    // 불리언 타입 => 숫자 타입
    true * 1;    // -> 1
    false * 1;   // -> 0

____9.3.3 불리언 타입으로 변환

    // 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
    // 문자열 타입 => 불리언 타입
    Boolean('x');       // -> true
    Boolean('');        // -> false
    Boolean('false');   // -> true
    // 숫자 타입 => 불리언 타입
    Boolean(0);         // -> false
    Boolean(1);         // -> true
    Boolean(NaN);       // -> false
    Boolean(Infinity);  // -> true
    // null 타입 => 불리언 타입
    Boolean(null);      // -> false
    // undefined 타입 => 불리언 타입
    Boolean(undefined); // -> false
    // 객체 타입 => 불리언 타입
    Boolean({});        // -> true
    Boolean([]);        // -> true

    // 2. ! 부정 논리 연산자를 두번 사용하는 방법
    // 문자열 타입 => 불리언 타입
    !!'x';       // -> true
    !!'';        // -> false
    !!'false';   // -> true
    // 숫자 타입 => 불리언 타입
    !!0;         // -> false
    !!1;         // -> true
    !!NaN;       // -> false
    !!Infinity;  // -> true
    // null 타입 => 불리언 타입
    !!null;      // -> false
    // undefined 타입 => 불리언 타입
    !!undefined; // -> false
    // 객체 타입 => 불리언 타입
    !!{};        // -> true
    !![];        // -> true

9.4 단축 평가
____9.4.1 논리 연산자를 사용한 단축 평가
            논리곱(&&) 연산자는 좌항에서 우항으로 평가가 진행됨.

    var done = true;
    message = done && '완료' || '미완료'; //"완료"
    done ? '완료' : '미완료'; //"완료"

    var done = false;
    message = done && '완료' || '미완료'; //"미완료"

____9.4.2 옵셔널 체이닝 연산자
            옵셔널 체이닝 연산자(?.) : 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고,
                                              그렇지 않으면 우항의 프로퍼티 참조를 이어감.

    var elem = null;
    // elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
    var value = elem?.value;
    console.log(value); // undefined

 

    var elem = null;
    // elem이 Falsy 값이면 elem으로 평가되고 elem이 Truthy 값이면 elem.value로 평가된다.
    var value = elem && elem.value;
    console.log(value); // null

____9.4.3 null 병합 연산자
            null 병합 연산자(??) : 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고,
                                        그렇지 않으면 좌항의 피연산자를 반환함. 기본값 설정에 유용.

    var foo = null ?? 'default string';
    console.log(foo); // "default string"