[Deep Dive Study] 9장 타입 변환과 단축 평가

9.1 타입 변환이란?

1. 명시적 타입 변환(타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것

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

9.2 암묵적 타입 변환

1. 문자열 타입으로 변환

1 + '2' // "12"

// 템플릿 리터럴의 표현식 삽입
`1 + 1 = ${1 + 1}` // "1 + 1 = 2"

2. 숫자 타입으로 변환

// 산술연산자
1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN

// 비교 연산자
'1' > 0 // true

// 문자열 타입
+'' // 0
+'0' // 0
+'1' // 1
+'string' // NaN

// 불리언 타입
+true // 1
+false // 0

// null 타입
+null // 0

//undefuned 타입
+undefined // NaN

3. 불리언 타입으로 변환

if('') console.log('1');
if(true) console.log('2');
if(0) console.log('3');
if('str') console.log('4');
if(null) console.log('5');

// 2 4

-  자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값 또는 Falsy 값으로 구분한다.

9.3 명시적 타입 변환

1. 문자열 타입으로 변환

//1. Sting 생성자 함수를 new 연산자 없이 호출하는 방법
String(1);  // "1"
String(NaN);  // "NaN"

//2. Object.prototype.tpString 메서드를 사용하는 방법
(1).toString(); //"1"
(NaN).toString(); //"NaN"

//3. 문자열 연결 연산자를 이용하는 방법
1 + '' // "1"
NaN + '' // "NaN"

2. 숫자 타입으로 변환

//1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0');  // 0
Number(true);  // 1

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

//3. + 단항 산술 연산자를 이용하는 방법
+'0'; // 0
+true; // 1

//4. * 산술 연산자를 이용하는 방법
'0' * 1; // 0
true * 1; // 1

3. 불리언 타입으로 변환

//1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean(1);  // true
Boolean(null);  // false

//! 부정 논리 연산자를 두 번 사용하는 방법
!!'x'; // true
!!1; // true
!!null; // false

9.4 단축 평가

1. 논리 연산자를 사용한 단축평가

// 논리합(||) 연산자
'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'

// 논리곱(&&) 연산자
'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false

1) 단축 평가는 아래의 상황에서 유용하게 사용된다.

- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

- 함수 매개변수에 기본값을 설정할때

 

2. 옵셔널 체이닝 연산자(?.)

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

var elem = null;

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

3. null 병합 연산자(??)

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

- 변수에 기본값을 설정할 때 유용하다.

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

 

Review

- 단축 평가 부분을 이전 장에서도 간단히 한 번 보았는데 여기서 좀 더 구체적으로 설명을 해주었다. 사실 그 전까지는 단축 평가가 뭔지 모르고 있는 상태여서 되게 흥미로웠고 현업에서도 많이 쓸까라는 생각이 들기도 하였다. 알고리즘 문제 풀때는 많이 활용할 수도 있을 것 같은 생각이 들었다.

 

출처 : https://wikibook.co.kr/mjs/

모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리