9.1 타입 변환이란?
- 자바스크립트의 모든 값은 타입이 있고, 개발자의 의도에 따라 다른 타입으로 변환 가능
- 명시적 타입 변환(=타입 캐스팅): 개발자가 의도적으로 값의 타입을 변환하는 것
- 암묵적 타입 변환(=타입 강제 변환)
- 원시 값은 변경 불가능한 값 → 타입 변환은 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것
- 단 한번 사용하고 버림 → 기존 변수 값을 재할당하여 변경하는 것이 아님
9.2 암묵적 타입 변환
- 개발자 의도와 상관없이 표현식을 평가하는 도중에 js 엔진에 의해 암묵적으로 타입이 자동 변환되는 것
문자열 타입으로 변환
1 + "2"
- +연산자는 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작
- 문자열 연결 연산자: 문자열 값을 만듦, 모든 피연산자는 모두 문자열 타입이어야 함
`1 + 1 = ${1 + 1}`
- 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환
| |
| 0 + '' |
| -0 + '' |
| 1 + '' |
| -1 + '' |
| NaN + '' |
| Infinity + '' |
| -Infinity + '' |
| |
| |
| true + '' |
| false + '' |
| |
| |
| null + '' |
| |
| |
| undefined + '' |
| |
| |
| (Symbol()) + '' |
| |
| |
| ({}) + '' |
| Math + '' |
| [] + '' |
| [10, 20] + '' |
| (function(){}) + '' |
| Array + '' |
숫자 타입으로 변환
| 1 - '1' |
| 1 * '10' |
| 1 / 'one' |
- 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 함
- 피연산자를 숫자 타입으로 변환할 수 없는 경우는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN
'1' > 0 // -> true
- 비교 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 함
- +단항 연산자: 피연산자가 숫자 타입이 아니면 숫자 타입의 값으로 암묵적 타입 변환 수행
| |
| +'' |
| +'0' |
| +'1' |
| +'string' |
| |
| |
| +true |
| +false |
| |
| |
| +null |
| |
| |
| +undefined |
| |
| |
| +Symbol() |
| |
| |
| +{} |
| +[] |
| +[10, 20] |
| +(function(){}) |
- 빈 문자열(””), 빈 배열([]), null, false는 0으로, true는 1로 변환
- 객체와 빈 배열이 아닌 배열, undefined는 변환되지 않아 NaN이 됨
불리언 타입으로 변환
| if ('') console.log('1'); |
| if (true) console.log('2'); |
| if (0) console.log('3'); |
| if ('str') console.log('4'); |
| if (null) console.log('5'); |
| |
| |
- if 문이나 for문과 같은 제어문은 불리언 값(참/거짓)으로 평가되어야 하는 표현식이므로 암묵적으로 불리언 타입으로 변환
- false로 평가되는 Falsy 값: false, undefined, null, 0, -0, NaN, “”
- true로 평가되는Truthy 값: Falsy 값 외의 모든 값
9.3 명시적 타입 변환
문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출하는 방법
- Object.prototype.toString 메서드를 사용하는 방법
- 문자열 연결 연산자를 이용하는 방법
| |
| |
| String(1); |
| String(NaN); |
| String(Infinity); |
| |
| String(true); |
| String(false); |
| |
| |
| |
| (1).toString(); |
| (NaN).toString(); |
| (Infinity).toString(); |
| |
| (true).toString(); |
| (false).toString(); |
| |
| |
| |
| 1 + ''; |
| NaN + ''; |
| Infinity + ''; |
| |
| true + ''; |
| false + ''; |
숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출하는 방법
- parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
| |
| |
| Number('0'); |
| Number('-1'); |
| Number('10.53'); |
| |
| Number(true); |
| Number(false); |
| |
| |
| |
| parseInt('0'); |
| parseInt('-1'); |
| parseFloat('10.53'); |
| |
| |
| |
| +'0'; |
| +'-1'; |
| +'10.53'; |
| |
| +true; |
| +false; |
| |
| |
| |
| '0' * 1; |
| '-1' * 1; |
| '10.53' * 1; |
| |
| true * 1; |
| false * 1; |
불리언 타입으로 변환
- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
- ! 부정 논리 연산자를 두 번 사용하는 방법
| |
| |
| Boolean('x'); |
| Boolean(''); |
| Boolean('false'); |
| |
| Boolean(0); |
| Boolean(1); |
| Boolean(NaN); |
| Boolean(Infinity); |
| |
| Boolean(null); |
| |
| Boolean(undefined); |
| |
| Boolean({}); |
| Boolean([]); |
| |
| |
| |
| !!'x'; |
| !!''; |
| !!'false'; |
| |
| !!0; |
| !!1; |
| !!NaN; |
| !!Infinity; |
| |
| !!null; |
| |
| !!undefined; |
| |
| !!{}; |
| !![]; |
9.4 단축 평가
논리 연산자를 사용한 단축 평가
'Cat' && 'Dog'
- 논리곱 연산자는 좌항에서 우항으로 평가가 진행되며, 두 번째 피연산자까지 평가해 봐야 위 표현식을 평가할 수 있음
- 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과 결정 → 두 번째 피연산자를 반환함
'Cat' || 'Dog'
- 논라합 연산자도 좌항에서 우항으로 평가가 진행됨.
- 논리 연산의 결과를 결정한 피연산자를 반환
- 단축 평가
- 이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것
- 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
- 단축 평가를 이용하여 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); // 미완료 |
단축 평가 사용이 유용한 경우
객체 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
- 만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생(프로그램 강제 종료)
| var elem = null; |
| var value = elem.value; |
| var elem = null; |
| |
| |
| var value = elem && elem.value; |
함수 매개변수에 기본 값을 설정 할 때
- 함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당됨
- 단축 평가를 사용해 매개변수의 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있음
| |
| function getStringLength(str) { |
| str = str || ''; |
| return str.length; |
| } |
| |
| getStringLength(); |
| getStringLength('hi'); |
| |
| |
| function getStringLength(str = '') { |
| return str.length; |
| } |
| |
| getStringLength(); |
| getStringLength('hi'); |
옵셔널 체이닝 연산자
- ?. : 촤항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
| var str = ''; |
| |
| |
| |
| var length = str?.length; |
| console.log(length); |
null 병합 연산자
- ?? : 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환
- 변수의 기본값을 설정할 때 유용
| var foo = null ?? 'default string'; |
| console.log(foo); |