❗ 최근에 추가된 문법

스펙에 추가된 지 얼마 안 된 문법. 구식 브라우저는 폴리필이 필요하다.

null 병합 연산자(nullish coalescing operator) '??'

null 병합 연산자를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다.

a ?? b의 평가 결과

• a가 null도 아니고 undefined도 아니면 a
• 그 외의 경우는 b

null 병합 연산자 '??'없이 x = a ?? b와 동일한 동작을 하는 코드를 작성하면 다음과 같다.

x = (a !== null && a !== undefined) ? a : b;

비교 연산자와 논리 연산자만으로 null 병합 연산자와 같은 기능을 하는 코드를 작성하니 코드가 길어졌다.

EX.

firstName, lastName, nickName이란 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스도 허용한다고 하자.

화면엔 세 변수 중 실제 값이 있는 변수의 값을 출력하는데, 세 변수 모두 값이 없다면 '익명의 사용자'가 출력되도록 해보자.

이럴 때 null 병합 연산자 '??'를 사용하면 값이 정해진 변수를 쉽게 찾아낼 수 있다.

'??'와 '||'의 차이

👩🏻: '??'나 '||'나 비슷해보이는데?

두 연산자 사이에는 중요한 차이점이 있다.

• || : 첫 번째 truthy 값을 반환
• ?? : 첫 번째 정의된(defined) 값을 반환

null, undefined, 0을 구분지어 다뤄야 할 때 이 차이점이 핵심이 된다.

EX.
height에 값이 정의되지 않은 경우 height에는 100이 할당된다. 이제 ??와 ||를 비교해보자.

• height || 100 → height에 0을 할당했지만, 0을 falsy한 값으로 취급했기 때문에 null이나 undefined를 할당한 것과 동일하게 처리한다. 따라서 결과는 100
• height ?? 100 → height가 정확하게 null이나 undefined일 경우에만 100이 된다. 위 예시에서는 height에 0이라는 값을 할당했기 때문에 0이 출력된다.

이런 특징 때문에 높이처럼 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??이 적합하다.

연산자 우선순위

??의 연산자 우선순위는 5로 꽤 낮은 편이다.
따라서 ??는 =와 ?보다는 먼저, 대부분의 연산자보다는 나중에 평가된다.

그렇기 때문에 복잡한 표현식 안에서 ??를 사용해 값을 하나 선택할 땐 괄호를 추가하는 것이 좋다.

그렇지 않으면 *가 ??보다 먼저 실행되어, 원치 않는 결과가 나올 수 있다.

??엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 있다.

💡 안정성 관련 이슈 때문에 ??는 &&나 ||와 함께 사용할 수 없다.

아래 예시를 실행하면 문법 에러가 발생한다.

이 제약을 피하려면 괄호를 사용하자.

이 글은 https://ko.javascript.info/ 를 참고하여 작성하였습니다.