(5) Modern JavaScript - null 병합 연산자

null 병합 연산자 - (??)

ES2020에서 추가된 null 병합 연산자 (Nullish coalescing operator)는

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

// null 연산자 - Nullish coalescing operator

const example1 = null ?? "I";
const example2 = undefined ?? "love";
const example3 = "JavaScript" ?? "SeopE";

console.log(example1, example2, example3);

example1과 2에서 null 병합 연산자 왼편에 각각 null과 undefined가 있다.

이렇게 연산자 왼편의 값이 null이나 undefined라면 연산자 오른값이 리턴되고

example3처럼 연산자 왼편 값이 null이나 undefined가 아니라면 연산자 왼편의 값이 리턴된다.

출력되는 값은 다음과 같다.

 

null 병합 연산자 - OR 연산자 ( || ) 와 비교

뭔가 앞서 공부한 OR 연산자와 동작하는 방식이 비슷해보이는데

실제로 아래와 같은 코드를 실행하면 똑같이 동작한다.

const title1 = null || 'SeopE';
const title2 = null ?? 'SeopE';

console.log(title1);
console.log(title2);

 

하지만 null 병합 연산자는 왼편의 값이 null이나 undefined인지 확인하고

OR 연산자는 왼편의 값이 falsty인지 확인하는 특징을 가지고 있기 때문이다.

 

위에서 똑같은 결과가 나온이유는

OR연산자에서 null은 truthy 값이기 때문에 오른쪽 값 'SeopE' 를 출력한 것이다.

---

그러므로 null 병합 연산자와 OR 연산자는 완전 다른 의미를 가지고 있기 때문에

아래와 같이 null이나 undefined가 아닌 falsy 값을 활용할 때 결과가 다르므로 

이 점을 참고해야한다.

const title1 = false || "SeopE";
const title2 = false ?? "SeopE";

console.log(title1);
console.log(title2);

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

console.log(width1);
console.log(width2);