null 병합 연산자 (??)

물음표 두개(??)를 사용해서 null 혹은 undefined 값을 가려내는 연산자이다.

const example1 = null ?? 'I';
const example2 = undefined ?? 'love';
const example3 = 'Coding' ?? 'JavaScript';

console.log(example1, example2, example3); // ?

예시 1과 2를 보면 nill 병합 연산자 왼편에 각각 null과 undefined가 있다. 연산자 왼편의 값이 null이나 undefined라면 연산자 오른편의 값이 리턴되고, 예시 3처럼 연산자 왼편 값이 null이나 undefined 값이 아니라면 연산자 왼편 값이 리턴되는 동작 방식이다.

결과적으로 출력되는 값은 "I love Coding"

const example1 = null ?? 'I'; // I
const example2 = undefined ?? 'love'; // love
const example3 = 'Coding' ?? 'JavaScript'; //Coding

console.log(example1, example2, example3); // I love Coding

OR 연산자와 비슷해보이는데 실제로도 상황에 따라 똑같이 동작할 수 있다.

const title1 = null || 'love cat';
const title2 = null ?? 'love dog';

console.log(title1); // love cat
console.log(title2); // love dog

하지만 null 병합 연산자는 왼쪽의 값이 nill이나 undefined인지 확인하고 OR 연산자는 왼쪽의 값이 falsy인지 확인하기 때문에 null이나 undefined가 아닌 falsy값을 활용할 때 결과가 서로 다르다.

const title1 = false || 'Merry Christmas!';
const title2 = false ?? 'Santa';

console.log(title1); // Merry Christmas!
console.log(title2); // false

const width1 = 0 || 150;
const width2 = 0 ?? 150;

console.log(width1); // 150
console.log(width2); // 0