[모던 자바스크립트] 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'
사실 더 자세하게 이야기 할 수 있다.
하지만, 이 글은 정리의 목적이기에 자세한 정보 전달보다
내가 생각하는 핵심만 전달하는 것이 목적이다!
흠... 끝!
