[모던 자바스크립트 Deep Dive] 9장 타입 변환과 단축 평가

타입 변환이란

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

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

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

  • 표현식을 평가할 때 자바스크립트 엔진에 의해 타입이 자동으로 변환되는 것
  • 한 번 사용하고 버리기 때문에, 기존 변수 값이 변경되는 것은 아니다.
  • 예측하기 어렵지만 가독성 측면에선 좋다.

암묵적 타입 변환

1️⃣ 문자열

-0 + ''; // '0'
-1 + ''; // '-1'
({}) + ''; // '[object Object]'
[] + ''; // ''

2️⃣ 숫자

빈 문자열, 빈 배열, null, false -> 0
객체, 빈 배열이 아닌 배열, undefined -> NaN

+''; // 0
+'1'; // 1

+null; // 0
+undefined; //NaN

+{}; // NaN
+[]; // 0
+[10, 20]; // NaN

3️⃣ 불리언

자바스크립트는 불리언 타입이 아닌 값은 Truthy 값 or Falsy 값으로 구분한다.
Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.

• Falsy 값

  false
  undefined
  null
  0, -0
  NaN
  빈 문자열 ('')

명시적 타입 변환

1️⃣ 문자열

String(1);
NaN.toString();
1 + '';

2️⃣ 숫자

Number('0');
parseInt('0'); // 문자열만 변환 가능
parseFloat('10.53'); // 10.53
+'0';
'0' * 1;

3️⃣ 불리언

Boolean('x'); // true
Boolean(''); // false
Boolean(0); // false
!!''; // 부정 논리 연산자 두 번 사용

단축 평가

단축 평가란, 표현식을 평가하는 도중에 평가 결과가 확정되면 나머지 평가 과정을 생략하는 것이다.

1️⃣ 논리 연산자

논리합과 논리곱에 의한 연산은 2개의 피연산자 중에서 어느 한쪽으로 평가된다.

• if 문을 대체할 수 있다.
• 객체의 값이 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 사용할 수 있다.
• 함수 매개변수에 기본값을 설정할 때 사용할 수 있다.

true || anything; // true
false || anything; // anything
true && anything; // anything
false && anything; // false

2️⃣ 옵셔널 체이닝 연산자 ?.

좌항의 피연산자가 null 또는 undefined 인 경우, undefined를 반환한다. 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

• 좌항 피연산자가 Falsy 값이어도 null이나 undefined가 아니면, 우항의 프로퍼티 참조를 이어간다.

var elem = null;

var value = elem?.value;
console.log(value); // undefined

3️⃣ null 병합 연산자 ??

좌항의 피연산자가 null 또는 undefined 인 경우, 우항의 피연산자를 반환한다. 그렇지 않으면 좌항의 피연산자를 반환한다.

• 변수에 기본값을 설정할 때 유용하다.
• 좌항 피연산자가 Falsy 값이어도 null이나 undefined가 아니면, 좌항의 피연산자를 그대로 반환한다.

var str1 = null ?? 'default string';
console.log(str1); // dafault string

var str2 = '' ?? 'default string';
console.log(str2); // ''