[JS딥다이브] 4. 타입 변환과 단축 평가

게코젤리·2023년 4월 19일

1. 타입 변환

  • 개발자가 의도적으로 타입을 변환하는 명시적 타입 변환.
  • 개발자의 의도와 관계없이 자바스크립트 엔진에 의해 타동 변환되는
    암묵적 타입 변환.
  • 명시적 타입 반환, 암묵적 타입 반환이 기존 원시값을 직접 변경하는 것은 아님, 기존 원시 값을 사용해 새로운 원시 값을 생성.
  • 암묵적 타입 변환의 경우 기존 값을 통해 새로운 타입의 값을 만들어 단 한 번 사용하고 버림.

2. 암묵적 타입 변환

// 1. +의 피연산자 중 하나 이상이 문자열일 경우 숫자 타입은 문자열로 타입변환
0 + '' // -> '0'
// 2. -, *, / 숫자 타입이 아닌 피연산자를 숫자 타입으로 타입 변환, 이때 숫자 타입으로 변환할 수 없는 경우 연산 결과는 NaN.
1 - '1' // -> 0
1 * '10' // -> 10
1 / 'one' // -> NaN
// 3. +단항 연산자는 숫자타입이 될수 있는 피연산자를 숫자타입으로 변환
+'' // -> 0
+'' // -> 0
+[] // -> 0
+true // -> 1
+'one' // -> NaN
+['one'] // -> NaN
+{} // -> NaN
+undefined // -> NaN
// 4. 조건문에서  false가 되는  falsy값
// false, undefined, null, 0, -0, NaN, ''

3. 명시적 타입 반환

  • 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하기
let num = 123;
let str = String(num); // '123'
let bool = Boolean(num); // true
  • 빌트인 메서드 이용하기
let num = 123;
let str = num.toString(); // '123'
let parsedNum = parseInt('123'); // 123

4. 단축 평가

논리 연산자를 이용한 단축 평가

  • 논리합(||) 또는 논리곱(&&) 연산자 표현식은 2개의 피연산자 중 어느 한쪽으로 평가된다.
  • 객체를 가리키기를 기대하는 변수가 null, undefined인지 확인하고 프로퍼티를 참조할 때
  • 함수 매개변수에 기본값을 설정할 때(ES6 방법을 쓰는 게 낫다)

옵셔널 체이닝 연산자

  • ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 아니라면 우항의 프로퍼티 참조
  • &&과 비슷하지만 다른 점 : &&은 좌항 피연산자가 Falsy값이면 좌항 연산자를 그대로 반환한다. 그러나 ?.은 좌항이 undefined, null일때만 좌항을 반환한다. 즉, 0, '' 같은 값도 유효하게 사용하고 싶다면 ?.을 사용하는 것이 좋다.
const str = '';
str?.length // -> 0;
str && str.length // -> ''

null 병합 연산자

  • ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다.
  • || 과 비슷하지만 다른 점: ||은 좌항 피연산자가 Falsy값이면 좌항 연산자를 그대로 반환한다. 그러나 ??은 좌항이 undefined, null일때만 좌항을 반환한다. 즉, 0, '' 같은 값도 유효하게 사용하고 싶다면 ??을 사용하는 것이 좋다.
const str = '';
str || 'default'; // -> 'default'
str ?? 'default'; // -> ''

📖 모던자바스크립트 딥다이브 9장 타입 변환과 단축 평가(108p)

0개의 댓글