타입 변환과 단축 평가

타입 변환과 단축 평가

타입 변환

• 타입 변환이라고 하는 개념은 기존 원시값(primitive)을 직접 변경하는 것은 아님.

  • 원시값은 변경 불가능한 값(immutable value)이므로 변경할 수 없음.

• 타입 변환에는 암묵적 타입 변환(implicit coercion)과 명시적 타입 변환(explicit coercion)이 있음.

  • 암묵적 타입 변환(=타입 강제 변환)

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

  • 명시적 타입 변환(=타입 캐스팅)

    • 개발자가 의도적으로 값의 타입을 변환하는 것

---

암묵적 타입 변환

• 핵심 키워드 : 🍉문맥🍉

• 자바스크립트 엔진은 표현식을 평가할 때 개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환할 때가 있음.

---

명시적 타입 변환

• 명시적 타입 변환은 개발자의 의도에 따라 명시적으로 타입을 변경하는 것을 의미함.

• 타입 변환 방법(추천)

  • 문자열 타입으로 변환하려는 경우 : 문자열 연결 연산자 +를 이용하는 방법

  • 숫자 타입으로 변환하려는 경우 : 단항 산술 연산자 +를 이용하는 방법

    • 이때 숫자 타입으로 변환할 수 없을 땐 NaN이 반환됨.

---

단축 평가(short circuit evaluation)

• 단축 평가는 이름 그대로 "단축해서 평가를 한다"는 개념으로, 앞에서 평가가 끝나면 뒤에는 확인을 하지 않고 평가를 끝냄.

  • 한마디로, 단축 평가에선 해당 논리 연산자의 평가 결과를 결정하는 피연산자가 그 평가 결과(=값)이 됨.

• 단축 평가의 장점

  • 단축 평가는 함수 매개변수의 기본값을 설정하거나 null/undefined 관련 문제를 예방하기 위해 주로 사용됨. => 안정성 있는 코딩을 위해 사용

논리 연산자를 사용하는 단축 평가

• 논리 연산자를 사용하는 단축 평가는 피연산자의 타입을 변환하지 않고 그대로 반환함. (참고)

  • ||(논리합) 연산자의 경우

    true || false; // true
    "apple" || false; // "apple"
    "apple" || true; // "apple"
    false || false; // false (오른쪽 값 반환)
    false || "banana"; // "banana" (오른쪽 값 반환)

    • || 연산자는 왼쪽 피연산자가 true로 평가되면 왼쪽의 값을 바로 반환함.

    • 반면 왼쪽 피연산자가 false이면 오른쪽 피연산자 값을 반환함.

  • &&(논리곱) 연산자의 경우

    • 양쪽 피연산자 모두 true여야 하므로, 왼쪽이 true일 땐 오른쪽 값이 true로 평가되든 false로 평가되든 오른쪽 값을 그대로 반환함.

    "apple" && true; // true
    "apple" && false; // false
    false && "banana"; // false
    null && false;  // null

    • 왼쪽 피연산자가 false로 평가되면 오른쪽 피연산자는 평가하지도 않고 바로 왼쪽 값을 반환함.

• 논리 연산자를 사용한 단축 평가는 React에서 JSX로 조건부 렌더링을 할 때 사용하기도 함.

옵셔널 체이닝(optional chaining)

• 옵셔널 체이닝 연산자(?.)는 ES11에서 새롭게 도입되었는데, 어떤 객체를 가르킬 것으로 기대하는 변수(?.의 왼쪽에 오는 변수)가 null 또는 undefined가 아닌지를 먼저 확인한 후 해당 객체의 프로퍼티를 참조하려고 할 때 유용함.

• 좌항의 피연산자가 null 또는 undefined일 때는 undefined를 반환하고, 그 외의 경우에는 우항의 프로퍼티 참조를 이어감.

• ?. 도입 이전에 사용하던 && 단축 평가의 경우에는 아래와 같은 문제점이 있었음.

  var str = '';
  var length = str && str.length;
  
  console.log(length); // ''

  • 만약 빈 문자열의 길이를 참조하고 싶은 경우에, 좌항 피연산자가 falsy 값으로 평가되어 좌항의 빈 문자열이 그대로 반환되어 원하는 프로퍼티(여기서는 length)를 참조하지 못하는 문제가 있음.

  • 0의 경우도 마찬가지임.

• 위 예제를 옵셔널 체이닝 연산자를 사용하여 바꿔보면 아래와 같음.

  var str = '';
  var length = str?.length;
  
  console.log(length); // 0

  • 좌항 피연산자가 falsy 값이지만, null 또는 undefined가 아니므로 우항의 프로퍼티 참조를 이어감.

null 병합(nullish coalescing) 연산자

• 'coalesce'는 '합치다'라는 뜻임.

• null 병합 연산자(??)는 ES11에서 도입되었는데, 좌항??우항에서 좌항의 피연산자가 null 또는 undefined인 경우에는 우항의 피연산자(=기본값)를 반환하고, 좌항의 피연산자게 null 또는 undefined가 아닌 경우에는 좌항의 피연산자를 반환함.

• null 병합 연산자는 변수에 기본값을 설정할 때 유용함.

---

참고문헌

이웅모 (2020). 모던 자바스크립트 Deep Dive. 위키북스