모던 자바스크립트 딥다이브, 면접과 함께 공부하기 - 09장 타입 변화와 단축 평가

💡 아래 내용은 모던 자바스크립트 딥다이브를 공부하며 이해했던 내용을 다루고 있습니다. 혹시 틀렸거나 잘못된 정보가 있다면 알려주세요!

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

9.1 타입 변환이란?

타입 변환은 값의 데이터 타입을 다른 데이터 타입으로 변경하는 것입니다. JS에서는 암묵적 타입 변환과 명시적 타입 변환이 존재합니다.

9.2 암묵적 타입 변환

암묵적 타입 변환은 JS 엔진이 코드를 실행하는 동안 자동으로 수행되는 변환을 말합니다. 개발자가 예기치 못하게 임의로 타입이 변경될 수 있기 때문에, 명시적 타입 변환을 사용하는 것이 권장됩니다.

9.2.1 문자열 타입으로 변환

+ 연산자를 통해 문자열로의 암묵적 타입 변환이 가능합니다.

console.log('5' + 2); // '52'
console.log('5' + true); // '5true'

9.2.2 숫자 타입으로 변환

+연산자를 제외한 -,*,/,%를 사용하면 숫자 타입으로 변환됩니다. 또한, 비교 연산자도 숫자 타입으로 변환됩니다.

console.log('5' - 2); // 3
console.log('5' * '2'); // 10
console.log('10' / '2'); // 5
console.log('10' % '6'); // 4
console.log('5' > '2'); // true
console.log('5' > '8'); // false
console.log(+'5'); // 5
console.log(+'12.34'); // 12.34

9.2.3 불리언 타입으로 변환

주로 논리 연산(&&, ||, !)을 수행하거나, 조건문에서 조건문을 평가할 때 변환됩니다. JS에서 아래 값들은 false로 변환되니 주의가 필요합니다.

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

9.3 명시적 타입 변환

개발자가 직접 명시적으로 타입을 변환시키는 것을 말합니다.

9.3.1 문자열 타입으로 변환

String() 함수, toString() 메서드, 문자열 연결 연산자 (+ '')를 사용해 문자열 타입으로 변환시킬 수 있습니다.

9.3.2 숫자 타입으로 변환

Number() 함수, parseInt(), parseFloat() 함수, 단항 연산자 ( + '123)를 사용해 숫자 타입으로 변환시킬 수 있습니다.

9.3.3 불리언 타입으로 변환

Boolean() 함수, !! 연산자를 사용해 불리언 타입으로 변환할 수 있습니다.

9.4 단축 평가

단축 평가란, 논리 연산자를 처리할 때 자바스크립트가 왼쪽에서 오른쪽으로 표현식을 평가하며, 결과를 결정하기 위해 필요한 최소한의 정보만을 평가하는 것을 뜻합니다.

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

&&는 왼쪽 피연산자가 false일 경우, 그 값이 반환되며 오른쪽 피연산자는 평가되지 않습니다.

console.log(false && true); // false - 오른쪽 피연산자는 평가되지 않음
console.log(true && false); // false - 오른쪽 피연산자가 평가됨
console.log(true && 'hello'); // 'hello' - 오른쪽 피연산자가 평가됨

||는 왼쪽 피연산자가 true일 경우, 그 값이 반환되며 오른쪽 피연산자는 평가되지 않습니다.

console.log(true || false); // true - 오른쪽 피연산자는 평가되지 않음
console.log(false || true); // true - 오른쪽 피연산자가 평가됨
console.log('hello' || true); // 'hello' - 오른쪽 피연산자는 평가되지 않음

9.4.2 옵셔널 체이닝 연산자

ES11에서 도입된 옵셔널 체이닝 연산자(?.)는 왼쪽부터 null 또는 undefinded인 경우 undefined를 반환하고, 그렇지 않으면 참조를 이어간다.

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

9.4.3 null 병합 연산자

Null 병합 연산자(??)는 좌변의 피연산자 값이 null 또는 undefined일 경우에 오른변의 피연산자 값을 반환합니다. 그렇지 않은 경우에는 좌변의 피연산자 값을 반환합니다. 이 연산자는 피연산자 중 하나가 null이나 undefined인 경우에 대비하여 기본 값을 설정할 때 유용하게 사용할 수 있습니다.

let a = null;
let b = "Hello, World!";
let result = a ?? b;  // result는 "Hello, World!"가 됩니다.

OR 연산자(||)과는 어떻게 다른가요?

피연산자가 0, NaN, 빈 문자열("") 등 falsy 값인 경우에도 오른쪽 피연산자를 반환하는 OR연산자와 달리, Null 병합 연산자는 피연산자가 null 또는 undefined일 때만 오른쪽 피연산자를 반환합니다.