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

* 본 블로그 글은 모던 자바스크립트를 읽으며 진행했음을 밝힙니다.

* 개인적인 공부 기록용이, 상업적으로 사용하지 않으며 문제가 있을 시 즉시 글을 내리도록 하겠습니다.

 

9장 타입 변환과 단축 평가

앞서 본 것과 같이 자바스크립트의 모든 값은 타입이 있다.

이 타입은 개발자가 의도적으로 변경할 수 있는데, 이를 타입 변환(타입 캐스팅)이라고 한다.

 

🥗 명시적 타입 변환 / 타입 캐스팅

let num = 10;

// 숫자 => 문자
let strNum = num.toString();

 

🥙 이렇게 해도 num 의 타입이 변경 된 것은 아니다.

 

🥗 암묵적 타입 변환 / 타입 강제 변환

let num = 10;

// 숫자 => 문자
let strNum = num + '';

🥙 이것도 마찬가지로 num 의 타입이 변경 된 것은 아니다.

🥙 위 두 가지의 경우 모두 새로운 원시 값을 생성하는 것이다.

🥙 우리는 이 둘을 구분할 줄 알아야 한다.

🥙 내가 작성한 코드가 최종적으로 어떤 타입을 가지는지 예측 할 수 있어야 한다. (안그러면 오류난다.)

 

2. 암묵적 타입 변환

이 변환은 자바스크립트 엔진이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환할 때가 있다.

// 모두 문자열 타입이어야 하는 문맥
'10' + 2 // '102'

// 모두 숫자 타입이어야 하는 문맥
5 * '10' // 50

 

 

🥪 문자열 타입 변환

예제를 보는게 빠르다.

// 숫자 타입	
0 + ''				// '0'
-0 + ''				// '0'
1 + ''				// '1'
-1 + ''				// '-1'
NaN + ''			// 'NaN'
Infinity + ''		// 'Infinity'
-Infinity + ''		// '-Infinity'

// 불리언 타입
true + ''			// 'true'
false + ''			// 'false'

// null 타입
null + ''			// 'null'

// undefined 타입
undefined + ''		// 'undefined'

// 심벌 타입
(Symbol()) + ''		// 타입 에러

// 객체 타입
({}) + ''			// '[object object]'
Math + ''			// '[object Math]'
[] + ''				// ''
[10, 20] + ''		// '10, 20'
(function(){}) + ''	// 'function(){}'
Array + ''			// 'function Array() { [native code] }'

 

🥪 숫자 타입 변환

🥙 문맥상 숫자 타입으로 변환이 되고, 계산이 안되면 "NaN"이 된다.

 

🥪 불리언 타입 변환

🥙 이 부분에는 중요한 키워드가 있다.

🥙 Truthy(참으로 평가되는 값) Falsy(거짓으로 평가되는 값)

🥙 Falsy(거짓으로 평가되는 값) 이 친구만 알면 된다. (나머지는 Truthy)

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

 

3. 명시적 타입 변환

이 부분은 자바스크립트의 내장 함수를 이용한다.

 

🥪 문자열 타입 변환

🥙 String 생성자 함수를 new 연산자 없이 호출하는 방법

String(1)	// '1'
String(NaN)	// 'NaN'

🥙 toString()을 이용하는 방법 ( 정확하게는 Object.prototype.toString 메서드)

(1).toString()	// '1'

🥙 문자열 연결 연산자 이용하는 방법

1 + ''	// '1'

 

🥪 숫자 타입 변환

🥙 Number 생성자 함수를 new 연산자 없이 호출하는 방법

Number('0')	// 0
Number(true)	// 1

🥙 parseInt, parseFloat 함수 이용 (문자열만 사용 가능)

parseInt('0')	// 0

🥙 + 연산자 이용

+ '0'	// 0

🥙 * 연산자 이용

'0' * 1	// 0

 

🥪 불리언 타입 변환

🥙 Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

Boolean('x')	// true
Boolean(0)	// false

🥙 ! 부정 논리 연산자를 두 번 사용하는 방법

!!'string'	// true
!!''	// false

 

4. 단축평가

앞서 중요한 키워드  Truthy(참으로 평가되는 값) Falsy(거짓으로 평가되는 값) 를 기억해야한다.

먼저 아래 표를 기억하자

단축 평가 표현식	평가 결과
true || 아무거나	true
false || 아무거나	아무거나
true && 아무거나	아무거나
false && 아무거나	false

🥙여기서 아무거나는 true나 false 값이다.

🥙 사실 이 부분의 설명은 많지만, 그냥 이 표를 외우고 이해하는 것이 장황한 글을 읽는 것 보다 나을 거 같다.

🥙 혹시모던 자바스크립트를 2회독 정도 하게 되면 긴 글을 이해해보자. 

 

🥪 옵셔널 체이닝 연산자

이 친구는 ?. 이렇게 생겼다.

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

let tmp = null;

let result = tmp?.result	// undefined

 

🥪 null 병합 연산자

이 친구는 ?? 이렇게 생겼다.

좌항의 피연산자가 null 또는 undefined 인 경우 우항의 피연산자를 반환하고

그렇지 않으면 좌항의 피연산자를 반환한다.

let result = null ?? 'string'	// 'string'

 

---

 

사실 더 자세하게 이야기 할 수 있다.

하지만, 이 글은 정리의 목적이기에 자세한 정보 전달보다

내가 생각하는 핵심만 전달하는 것이 목적이다!

 

흠... 끝!