nullish 병합 연산자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다.
a ?? b의 평과 결과는 다음과 같다.
1) a가 null도 아니고 undefined도 아니면 a
2) 그 외의 경우 b
?? 없이 이와 동일한 동작을 코드를 작성하면 아래와 같다.
// x = a ?? b
x = (a !== null && a !== undefined) ? a : b;
이럴 때 ?? 연산자를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다.
??와 ||의 차이
nullish 병합 연산자는 언뜻 or 연산자 ||와 비슷해 보인다. 그러나 두 연산자 사이에는 중요한 차이점이 있다.
1) ||는 첫 번째 truthy 값을 반환
2) ??는 첫 번째 정의된 값을 반환
null과 undefined, 숫자 0을 구분지어 다뤄야 할 때 이 차이는 아주 중요한 역할을 한다.
height = height ?? 100;
height에 값이 정의되지 않은 경우 height에는 100이 할당된다.
이제 ??와 ||을 비교해 보자.
let height = 0;
console.log(height || 100); // 100 -> (A)
console.log(height ?? 100); // 0 -> (B)
(A)에서는 height에 0을 할당했지만 0을 falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다. 따라서 그 결과는 100이 된다. 반면 (B)에서는 height가 null이나 undefined인 경우에만 100이 된다. 그러나 height에는 0을 할당했기 때문에 그대로 0이 출력된다.
이러한 특징 때문에 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다.
연산자 우선순위
??의 연산자 우선순위는 5로 꽤 낮다. 따라서 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가된다. 따라서 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택하려는 경우 괄호를 추가하는 게 좋다.
let height = null;
let width = null;
let area1 = (height ?? 100) * (width ?? 50);
console.log(area1); // 5000
let area2 = height ?? 100 * width ?? 50;
console.log(area2); // 0
연산자 우선순위의 영향으로 인해 위 예시에서 area2는 원치 않는 결과를 출력한다. 결국 area2는 아래와 같이 동작하는 것이다.
let area2 = height ?? (100 * width) ?? 50;
제약 사항
??에는 자바스크립트 언어에서 규정한 또 다른 제약이 있다. 안정성 관련 이슈 때문에 ??는 &&이나 ||와 함께 사용하지 못한다. 따라서 아래 코드를 실행하면 문법 에러가 발생한다.
let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'
이러한 제약은 개발자들이 ||를 ??로 바꾸기 시작하면서 만드는 실수를 방지하기 위해 추가된 것으로, 이를 피하기 위해서는 괄호를 사용하면 된다.
let x = (1 && 2) ?? 3;
console.log(x); // 2
'Javascript > Javascript' 카테고리의 다른 글
[Javascript] undefined과 null 바로 알기 (0) | 2024.08.01 |
---|---|
[Javascript] Window 객체 바로 알기 (0) | 2024.08.01 |
[Javascript] console.log() 다시 보기 (0) | 2024.07.31 |
[Javascript] 이벤트 버블링 (1) | 2024.07.30 |
[Javascript] 형변환(1) - 명시적 형변환 (0) | 2021.04.09 |