JavaScript 새로운 Null 처리 방법 - Optional chaining(?.) & Nullish coalescing operator(??)

자바스크립트에서 null 처리를 간결하게 하는 유용한 연산자가 추가될 예정이다.

아래 두 연산자는 포스팅 시점(2019.12)을 기준으로 TC39 proposal stage 3 단계이다.

• Optional chaining (?.)
• Nullish coalescing operator (??)

 

Optional chaining (?.)

?. 연산자는 chaining operator( . )와 마찬가지로 객체 내부에 위치한 속성 참조 및 함수에 접근할 수 있다.

차이점이라면, ?. 연산자는 nullish(null or undefined)를 참조해도 에러 대신 undefined를 반환한다는 것이다.

const user = {  
  name: 'Alice',  
  home: {  
    addr: 'Seoul',  
    contact: '02-0000-0000'  
  },  
  work: {  
    addr: ''  
    // no contact  
  }  
};  

// chaining operator(.)  
const work_contact = user.work.contact; // Error: Cannot read property 'contact' of undefined  

 

chaining operator( . )는 참조에 대한 값이 존재하지 않을 경우 아래와 같은 에러가 발생한다.

Error: Cannot read property 'contact' of undefined

에러 방지를 위해서는 해당 속성이 존재하는 지 체크하는 과정이 필요했었다. 아래와 같은 체크 방법이 있다. 하지만 속성이 위치한 depth만큼 구문이 길어지게 되며 가독성이 떨어진다.

// && 연산자로 체크  
const work_contact = user && user.work && user.work.contact; // undefined  

// if문으로 체크  
let work_contact;  
if (user && user.work && user.work.contact)  
 work_contact = user.work.contact;

// 삼항연산자로 체크  
const work_contact = user ? (user.work ? (user.work.contact ? user.work.contact : undefined) : undefined) : undefined  

 

하지만 Optional chaining (?.) 연산자가 추가되면서 간략하게 null 처리가 가능해졌다.

존재하지 않는 값의 처리를 어떻게 할 지고민할 필요가 없어진 것이다.

// chaining operator(.)  
//const work_contact = user.work.contact; // Error  

// Optional chaining (?.)  
const work_contact = user.work?.contact; // undefined  

 

Nullish coalescing operator (??)

?? 는 논리연산자로, 좌측 피연산자가 nullish (null or undefined) 일 때 우측 피연산자를 반환합니다. (그 , 좌측 피연산자 반환)

|| 연산자 같은 경우, 좌측 피연산자가 falsy (null, undefined, '', 0)일 경우 우측 피연산자를 반환합니다. (그 외, 좌측 피연산자 반환)

// || 연산자  
const work_addr = user.work?.addr || 'no addr' // 'no addr'  
const work_contact  = user.work?.contact || 'no contact'; // no contact  

// ?? 연산자  
const work_addr = user.work?.addr ?? 'no addr'; // ''  
const work_contact  = user.work?.contact ?? 'no contact'; // no contact  

상황에 따라서 ''와 0값이 의미가 있어서 구분하여 처리하고 싶으실 때는 ?? 연산자를 사용하시면 됩니다.

 

마무리

---

크롬, 바벨 플러그인에서는 해당 기능을 이미 지원하고 있다.

정확한 스펙과 다양한 예제를 확인하고 싶다면 아래 문서를 참고하길 바란다.

V8 :

https://v8.dev/features/optional-chaining

https://v8.dev/features/nullish-coalescing

 

MDN :

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

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

 

GitHub :

https://github.com/tc39/proposal-optional-chaining

https://github.com/tc39/proposal-nullish-coalescing