[JavaScript]널 병합 연산자(??)

JavaScript에서 사용되는 널 병합 연산자(Nullish coalescing operator) ?? 연산자에 대해 설명합니다.

※ IE와 Opera에서는 호환되지 않습니다.

---

?? 연산자

왼쪽 피연산자가 null 또는 undefined일 경우 오른쪽 피연산자를 반환하고 그렇지 않을 경우 왼쪽 피연산자를 반환합니다.

아래 코드에서 왼쪽 피연산자가 null 이므로 오른쪽 피연산자인 'Hello'를 반환합니다.

var A = null ?? 'Hello';

---

|| 연산자와 다른 점

?? 연산자는 오직 null과 undefined를 체크합니다.

|| 연산자는 참(true)인 값을 체크합니다.

 

?? 연산자에서 왼쪽 피연산자가 0 또는 false일 경우 왼쪽 피연산자를 반환합니다.

|| 연산자에서 왼쪽 피연산자가 0 또는 false일 경우 오른쪽 피연산자를 반환합니다.

console.log('*****?? operator*****');
console.log(null ?? '?? Test 1');
// ?? Test 1

console.log(undefined ?? '?? Test 2');
// ?? Test 2

console.log(0 ?? '?? Test 3');
// 0

console.log(false ?? '?? Test 4');
// false
  
console.log('*****|| operator*****');
console.log(null || '|| Test 1');
// || Test 1

console.log(undefined || '|| Test 2');
// || Test 2

console.log(0 || '|| Test 3');
// || Test 3

console.log(false || '|| Test 4');
// || Test 4

---

|| 연산자 또는 && 연산자와 같이 사용할 경우

?? 연산자는 || 연산자와 && 연산자보다 우선순위가 낮습니다.

즉, 아래 코드처럼 ?? 연산자가 먼저 올 경우 SyntaxError가 발생합니다.

var a = null ?? true && "True";
var b = null ?? true || "True";

 

괄호를 사용하여 ?? 연산자를 먼저 처리해야함을 명시합니다.

var a = (null ?? true) && "True";
var b = (null ?? true) || "True";

---

?? 연산자가 사용되는 경우

객체의 정의되지 않은 속성(property)에 접근할 경우 사용합니다.

저는 React에서 null 또는 undefined일 경우 문자열일 경우 빈 값('') 또는 숫자형일 경우 0으로 설정하는 용도로 사용하여 에러와 경고를 방지합니다.

var testObj = {
  Name : 'JaeSeong'
}
  
console.log(testObj.Address ?? '');

---

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Nullish coalescing operator - JavaScript | MDN