1. Truthy값 vs Falsy 값
자바스크립트에서 boolean(불리언)타입으로 값을 평가할 때, 참(true)으로 평가되는 값을 Truthy한 값이라하고, 거짓(false)으로 평가되는 값을 Falsy한 값이라고 한다. 다음은 반드시 알아야하는 Fasly값과 Truthy값인데, 외워두면 좋다.
* 참고로 콘솔에서 값이 참인지 거짓인지 알고 싶다면 값 앞에 느낌표를 두개 붙여서 출력하면 된다.
2. || 과 ?? 를 이용하여 falsy 값 예외처리하기
어떤 값이 truthy하고, 어떤 값이 falsy한 값인지 알아야하는 이유는 바로 예외처리때문이다. falsy한 값이 들어왔을 때, 예외처리를 제대로 해주지 않으면 화면에 엉뚱한 값이 출력되기 때문이다.
논리연산자OR과 Null병합 연산자를 사용하면 falsy한 값을 깔끔하고 쉽게 예외처리할 수 있다.
1) || (논리연산자 OR)
: 자바스크립트에서 논리연산자인 AND와 OR는 불린값을 리턴하는 경우가 많지만, 아래 경우에는 왼쪽 피연산자 값의 유형에 따라서 두 피연산자중 하나를 리턴한다.
① AND연산자: 왼쪽피연산자가 Truty한 값이면, 오른쪽 피연산자를 리턴한다. falsy한 값이면 왼쪽 피연산자를 리턴한다
② OR연산자: 왼쪽피연산자가 Truthy한 값이면, 왼쪽 피연산자를 리턴한다. falsy한 값이면 오른쪽 피연산자를 리턴한다
console.log({} && null) // null
console.log({} || null) // {}
console.log(NaN && true) // NaN
console.log(undefined || 0) // 0
* 응용버전: 참고로 AND연산자는 OR 연산자보다 선행하기때문에 먼저평가된다.
console.log({} && 123 || null); // 123 ({} && 123) || null
console.log(NaN || 123 && true); // true NaN || (123 && true)
2) ?? (Null 병합 연산자)
ES2020에는 null과 undefined값을 가려내는 연산자가 추가되었다. 바로 '??(Null병합연산자)'이다. 왼쪽 피연산자의 값이 null이나 undefined 값이라면 오른쪽 피연산자가 리턴되고, 왼쪽 피연산자가 null이나 undefined값이 아니면 왼쪽 피연산자의 값의 리턴된다.
const test1 = null ?? 'Hello'; // Hello
const test2 = undefined ?? 123; // 123
const test3 = 'World' ?? '!!!'; // World
console.log(test1, test2, test3); // Hello 123 World
3) 너무나도 비슷한 ||(OR 연산자) 와 ??(Null 병합 연산자) 언제쓰지?
const test1 = null || 'Hello'; // 'Hello'
const test2 = null ?? 'Hello'; // 'Hello
const test3 = 0 || 'World'; // 'World'
const test4 = 0 ?? 'World'; // 0결론] ||(OR연산자)와 ??(Null병합연산자) 모두 자바스크립트에서 Falsy한 값을 찾을 때 사용하면 좋다. 단 ??(Null병합 연산자)는 null과 undefined만 체크해주기떄문에 이 둘만 예외처리를 해준다면 ??를 사용하는게 좋고, 모든 Falsy한 값을 예외처리한다면 ||(OR연산자)를 써주는게 좋다.