Nullish Coalescing (?? 연산자) 와 Optional Chaning(?. 연산자)

nullish coalescing은 ES2020에서 추가된 새로운 문법이다.

 

왜 추가되었을까?

 

|| 연산자를 통한 기본값 처리의 문제점

 

우선 Javascript의 falsy 값엔 다음과 같은 것들이 있다.

 

undefined, null, false, 0, "", NaN  ... 등등

 

|| 연산자는 좌항이 falsy 한 모든 경우에 우항을 선택하게 된다.

 

0 || 3
// 3

undefined || "unknown"
// "unknown"

 

그래서 위와 같은 예제의 경우 0 의 결과를 원하더라도 무조건 3을 반환하게 된다.

 

---

 

?? 연산자를 통해 위의 결과를 방지하자 

 

?? 연산자를 사용하면 nullish 즉, undefined와 null 에 대해서만 기본값 처리를 할 수 있다.

즉, 좌항이 undefined와 null 이 아닌 경우에만 우항을 선택하고 그 외의 경우에는 항상 좌항을 선택한다.

 

0 ?? 10 
// 0

undefined ?? "unknown"
//undefined

 

---

 

optional chaining 또한 ES2020 에서 추가된 문법이다.

 

왜 추가되었을까?

 

. 연산자를 통한 속성값 접근의 문제점

 

player = {name: {realname: "sungsik", nickname: "mungsik"}}
player.name.nickname
// mungsik

 

이렇게 하게 될 경우 TypeError가 발생할 확률이 높아진다.

 

player.name.first
// Uncaught TypeError: Cannot read property 'first' of undefined

 

---

 

?. 연산자를 통한 속성값 접근의 장점

 

?. 연산자를 사용하면 에러를 방지하기 위해 경우의 수에 따른 로직을 따로 쓰지 않아도된다.

해당 객체가 nullish 즉, undefined나 null인 경우에 TypeError 대신에 undefined를 리턴한다.

 

player?.name?.first
// undefined

 

?. 연산자는 배열이나 함수에서도 사용 가능하다.

 

array = null;
arr?.[0]
// undefined

 

---

 

Nullish Coalescing (?? 연산자) + Optional Chaning(?. 연산자)

 

let player = {}; // 주소 정보가 없는 사용자 

alert(player?.address?.street); // undefined => 프로그램 전체의 에러가 발생하지 않고 undefined 출력