09. 타입 변환과 단축 평가

모든 값에는 타입이 있다. 값의 타입을 개발자가 의도적으로 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다. 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것을 암묵적 타입 변환, 타입 강제 변환이라고 한다. 

자바스크립트의 원시 값은 변경이 불가능하다. 타입 변환이란 기존 원시 값을 변경하지 않고, 일시적으로 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 따라서 부수 효과는 없다. 암묵적 타입 변환이 일어나는 이유는 표현식을 가급적 에러 없이 평가하기 위해서다. 자바스크립트 엔진은 코드의 문맥에 따라 피연산자의 값을 암묵적 타입 변환하여 새로운 타입의 값을 만들어 한번 사용하고 버린다. 

개발자의 의도가 명확히 드러나는 명시적 타입 변환에 반해 암묵적 타입 변환은 개발자의 코드가 명백히 나타나지 않는다. 하지만 암묵적 타입 변환은 자바스크립트의 특징으로 자바스크립트 문법에 친숙한 개발자라면 가독성 측면에서 유리하게 작용할 수 있다. 따라서 타입 변환이 어떻게 동작하는지 이해하고 예측 가능한 코드를 작성해야 한다.

 

암묵적 타입 변환

표현식을 평가할 때 코드 문맥에 부합하도록 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

문자열 타입으로 변환

문자열 연결 연산자의 피연산자 혹은 템플릿 리터럴의 표현식의 평과 결과 등 코드 문맥상 문자열로 평가되어야 할 표현식은 문자열 타입으로 변환될 때 다음과 같이 동작한다.

0+'', -0+'' -> '0'
1+'' -> '1'
-1+'' -> '-1'
NaN+'' -> 'NaN'
Infinity+'' -> 'Infinity', -Infinity+'' -> '-Infinity'
true+'' -> 'true', false+'' -> 'false', null+'' -> 'null', undefined +'' -> 'undefined'
Symbol+'' -> TypeError
({})+'' -> '[object Object]' 
Math+'' -> '[object Math]'
[]+'' -> ''
[10, 20]+'' -> '10, 20'
(function(){})+''-> 'function(){}'
Array+'' -> 'function Array(){[native code]}'

숫자 타입으로 변환

산술 연산자와 비교 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다. 또한 + 단항 연산자는 피연산자가 숫자 타입이 아니면 숫자 타입으로 암묵적 타입 변환한다.

+'' -> 0
+'0' -> 0, +'1' -> 1
+'string' -> NaN
+true -> 1, +false -> 0, +null -> 0
+undefined -> NaN
+Symbol() -> TypeError
+{} -> NaN, +[] -> 0, +[10, 20] -> NaN, +(function(){}) -> NaN

불리언 타입으로 변환

조건식의 평과 결과는 논리적 참/거짓이 되어야 한다. 따라서 자바스크립트는 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환한다. 이때 자바스크립트 엔진은 값을 Truthy 또는 Falsy 값으로 구분하여 Truthy 값은 true로, Falsy 값은 false로 타입 변환한다. Falsy값은 다음과 같으며 Falsy 값이 아닌 다른 모든 값은 Truthy 값이다.

false
undefined
null
0, -0
NaN
''

 

명시적 타입 변환

명시적으로 타입을 변경하는 방법은 다양하다. 표준 빌트인 생성자 함수를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환을 이용하는 방법이 있다.

문자열 타입으로 변환

- String 생성자 함수를 new 연산자 없이 호출하는 방법

- Object.prototype.toString 메서드를 사용하는 방법

- 문자열 연결 연산자를 이용하는 방법(암묵적 타입 변환 이용)

숫자 타입으로 변환

- Number 생성자 함수를 new 연산자 없이 호출하는 방법

- parseInt, parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)

- +단항 산술 연산자를 이용하는 방법(암묵적 타입 변환 이용)

- * 산술 연산자를 이용하는 방법

불리언 타입으로 변환

- Boolean 생성자 함수를 new 연산자 없이 호출하는 방법

- ! 부정 논리 연산자를 두 번 사용하는 방법

 

단축 평가

논리 연산자를 사용한 단축 평가

단축 평가란 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 따라서 논리곱(&&)연산자와 논리합(||)연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 즉 연산 결과가 Truthy한지 Falsy한지 결정된 이후에는 더 이상 연산하지 않고, 피연산자를 타입 변환 없이 그대로 반환한다. 이 특성을 이용해 단축 평가를 사용하면 if문을 대체할 수 있다. 어떤 조건이 Truthy 값일때 무언가를 해야한다면 논리곱 연산자 표현식으로, Falsy 값일때 무언가를 해야 한다면 논리합 연산자 표현식으로 if 문을 대체할 수 있다. if...else 문은 삼항 조건 연산자로 대체할 수 있다.

옵셔널 체이닝 연산자

ES11에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용하다. 옵셔널 체이닝 연산자 도입 이전에는 논리곱 연산자를 사용하여 변수가 null 또는 undefined가 아닌지 확인했다. 하지만 논리곱 연산자는 좌항의 값이 Falsy값이면 좌항 연산자를 그대로 반환하기 때문에 좌항 피연산자가 Falsy값인 0이나 ''인 경우엔 우항의 참조를 이어가지 못한다. 이에 반해 옵셔널 체이닝 연산자는 null 또는 undefined만 구분해낼 수 있다.

const str = ''
console.log(str && str.length) // ''
console.log(str?.length) // 0

null 병합 연산자

ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용하다. 앞서 살펴본 옵셔널 체이닝 연산자와 마찬가지로 논리합 연산자와 비교해 Falsy 값을 값으로 인정하기 때문에 Falsy값이 기본값으로 유효한 경우에 사용하기 유용하다.

const foo1 = '' || 'default string' // 'default string'
const foo2 = '' ?? 'default string' // ''