[JS] nullish coalescing operator (널 병합 연산자)

참고

Nullish coalescing operator - JavaScript | MDN

 

요약

• 표기 : var_A ?? var_B
• 의미: var_A가 nullish한 값(null 또는 undefined)인 경우 var_B를 반환하고, 그렇지 않은 경우 var_A를 반환한다.
  • 때문에 || (OR) 연산자와는 차별점이 있다. OR 연산자는 falsy한 값에 대해 모두 반응하기 때문이다.

 

??와 || 비교

• nullish한 값과 초기화된 변수에 대해서는 같은 동작을 보인다.

const i_am_null = null;
const i_am_undefined = undefined;
const i_am_value = 'monkey';

console.log('?? nullish test: ', i_am_null ?? 'ingnoh');
console.log('|| nullish test: ', i_am_null || 'ingnoh');
console.log('?? undefined test: ', i_am_undefined ?? 'ingnoh');
console.log('|| undefined test: ', i_am_undefined || 'ingnoh');
console.log('?? value test: ', i_am_value ?? 'ingnoh');
console.log('|| value test: ', i_am_value || 'ingnoh');

/* 실행결과
?? nullish test:  ingnoh
|| nullish test:  ingnoh
?? undefined test:  ingnoh
|| undefined test:  ingnoh
?? value test:  monkey
|| value test:  monkey
*/

• 그러나 false, 0, 빈 문자열과 같은 falsy한 값에 대해서는 다른 동작을 보인다.

let i_am_falsy = 0;
console.log('?? falsy test: ', i_am_falsy ?? 'ingnoh');
console.log('|| falsy test: ', i_am_falsy || 'ingnoh');

i_am_falsy = false;
console.log('?? falsy test: ', i_am_falsy ?? 'ingnoh');
console.log('|| falsy test: ', i_am_falsy || 'ingnoh');

i_am_falsy = '';
console.log('?? falsy test: ', i_am_falsy ?? 'ingnoh');
console.log('|| falsy test: ', i_am_falsy || 'ingnoh');

/* 실행결과
?? falsy test:  0
|| falsy test:  ingnoh
?? falsy test:  false
|| falsy test:  ingnoh
?? falsy test:  
|| falsy test:  ingnoh
*/

 

주의사항

IE 등을 지원해야 하는 경우 사용을 지양하도록 하자.