9.1 타입 변환이란?
- 명시적 타입 변환(explicit coercion) : 개발자 / 의도적 (=타입 캐스팅type casting)
- 암묵적 타입 변환(implicit coercion) : 엔진 / 암묵적 (=타입 강제 변환type coercion)
- 기존 원시 값을 직접 변경하는 것은 아님
var x = 10; //숫자형 변수
var str = x + ""; //변수 x 숫자형으로 암묵적 타입 변환
console.log(typeof str, str); //string 10
console.log(typeof x, x); //number 10
9.2 암묵적 타입 변환
-
원시 타입 중 하나로 타입을 자동 변환
9.2.1 문자열 타입으로 변환
-
- 연산자
- 템플릿 리터럴의 표현식 삽입
//+연산자 str1 = 1 + "2"; console.log(typeof str1, str1); // string 12 //템플릿 리터럴 str2 = `1+1=${1 + 1}`; console.log(typeof str2, str2); // string 1+1=2// 숫자 타입 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()) + '' // -> TypeError: Cannot convert a Symbol value to a string // 객체 타입 ({}) + '' // -> "[object Object]" Math + '' // -> "[object Math]" [] + '' // -> "" [10, 20] + '' // -> "10,20" (function(){}) + '' // -> "function(){}" Array + '' // -> "function Array() { [native code] }"9.2.2 숫자 타입으로 변환
- 산술 연산자 (변환 불가 → 표현식 평가 결과 NaN)
- 비교 연산자 (피연산자 숫자 타입으로 암묵적 타입 변환)
-
- 단항 연산자
// + 단항 연산자를 이용한 숫자 타입으로 변환 중 +null + // => 0 undefined + // => NaN Symbol() + // => TypeError: Cannot convert a Symbol value to a number {} + // => NaN [] + // => 0 [10, 20] + // => NaN function () {}; // => NaN9.2.3 불리언 타입으로 변환
- Truthy 값(True로 평가) 과 Falsy 값(False로 평가)
- Falsy 값 : false, undefined, null, 0, -0, NaN, ‘’(빈 문자열)
- Truthy 값은 Falsy 제외한 나머지
-
9.3 명시적 타입 변환
9.3.1 문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출
- Object.prototype.toString 매서드 사용
- 문자열 연결 연산자 (+)
//1.
String(1); // ->"1"
String(true); // ->"ture"
//2.
(1).toString(); // -> "1"
true.toString(); // -> "true"
//3.
1 + ""; // -> "1"
true + ""; // -> "true"
9.3.2 숫자 타입으로 변환
- Number 생성자 함수 new 연산자 없이 호출
- parseInt, parseFloat 함수 사용 (문자열만 숫자 타입 변환 가능)
- 단항 산술 연산자 +
- 산술 연산자 *
//1.
Number("0"); // -> 0
Number(true); // -> 1
//2.
parseInt("0"); // -> 0
parseFloat("10.53"); // -> 10.53
//3.
+"0"; // -> 0
+true; // -> 1
//4.
"0" * 1; // -> 0
true * 1; // -> 0
9.3.3 불리언 타입으로 변환
- Boolean 생성자 함수 new 연산자 없이 호출
- Falsy 값이 들어가면 false로. 나머지는 true
- Falsy 값 : false, undefined, null, 0, -0, NaN, ‘’(빈 문자열)
- ! 부정 논리 연산자를 두 번 사용
- 마찬가지로 Falsy 값 false, 나머지는 true
//1. 나머지는 true
Boolean(undefined); // -> false
Boolean(null); // -> false
Boolean(0); // -> false
Boolean(-0); // -> false
Boolean(NaN); // -> false
Boolean(""); // -> false
//2.
!!undefined; //-> false
!!null; //-> false
!!NaN; //-> false
!!""; //-> false
!!0; //-> false
9.4 단축 평가
9.4.1 논리 연산자를 사용한 단축 평가
| 단축 평가 표현식 | 평가 결과 |
|---|---|
| true || anything | true |
| false || anything | anything |
| true && anything | anything |
| false && anything | false |
→ 결과가 확정된 경우 나머지 평가 과정을 생략
→ 논리 연산의 결과를 결정하는 값이 평가 결과가 됨.
→ if 문 대체 가능
var done = true;
var message = "";
// 주어진 조건이 true일 때
if (done) message = "완료";
// if 문은 단축 평가로 대체 가능하다.
// done이 true라면 message에 '완료'를 할당
message = done && "완료";
console.log(message); // 완료
var done = false;
var message = "";
// 주어진 조건이 false일 때
if (!done) message = "미완료";
// if 문은 단축 평가로 대체 가능하다.
// done이 false라면 message에 '미완료'를 할당
message = done || "미완료";
console.log(message); // 미완료
9.4.2 옵셔널 체이닝 연산자
- ?.
- 좌항 null, undefined → undefined 반환
- 그렇지 않으면, 우항 프로퍼티 참조 이어감
- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용
var elem = null;
// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined
var elem = null;
// elem이 Falsy 값이면 elem으로 평가되고 elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value;
console.log(value); // null
- ES11(ECMAScript2020)에서 도입됐다. 그 전에는 바로 위 예제 처럼 && 연산자를 이용한 단축 평가를 활용하여 ?. 옵셔널 체인징을 대체.
9.4.3 null 병합 연산자
- ??
- 좌항 null, undefined → 우항 피연산자 반환
- 그렇지 않으면, 좌항 피연산자 반환
- 변수의 기본값을 설정할 떄 유용
// 좌항의 피연산자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
var foo = null ?? "default string";
console.log(foo); // "default string"
// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.
var foo = "" || "default string";
console.log(foo); // "default string"
// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.
var foo = "" ?? "default string";
console.log(foo); // ""
이 포스트는 모던 자바스크립트 Deep Dive를 공부하며 정리한 내용입니다.