9.1 타입 변환이란?
- 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
- 원시 값은 변경 불가능한 값(Immutable value)이므로 변경할 수 없다.
9.2 암묵적 타입 변환(implicit coercion) = 타입 강제 변환(type coercion)
- 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
- 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.
9.2.1 문자열 타입으로 변환
+연산자
- 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작한다.
- 문자열 연결 연산자의 피연산자 중 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환한다.
// 숫자 타입
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 숫자 타입으로 변환
산술 연산자의 피연산자 중 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다.
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
// undefined 타입
+undefined // -> NaN
// 심벌 타입
+Symbol() // -> TypeError: Cannot convert a Symbol value to a number
// 객체 타입
+{} // -> NaN
+[] // -> 0
+[10, 20] // -> NaN
+(function(){}) // -> NaN
9.2.3 불리언 타입으로 변환
제어문의 조건식과 같이 불리언 값으로 평가되어야할 문맥에서 Truty값은 true로 Falsy값은 false로 암묵적 타입 변환된다.
Falsy값
false, undefined, null, 0, -0, NaN, ''
Falsy값 외의 모든 값은 true로 평가되는 Truthy 값이다.
9.3 명시적 타입 변환 = 타입 캐스팅(type casting)
개발자가 의도적으로 값의 타입을 변환하는 것
9.3.1 문자열 타입으로 변환
- String 생성자 함수를 New 연산자 없이 호출하는 방법
- Object.prototype.toString 메서드를 사용하는 방법
- 문자열 연결 연산자를 이용하는 방법
// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 => 문자열 타입
String(1); // -> "1"
String(NaN); // -> "NaN"
String(Infinity); // -> "Infinity"
// 불리언 타입 => 문자열 타입
String(true); // -> "true"
String(false); // -> "false"
// 2. Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 => 문자열 타입
(1).toString(); // -> "1"
(NaN).toString(); // -> "NaN"
(Infinity).toString(); // -> "Infinity"
// 불리언 타입 => 문자열 타입
(true).toString(); // -> "true"
(false).toString(); // -> "false"
// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 => 문자열 타입
1 + ''; // -> "1"
NaN + ''; // -> "NaN"
Infinity + ''; // -> "Infinity"
// 불리언 타입 => 문자열 타입
true + ''; // -> "true"
false + ''; // -> "false"
9.3.2 숫자 타입으로 변환
- Number 생성자 함수를 New 연산자 없이 호출하는 방법
- ParseInt, pareFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
- +단항 산술 연산자를 이용하는 방법
- *산술 연산자를 이용하는 방법
// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 숫자 타입
Number('0'); // -> 0
Number('-1'); // -> -1
Number('10.53'); // -> 10.53
// 불리언 타입 => 숫자 타입
Number(true); // -> 1
Number(false); // -> 0
// 2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
// 문자열 타입 => 숫자 타입
parseInt('0'); // -> 0
parseInt('-1'); // -> -1
parseFloat('10.53'); // -> 10.53
// 3. + 단항 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
+'0'; // -> 0
+'-1'; // -> -1
+'10.53'; // -> 10.53
// 불리언 타입 => 숫자 타입
+true; // -> 1
+false; // -> 0
// 4. * 산술 연산자를 이용하는 방법
// 문자열 타입 => 숫자 타입
'0' * 1; // -> 0
'-1' * 1; // -> -1
'10.53' * 1; // -> 10.53
// 불리언 타입 => 숫자 타입
true * 1; // -> 1
false * 1; // -> 0
9.3.3 불리언 타입으로 변환
- Boolean 생성자 함수를 New 연산자 없이 호출하는 방법
- ! 부정 논리 연산자를 두 번 사용하는 방법
// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 => 불리언 타입
Boolean('x'); // -> true
Boolean(''); // -> false
Boolean('false'); // -> true
// 숫자 타입 => 불리언 타입
Boolean(0); // -> false
Boolean(1); // -> true
Boolean(NaN); // -> false
Boolean(Infinity); // -> true
// null 타입 => 불리언 타입
Boolean(null); // -> false
// undefined 타입 => 불리언 타입
Boolean(undefined); // -> false
// 객체 타입 => 불리언 타입
Boolean({}); // -> true
Boolean([]); // -> true
// 2. ! 부정 논리 연산자를 두번 사용하는 방법
// 문자열 타입 => 불리언 타입
!!'x'; // -> true
!!''; // -> false
!!'false'; // -> true
// 숫자 타입 => 불리언 타입
!!0; // -> false
!!1; // -> true
!!NaN; // -> false
!!Infinity; // -> true
// null 타입 => 불리언 타입
!!null; // -> false
// undefined 타입 => 불리언 타입
!!undefined; // -> false
// 객체 타입 => 불리언 타입
!!{}; // -> true
!![]; // -> true
9.4 단축 평가
표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
9.4.1 논리 연산자를 사용한 단축 평가
논리곱 연산자(&&)
두 개의 피연산자가 모두 True여야 true를 반환하므로 논리 연산의 결과를 결정하는 두 번째 피연산자를 그대로 반환한다.
'Cat' && 'Dog' // -> "Dog"
논리합 연산자(||)
두 개의 피연산자중 하나만 True여도 true를 반환하므로 논리 연산의 결과를 결정하는 첫 번째 피연산자를 그대로 반환한다.
'Cat' || 'Dog' // -> "Cat"
| 단축 평가 표현식 | 평가 결과 |
| true || anything | true |
| flase || anything | anything |
| true && anything | anything |
| flase && anything | false |
단축 평가로 if문 대신하기
어떤 조건이 Truthy값일 때 무언가를 해야 한다면 논리곱(&&)연산자 표현식을 쓸 수 있다.
// done이 true라면 message에 '완료'를 할당
message = done && '완료';
어떤 조건이 Falsy값일 때 무언가를 해야 한다면 논리합(||)연산자 표현식을 쓸 수 있다.
// done이 false라면 message에 '미완료'를 할당
message = done || '미완료';
객체를 가리키는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
var elem = null;
// elem이 null이나 undefined와 같은 Falsy 값이면 elem으로 평가되고
// elem이 Truthy 값이면 elem.value로 평가된다.
var value = elem && elem.value; // -> null
9.4.2 옵셔널 체이닝 연산자(?.)
좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var elem = null;
// elem이 null 또는 undefined이면 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined
9.4.3 null 병합 연산자(??)
좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다.
- 변수에 기본값을 설정할 때 유용하다.
- ?? 연산자 이전에는 논리 연산자 || 를 사용한 단축 평가를 통해 변수에 기본값을 설정했다.
- 논리 연산자 (||)를 사용한 단축 평가의 경우 좌항의 피연산자가 Falsy값(false, undefined, 0, -0, '', null, NaN)이면 우항의 피연산자를 반환하지 않는다. (0, ''도 기본값으로 셋팅하려할시 불가능 함)
// Falsy 값인 0이나 ''도 기본값으로서 유효하다면 예기치 않은 동작이 발생할 수 있다.
var foo = '' || 'default string';
console.log(foo); // "default string"
// 좌항의 피연산자가 Falsy 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 반환한다.
var foo = '' ?? 'default string';
console.log(foo); // ""
'Javascript > 모던 자바스크립트 Deep Dive' 카테고리의 다른 글
| [모던 자바스크립트 Deep Dive] 07. 연산자 (0) | 2023.12.27 |
|---|---|
| [모던 자바스크립트 Deep Dive] 05. 표현식과 문 (0) | 2023.03.04 |
| [모던 자바스크립트 Deep Dive] 04. 변수 (0) | 2023.03.03 |
| [모던 자바스크립트 Deep Dive] 06. 데이터 타입 (0) | 2023.02.14 |