nullish 병합 연산자(??)

*최근에 추가된 문법이라 구식 브라우저에 폴리필이 필요하다

 

*polyfill : 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드, 쉽게 말해서 구식 브라우저에서 업데이트된 코드를 사용할 수 있게 해주는 것

 

nullish 병합 연산자(nullish coalescing operator, ??)

• 짧은 문법으로 여러 인자 중 확정되어있는 변수(=값이 할당된 변수)를 찾을 수 있다
• 또는 null, undefined의 값을 가진 변수에 값을 할당해주는 용도로 사용할 수 있다

 

a ?? b 

a가 null도 아니고 undefined도 아니면 a, 그 이외 경우는 b 

x = (a !== null && a !== undefined) ? a : b 와 같은 경우

(대신 코드가 길어진다)

 

let firstName =  null;

let lastName = null;

let nickName = ‘violet’;

 

console.log(firstName ?? lastName ?? nickName ?? ‘익명의 사용자’); //violet

 

?? 와 || 의 차이

• ||의 특징 : 첫번째 만난 truthy 값을 반환
• ??의 특징 : 첫번째 정의된 값을 찾아 반환

 

‘null, undefined, 0’ 를 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다

 

height = height ?? 100 // height에 값이 정의되지 않았다면 100이 할당된다

 

let height = 0;

 

console.log(height || 100); // 할당된 0이 falsy 값이므로 100이 출력

console.log(height ?? 100); // 0을 할당한 것을 인정하므로 0이 출력

 

연산자 우선순위

• 대부분의 연산자 > ?? > = > ?
• 복잡한 표현식에서는 ( )를 사용하는 것을 추천한다 

 

let height = null;

let width = null;

let area = (height ?? 100) * (width ?? 50); // 괄호를 쳐주지 않으면 *이 먼저 실행

 

console.log(area); // 5000

 

또한 JS에서는 안정성 관련 이슈 때문에 ?? 는 && 또는 || 와 함께 사용 X

제약을 피하려면 ( )를 사용하라

 

let x = (1 && 2) ?? 3;

console.log(x); // 2