타입 변환과 단축 평가

타입변환

개발자가 의도적으로 타입을 변경하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 합니다. 반면, 의도와 무관하게 자바스크립트 엔진에 의해 타입이 변환되는 것을 암묵적 타입 변환 또는 타입 강제 변환이라 합니다.

아래 코드에서 str1, str2 변수 모두 타입은 string이지만, str1는 명시적 타입변환, str2는 암묵적 타입 변환입니다.

const x = 10
const str1 = x.toString()
const str2 = x + ""

Falsy 값들

false로 평가되는 값들은 아래와 같습니다.

• false
• undefined
• null
• 0, -0
• NaN
• “” (빈문자열)

단축 평가

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

논리 연산자

논리 연산자를 보면 논리합(||) 연산자에서는 앞의 피연산자가 true일 경우는 뒤의 피연산자의 참거짓 여부와 무관하게 true가 확정되고, false 인 경우는 뒤의 피연산자를 반환합니다. 논리곱(&&) 연산자에서는 앞의 피연산자가 true이면 뒤의 피연산자를 반환하고, false라면 뒤의 피연산자와 무관하게 false를 반환합니다.

단축 평가를 활용하는 경우

1. 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티 참조할 때
변수가 null일 경우, 있지도 않은 프로퍼티를 참조하면 에러가 발생하지만 변수가 null인지 논리곱으로 먼저 확인하면 Falsy 값인 null을 반환합니다.

const elem = null;
const value1 = elem.value // Error
const value2 = elem && elem.value; // null

 

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

매개변수를 입력하지 않았을 때 기본값을 설정하고 싶다면, 논리합을 활용하여 설정 가능합니다. 논리합의 두 번째 피연산자로 설정을 하면 앞의 값이 Falsy일 경우 뒤의 값이 실행됩니다. ES6의 방법을 활용하면, 매개변수에 등호를 사용하여 기본값을 설정할 수도 있습니다.

// 단축 평가를 사용한 매개변수의 기본값 설정
function getString(str) {
	return str || "default";
}

// ES6의 매개변수의 기본값 설정
function getString(str = "default") {
	return str
}

옵셔널 체이닝 연산자

논리곱 연산자를 활용했던 경우와 유사하게 옵셔널 체이닝 연산자를 활용하면 참조하는 값이 있을 때는 프로퍼티 참조를 이어가지만, 없을 경우 undefined를 반환합니다.

const elem = null;
const value1 = elem?.value // undefined

null 병합 연산자 (??)

Falsy 값들 중에서도 null, undefined만 판별하는 연산자로, 첫 번째 피연산자가 null, undefined일 경우에만 두 번째 피연산자를 반환합니다.

const notNullFalsy = false ?? "default"; // false
const nullFalsy = null ?? "default"; // default

참고자료

• 모던 자바스크립트 Deep Dive