타입 변환이란?
- 타입 변환 : 의도적인 타입 변환, 암묵적인 타입 변환
- 개발자가 **의도적**으로 타입 변환 : 의도적 타입 변환, 타입 캐스팅
- 표현식 평가 도중 **자바스크립트 엔진**에 의한 타입 변환 : 암묵적 타입 변환, 타입 강제 변환
- 타입 변환을 통해 기존 원시 값을 변경하는 것이 아니라, 다른 타입의 새로운 원시 값 생성
- 암묵적 타입 변환은 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버림
암묵적 타입 변환
- 표현식 평가 시 코드의 문맥에 부합하지 않는 상황이 발생하는 경우, 자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식 평가
- 암묵적 타입 변환 발생 시 문자열, 숫자, boolean과 같은 원시 타입 중 하나로 타입을 자동 변환
- '10' + 2 // 2가 문자열로 암묵적 타입 변환 되어 '102' 됨 5 * '10' // 10이 숫자로 암묵적 타입 변환 되어 50 됨
문자열 타입으로 변환
- + 연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작
- 다른 type 값 + ‘’ ⇒ 다른 type이 문자열로 암묵적 타입 변환
- 템플릿 리터럴은 안에 표현식을 문자열 타입으로 암묵적 타입 변환
숫자 타입으로 변환
- 산술 연산자는 모두 숫자로 암묵적 타입 변환 (-, *, /, …)
- 피연산자를 숫자 타입으로 변환할 수 없는 경우 평가 결과 NaN
- 비교 연산자는 피연산자의 크기 비교를 하기 때문에 암묵적 타입 변환
- + 단항 연산자는 피연산자가 숫자 타입이 아니면 암묵적으로 타입 변환
- **+**다른 type 값 ⇒ 숫자 타입 값으로 암묵적 타입 변환
- 빈 문자열, 빈 배열, null, false ⇒ 0으로 암묵적 타입 변환 / true ⇒ 1로 암묵적 타입 변환 / 객체, 값이 있는 배열, undefined ⇒ NaN
불리언 타입으로 변환
- if 문, for 문 같은 **제어문** 또는 삼항 연산자같은 **조건식**은 논리적 참/거짓으로 평가되어야 하는 표현식 ⇒ 조건식의 평가 결과는 암묵적 타입 변환을 통해 boolean 타입으로 변환
- 조건문 안의 결과가 boolean 타입이 아니라면, 자바스크립트 엔진은 이를 Truthy 값 (참으로 평가되는 값)/Falsy 값 (거짓으로 평가되는 값)으로 구분
- Truthy 값 ⇒ true / Falsy 값 ⇒ false
- Falsy 값 : false, undefined, null, 0, -0, NaN, ‘’(빈 문자열)
- 그 외의 값은 모두 Truthy 값
명시적 타입 변환
- 개발자의 의도에 따라 명시적으로 타입 변경
- **표준 빌트인 생성자 함수** (String, Number, Boolean) 를 **new 연산자 없이** 호출
- **빌트인 메서드** 사용
- **암묵적 타입 변환** 이용
문자열 타입으로 변환
- String 생성자 함수를 new 연산자 없이 호출
- Object.prototype.toString 메서드 사용
- 문자열 연결 연산자 (+’’) 이용
숫자 타입으로 변환
- Number 생성자 함수를 new 연산자 없이 호출
- parseInt, parseFloat 메서드 사용 (문자열만 숫자 타입으로 변환 가능)
-
-
불리언 타입으로 변환
- Boolean 생성자 함수를 new 연산자 없이 호출
- ! 부정 논리 연산자를 두 번 사용
단축 평가
- 단축 평가 : 표현식 평가 도중 평가 결과가 확정된 경우 나머지 평가 과정 생략
논리 연산자를 사용한 단축 평가
객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티 참조할 경우
var elem = null;
var value = elem && elem.value
// elem이 Falsy 값이면 value는 elem
// elem이 Truthy 값이면 value는 elem.value
함수 매개변수에 기본값 설정할 경우
- 단축 평가 사용하여 매개변수의 기본값 설정 시 undefined로 발생할 수 있는 에러 방지
const getStringLength = (str) => {
str = str||'';
return str.length;
}
// ES6
const getStringLength = (str='') => {
return str.length;
}
옵셔널 체이닝 연산자
- **?.** 연산자
- 좌항의 피연산자가 null 또는 undefined인 경우 undefined 반환하고, 그렇지 않으면 우항의 프로퍼티 참조
- 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티 참조할 때 유용
- 옵셔널 체이닝 연산자 도입 전에는 논리곱 연산자를 사용하여 확인했음
- 논리곱 연산자는 좌항 피연산자가 Falsy 값이면 이 값을 그대로 반환 but 옵셔널 체이닝 연산자는 좌항 피연산자가 Falsy 값이지만 null이나 undefined가 아니라면 우항 프로퍼티 참조 이어감
var str = '';
// str이 Falsy 값이지만 null이나 undefined가 아니므로 우항 프로퍼티 참조 이어감
var length = str?.length;
console.log(length) // 0
null 병합 연산자
- ?? 연산자
- 좌항의 피연산자가 null 또는 undefined면 우항을, 그렇지 않으면 좌항 반환
- 변수에 기본값 설정할 때 유용
- null 병합 연산자 이전에는 논리합 연산자를 사용하여 변수 기본값 설정
- 논리합 연산자는 좌항이 Falsy이면 우항 값 그대로 반환 (만약 좌항의 0이나 ‘’가 기본값으로서 유효하다면 예기치 못한 동작 발생 가능) but null 병합 연산자는 좌항이 Falsy 여도 null이나 undefined가 아니면 좌항 프로퍼티 값 반환