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

효ㄷi 2025. 2. 14. 16:30

1. 타입 변환이란?

자바스크립트의 모든 값은 타입이 있고, 타입은 다른 타입으로 변환할 수 있다.

이때, 개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환 & 타입 캐스팅이라 한다.

하지만 개발자의 의도와 상관 없이 암묵적으로 타입이 변환되는 것을 암묵적 타입 변환 & 타입 강제 변환이라 한다.

그런데 이런 명시적 타입 변환, 암묵적 타입 변환이 기존 원시 갑을 직접 변경하는 것은 아니다.

원시 값은 변경 불가능한 값이므로 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

2. 암묵적 타입 변환

자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가하고,

암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

2-1) 문자열 타입으로 변환

+연산자는 피연산자 중 하나 이상이 문자열이면 문자열 연결 연산자로 동작한다.

문자열 연결 연산자의 역할은 문자열 값을 만드는 것이다.

자바스크립트 엔진은 문자열 연결 연산자 표현식을 평가하기 위해

문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를

문자열 타입으로 암묵적 타입 변환한다.

또 자바스크립트 엔진은 표현식을 평가할 때 코드 문맥에 부합하도록 암묵적 타입 변환을 실행한다.

예를 들어 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환한다.

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

2-2) 숫자 타입으로 변환

자바스크립트 엔진은 산술 연산을 수행할 때 피연산자가 숫자 타입이 아닐 경우, 내부적으로 숫자 타입으로 암묵적 변환을 수행한다.

또 비교 연산을 수행할 때 숫자가 아닌 값을 숫자로 변환해 계산한다.

빈 문자열, 빈 배열, null, false는 0으로, true는 1로 변환된다.

객체와 빈 배열이 아닌 배열, undefined는 NaN이 된다.

2-3) 불리언 타입으로 변환

자바스크립트 엔진은 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서

불리언 타입이 아닌 값을 truthy 값(참으로 평가되는 값) 또는 falsy값(거짓으로 평가되는 값)으로 구분해 암묵적으로 타입을 변환한다.

false, undefined, null, 0, 10, NaN, ''(빈 문자열) 들은 falsy값이다.

3. 명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변환하는 방법은 다양하다.

3-1) 문자열 타입으로 변환

1) String 생성자 함수를 new 연산자 없이 호출

2) Object.prototype.toString 메서드를 사용

3) 문자열 연결 연산자 이용

1) console.log(String(123)); // "123"
2) console.log((123).toString()); // "123"
3) console.log(123 + ""); // "123"

3-2) 숫자 타입으로 변환

1) Number 생성자 함수를 new 연산자 없이 호출

2) parseInt.parseFloat 함수를 사용

3) + 단항 산술 연산자 이용

4) * 산술 연산자 이용

1) console.log(Number("123")); // 123
2) console.log(parseInt("123px")); // 123
3) console.log(+"123"); // 123
4) console.log("10" * 1); // 10

3-3) 불리언 타입으로 변환

1) Boolean 생성자 함수를 new 연산자 없이 호출

2) ! 부정 논리 연산자를 두 번 사용

1) console.log(Boolean(1)); // true
2) console.log(!!1); // true

4. 단축 평가

4-1) 논리 연산자를 사용한 단축 평가

단축 평가는 논리 연산자(&&, ||)를 사용할 때 불필요한 연산을 생략하는 기법이다.

즉, 왼쪽 값만 보고 결과를 확정할 수 있으면 오른쪽 값은 아예 평가하지 않는다.

자바스크립트에서 논리 연산자 && (AND)와 || (OR) 는 논리 연산의 결과를 결정하는 피연산자를 그대로 반환한다.

즉, true/false로 변환하지 않고, 원래 값 그대로 반환하는 것이 특징이다.

✅ 논리합(||) 연산자: 첫 번째 truthy(참) 값을 반환

A || B에서:

A가 truthy(참) 값이면 A를 반환하고, B는 실행하지 않음 (단축 평가 발생)
A가 falsy(거짓) 값이면 B를 평가하고, B의 값을 반환

console.log(true || "hello");  // true (왼쪽이 true라서 오른쪽은 실행 안 함)
console.log(false || "hello"); // "hello" (왼쪽이 false라서 오른쪽 실행)
console.log(0 || "hi");        // "hi" (0은 false이므로 오른쪽 반환)
console.log(null || undefined); // undefined (둘 다 false라서 마지막 값 반환)

✅ 논리곱(&&) 연산자: 첫 번째 falsy(거짓) 값을 반환

A && B에서:

A가 falsy(거짓) 값이면 A를 반환하고, B는 실행하지 않음 (단축 평가 발생)
A가 truthy(참) 값이면 B를 평가하고, B의 값을 반환

console.log(true && "hello");  // "hello" (왼쪽이 true이므로 오른쪽 반환)
console.log(false && "hello"); // false (왼쪽이 false라서 오른쪽 실행 안 함)
console.log(0 && "hi");        // 0 (왼쪽이 false라서 오른쪽 실행 안 함)
console.log("hi" && null);     // null (앞이 true이므로 뒤의 값 반환)

* 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

객체를 참조할 때, 해당 객체가 null 또는 undefined일 가능성이 있다면,

직접 접근하면 "TypeError: Cannot read properties of null (or undefined)" 에러가 발생할 수 있다.

var elem = null
var value = elem.value; // 타입 에러 발생

= 여기서는 elem이 null인 상태에서 바로 그 속성(.value)에 접근하려고 했기 때문에 에러 발생
JavaScript에서는 null인 객체의 속성을 직접 읽으려고 시도하면 무조건 에러 발생

여기서 단축 평가를 사용하면

var elem = null;
var value = elem && elem.value; // null

= elem && elem.value에서 JavaScript는 먼저 왼쪽(elem)을 평가
elem이 null이므로, JavaScript는 추가 평가를 중단하고 바로 null을 반환
오른쪽 부분(elem.value)은 아예 실행되지 않으므로 에러 발생 x

* 함수 매개변수에 기본값을 설정할 때

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당되는데

이때 단축 평가를 사용해 매개변수에 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다.

4-2) 옵셔널 체이닝 연산자 (?)

옵셔널 체이닝 연산자 ?.는 null이나 undefined인 객체의 속성에 접근할 때 에러 대신 undefined를 반환한다.

var user = null;
console.log(user?.name); // ✅ undefined (에러 없이 실행됨)

var user2 = { name: "Alice" };
console.log(user2?.name); // ✅ "Alice" (정상적으로 접근)

4-3) null 병합 연산자 (??)

값이 null이나 undefined일 때 기본값을 지정할 때 사용한다.

var value = null ?? "기본값";
console.log(value); // ✅ "기본값"