09장. 타입 변환과 단축 평가

"모던 자바스크립트 Deep Dive" 자바스크립트의 기본 개념과 동작 원리

 

🔶 타입 변환이란?

---

자바스크립트의 모든 값은 특정 타입을 가집니다. 이 타입을 변환하는 과정을 타입 변환이라 합니다. 개발자가 직접 타입을 변경하는 경우를 명시적 타입 변환(타입 캐스팅)이라 하며, 자바스크립트 엔진이 코드 실행 중 자동으로 변환하는 경우를 암묵적 타입 변환(타입 강제 변환)이라 합니다. 중요한 점은 기존 원시 값의 타입이 직접 변경되는 것이 아니라, 변환된 새로운 원시 값이 생성된다는 것입니다.

 

🔶 암묵적 타입 변환

---

압묵적 타입 변환은 개발자의 의도와 상관없이 코드 문맥에 따라 자바스크립트 엔진이 자동으로 수행합니다.

문자열 타입으로 변환

``+`` 연산자는 피연산자 중 하나라도 문자열이면 문자열 연결 연산자로 동작합니다. 이 과정에서 문자열이 아닌 값은 문자열로 변환됩니다.

10 + '5';          // '105'
true + 'is true';  // 'true is true'

또한, 템플릿 리터럴에서도 표현식 삽입 시 문자열로 변환됩니다.

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

숫자 타입으로 변환

산술 연산, 비교 연산 그리고 + 단항 연산자를 사용할 때, 피연산자가 숫자가 아니면 숫자 타입으로 변환됩니다.

// 산술 연산
'10' - 5;   // 5
true * 3;   // 3 (true → 1)
false + 10; // 10 (false → 0)

// 비교 연산
'1' > 0  // true

// + 단항 연산자
+''    // 0
+'1'   // 1
+true  // 1
+null  // 0
+[]    // 0
+{}    // NaN

불리언 타입으로 변환

불리언 타입이 아닌 값이 조건문에서 평가될 때, Truthy(참으로 평가되는 값), Falsy(거짓으로 평가되는 값)로 변환됩니다. 이때 ``false``로 평가되는 Falsy 값은 ``false``, ``0``, ``-0``, ``''``(빈 문자열), ``null``, ``undefined``, ``NaN`` 입니다. 그 외 모든 경우는 Truthy 값입니다.

if (0) console.log('실행되지 않음');
if ('Hello') console.log('실행됨');  // truthy 값이므로 실행됨

 

🔶 명시적 타입 변환

---

개발자가 직접 타입 변환을 수행하는 것으로, 표준 빌트인 생성자 함수를 ``new`` 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법 그리고 암묵적 타입 변환을 의도적으로 사용하는 방법이 있습니다.

문자열 타입으로 변환

1. ``String`` 생성자 함수를 ``new`` 연산자 없이 호출하는 방법
2. ``Object.prototype.toString`` 메서드를 사용하는 방법
3. 문자열 연결 연산자를 사용하는 방법

String(123);       // '123'
(123).toString();  // '123'
123 + '';          // '123' (암묵적 변환 활용)

숫자 타입으로 변환

1. ``Number`` 생성자 함수를 ``new`` 연산자 없이 호출하는 방법
2. ``parseInt``, ``parseFloat`` 함수를 사용하는 방법 (문자열만 숫자 타입으로 변환 가능)
3. ``+`` 단항 산술 연산자를 이용하는 방법
4. ``*`` 산술 연산자를 이용하는 방법

Number('123');      // 123
parseInt('123px');  // 123
+'123';             // 123 (+ 단항 연산자 활용)

불리언 타입으로 변환

1. ``Boolean`` 생성자 함수를 ``new`` 연산자 없이 호출하는 방법
2. ``!`` 부정 논리 연산자를 두 번 사용하는 방법

Boolean(1);  // true
!!'Hello';   // true (논리 부정 연산자 활용)

 

🔶 단축 평가

---

단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 뜻합니다.

논리곱(``&&``) 연산자

``&&`` 연산자는 첫 번째 피연산자가 Falsy 하면 바로 반환하고, 그렇지 않으면 두 번째 피연산자를 반환합니다.

false && 'Hello';    // false
'Hello' && 'World';  // 'World'

논리합(``||``) 연산자

``||`` 연산자는 첫 번째 피연산자가 Truthy 하면 바로 반환하고, 그렇지 않으면 두 번째 피연산자를 반환합니다.

'' || '대체값';  // '대체값'
0 || 100;      // 100

이를 활용하면 기본값 설정이 가능합니다.

const name = '';
const defaultName = name || 'Guest';
console.log(defaultName); // 'Guest'

옵셔널 체이닝 연산자 (``?.``)

좌항의 피연산자가 ``null`` 또는 ``undefined`` 인 경우 ``undefined``를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어가는 연산자입니다.

null 병합 연산자 (``??``)

좌항의 피연산자가 ``null`` 또는 ``undefined`` 인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환하는 연산자입니다.