Optional chaining & Nullish coalescing

 

최신 문법인 Optional chaining과 Nullish coalescing을 알아보자! 

 

사실 잘 사용하진 않는데, 알아두면 유용한 문법인 것 같다.

 

Optional chaining부터 알아보자.

const test = { a: { b: 'Optional chaining' } }

위와 같은 객체가 있다고 하자.

해당 객체가 지금은 값이 있지만, 기본 값이 빈 객체이고, 

서버에서 응답이 내려와 객체의 값을 채우기 전에 아래와 같이 

test.a.b로 접근한다면 에러가 발생할 것이다.

 

test는 빈 객체고, 빈 객체에서 a를 호출하는 건 undefined가 나오겠지만,

undefined에서 없는 b를 호출해버리니 'Cannot read property 'c' of undefined' 에러가 발생하는 것이다.

 

하지만, Optional chaining을 통해 접근한다면 에러가 발생하지 않는다. 

Optional chaining은 이와 같이 예외처리를 해주는 문법이라고 보면 된다. :) 

 

console.log(test.a.b)

// error

console.log(test.a?.b)

// undefined

 

참고로, test는 무조건 선언이 되어 있어야 하고, 선언이 되어 있지 않다면 에러가 발생하니 참고하자.

 

다음은, Nullish coalescing이다.

 

const foo = null ?? 'default string';
console.log(foo);
// expected output: "default string"

const baz = 0 ?? 42;
console.log(baz);
// expected output: 0

?? 연산자로 사용할 수 있고, 왼쪽 값이 null 혹은 undefined 이면 우측 값을 반환하고, 

그게 아니라면 왼쪽 값을 반환한다.

 

언제 사용될까? 

 

만약 or 연산자 || 라면, 

 

왼쪽 값이 null, undefined가 아니라 0, '' 등의 falsy인 값이면 우측 값을 반환하게 된다.

0, "" 등의 falsy 값을 생각하지 않고 or 연산자를 사용할 경우 예기치 못한 상황이 생길 수 있고,

그걸 방지하기 위해서 Nullish coalescing 문법을 사용할 수 있다.