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