자바스크립트 딥다이브 - 9장 타입 변환과 단축 평가

1. 타입 변환이란?

자바스크립트 의 모든 값 은 타입이 있다. 값의 타입 은 개발자의 의도에 따라 다른 타입으로 변환 할 수 있다.
의도적 으로 값의 타입을 변환 하는 것을 명시적 타입 변환 또는 타입 캐스팅 이라 한다.

const x = 10;
const str = x + '';

console.log(typeof str, str); // string 10
console.log(typeof x, x); // number 10 

위의 예제를 보면 x 는 number 타입이면서 10 인 변수다.
하지만, str 변수로 할당될 때 연산된 + 를 덧셈 연산자 가 아닌 문자열 연결 연산자 로 연산이 되었다.
x 와 더해진 값이 '' 인 빈 문자열 이기 때문에 암묵적으로 타입을 변환 한 것이다.

2. 암묵적 타입 변환

자바스크립트 엔진은 표현식 을 평가 할 때 개발자의 의도와는 상관없이 코드의 문맥 을 고려해서 암묵적으로 데이터 타입 을 강제 변환 할 때가 있다.

// 피연산자가 모두 문자열 타입어야하는 문맥인 경우
'10' + 2 // '102'

// 피연산자가 모두 숫자 타입이어야 하는 문맥인 경우
5 * '10' // 50

// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥인 경우
!0 // true
if(1){ }

1) 문자열 타입으로 변환

자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자 를 문자열 타입 으로 암묵적 타입 변환 한다.

1 + '2' // '12'

ES6 에서 도입된 템플릿 리터럴 의 표현식은 평가 결과 를 암묵적으로 변환한다.

`1 + 1 = ${1+1}` // '1 + 1 = 2'

2. 숫자 타입으로 변환

자바스크립트 엔진은 산술 연산자 표현식을 평가하기 위해 산술 연산자 표현식을 평가하기 위해 산술 연산자의 피연산자 중 숫자 타입이 아닌 피연산자 를 숫자 타입 으로 암묵적으로 변환 한다. 이때 피연산자 를 숫자 타입으로 변환할 수 없는 경우 는 산술 연산을 수행할 수 없으므로 표현식의 평가 결과는 NaN (Not a Number) 이 된다.

1 - '1' // 0
1 * '10' // 10
1 / 'one' // NaN
13 % '5' // 3

또한 비교 연산자 또한 숫자 타입으로 변환 된다.

'1' > 0 // true
'0' >= 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

3. 불리언 타입으로 변환

if 문 의 조건식은 boolean 타입으로 암묵적 타입 변환을 한다.

if(''){ } // false
if(true){ } // true
if(0){ } // false
if('str'){ } // true
if(null){ } // false

추가적으로 자바스크립트 엔진은 boolean 타입을 참으로 평가 되는 Truthy 와 거짓으로 평가 되는 Falsy 로 값을 구분한다.

Falsy 값

-false
-undefined
-null
-0
--0
-NaN
-''(빈 문자열)

Truthy 값

Falsy 값 이외의 모든 값은 True 로 평가되는 Truthy 값이다.

Boolean 생성자 함수 를 new 연산자 없이 호출하는 방법으로 타입을 변환할 수 있다.

Boolean('str') // true
Boolean(0) // false
Boolean(false) // false
Boolean(NaN) // false

! 부정 논리 연산자 를 두 번 사용하는 방법 으로 타입 변환을 할 수 있다.
이를 통해서 명시적 으로 타입 변환을 표현하는 방법이지만, Boolean 생성자 함수 를 사용하여 표현하는 방법이 직관적이기 때문에 해당 방법을 권장한다.

!!0 // false
!!1 // true
!!NaN // false
!!'str' // true

4. 단축 평가

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

#1. 논리합 연산자

논리합 연산자 || 는 피연산자 의 값 중 Truthy 한 값을 반환하는 연산자이다.
Truthy 값이 존재하지 않는 경우 마지막 피연산자 의 값을 반환 한다.

0 || null || 1 // 1
1 || 2 || 3 // 1

0 || null || NaN // NaN

#2. 논리곱 연산자

논리곱 연산자 && 는 피연산자 가 모두 Truthy 한 값인 경우 마지막 Truthy 값을 반환하는 연산자이다.
Truthy 값이 존재하지 않는 경우 첫번째 피연산자 의 값을 반환 한다.

`Cat` && `Dog` // `Dog`
1 === 1 && 'a' === 'a' // true
0 && 1 // 0

어떤 조건이 Truthy 한 값인 경우 논리곱 연산자 && 로 if 문 을 대체할 수 있다.

const done = true;
let message = '';

if(done) message = '완료';

message = done && '완료';

단, 위의 경우 변수 done 이 false 인 경우 변수 message 에는 false 가 할당되게 된다.

이때 유효한 방법이 논리합 연산자 || 를 사용하는 것이다.

const done = false;
let message = '';

if(!done) message = '미완료';

message = done || '완료';

위의 두 방법을 응용해서 사용하면 다음과 같다.

const done = true;
let message = '';

message = done && '완료' || '미완료';

변수 done 이 true 일 경우 완료 가 할당되고, false 일 경우에는 앞의 논리곱 연산은 false 가 되므로 미완료 가 할당된다.

2. 옵셔널 체이닝 연산자

ES11 에서 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자 가 null 또는 undefined 인 경우 undefined 를 반환하고, 그렇지 않으면 우항 의 프로퍼티 참조 를 이어간다.

const elem = null;

const value = elem?.value;
console.log(value); // undefined

4. null 병합 연산자

ES11 에서 도입된 null 병합 연산자 ?? 는 좌항의 피연산자 가 null 또는 undefined 인 경우 우항의 피연산자 를 반환하고, 그렇지 않으면 좌항의 피연산자 를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용 하다.

const foo = null ?? 'default string';
console.log(foo); // "default string"