자바스크립트 병합연산자

nullish 병합 연산자 '??'

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

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

a ?? b

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

 

병합 연산자 없이 동일한 동작을 하는 코드를 작성한다면

x = a ?? b 

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

위 두 코드는 동일한 동작을하는 코드

 

값이 정해진 변수를 간편하게 찾기

let firstName = null;
let lastName = null;
let nickName = "바이올렛";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

 

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

• ||는 첫 번째 truthy값을 반환한다.
• ?? 는 첫 번째 정의된(define) 값을 반환한다.

 

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 한다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

• height || 100은 height에 0을 할당했지만 0을 false값으로 취급
• 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다?? 가 적합하다.

 

변수에 기본값을 할당하는 용도로 사용

// height가 null이나 undefined인 경우, 100을 할당
height = height ?? 100;

• 괄호 없이 ??를 ||나 &&와 함께 사용하는 것은 금지되어 있다.
• ?? 연산자 우선순위는 대다수의 연산자보다 낮고 ? 와 = 보다는 높다.