HTML, CSS, JavaScript/자바스크립트

nullish 병합 연산자 ??

JDI_ 2022. 6. 28. 15:41

여러 피연산자 중에 '값이 확정되어있는 변수'를 찾기 위해 나왔다. 

 

a ?? b 를 평가한다고 할 때

a가 null 이나 undefined가 아니면 a를 

a가 null 이나 undefined라면 b를 반환한다.

 

const foo = null ?? 'default string';
console.log(foo);
// 'default string' 이 반환된다.

const baz = 0 ?? 42; 
console.log(baz);
// 0은 null이나 undefined가 아니라서 바로 0이 반환된다.

?? 는 || 와 비슷하지만 차이가 있다.

 

변수에 활용할 때

||는 첫번째 참인 값을 반환하지만

??는 첫번째 정의된 값을 반환한다.

 

height를 따로 정의하지 않으면 100이 할당되지만

height = height ?? 100;
//height에 100이 할당된다

height를 0으로 정의한 경우 ||와 ?? 간에 차이가 발생한다.

let height = 0;

alert(height || 100); //100
// height에 0을 할당했지만, 0이 falsy한 값으로 취급되어 truthy한 값인 100을 반환함
alert(height ?? 100); // 0
// ??는 정확하게 null이나 undefined일 때만 100이 되기 때문에 0은 정의된 값으로 0이 반환된다.

 

이렇게 ?? 연산자는 변수에 기본값을 할당하는 용도로 쓸 수 있다.

 

 

참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

참고 : https://ko.javascript.info/nullish-coalescing-operator