옵셔널 체이닝이란?
Optional Chaning 연산자는 ES11(ECMAScript2020)에 도입되었다.
?.은 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티를 참조한다.
언제 사용할까?
예를 들어
사용자가 여러 명 있는데, 그중 몇명은 name을 가지고 있고, 몇명은 가지지 않았다. 이런 경우, 유저.name 을 하면 name 프로퍼티를 가지지 않은 유저들의 정보에 접근을 하면 에러가 발생할 수 있다.
아래의 예시를 통해 더 알아보자.
optional chaining이 나오기 이전에는 && 앤드 연산자로
user && userList.user2 && userList.user2.name && userList.user2.name 을 해 모든 구성요소가 있는지 확인할 수 있었다. 하지만 해당 방법은 코드가 아주 길어질 수 있다는 단점이 있어 optional chaining이 ES11(ECMAScript2020)에 나오게 된 것이다.
Nullish Coalescing
?? null 병합 연산자는 왼쪽 피연산자가 null 또는 undefined 일 경우, 오른쪽 피연산자를 반환하고 그렇지 않으면 왼쪽 피연산자를 반환한다.
변수 기본값을 설정할 때 유용하다.
let a = null ?? '안녕'; // '안녕'
let b = undefined ?? '안녕'; // '안녕'
let c = '잘가' ?? '안녕'; // '잘가'MDN 예제
function A() { console.log('A was called'); return undefined;}
function B() { console.log('B was called'); return false;}
function C() { console.log('C was called'); return "foo";}
console.log( A() ?? C() ); // A의 결과 값은 undefined이기 때문에 오른쪽 피연산자인 C()도 호출되고, 'foo'가 반환된다.
console.log( B() ?? C() ); // 왼쪽 피연산자 B()가 호출되고 false를 반환한다. null 또는 undefined가 아니기 때문에 오른쪽 피연산자인 C()가 호출되지 않고 B함수의 false만 반환된다. || OR 연산자는 왼쪽 피연산자가 null, undefined를 포함한 falsy 값이라면 오른쪽 피연산자를 리턴한다.
let a = null || '안녕'; // '안녕'
let b = undefined || '안녕';
let c = '' || '안녕';
let d = 0 || '안녕';
let e = false || '안녕';정리
null 병합 연산자는 왼쪽 피연산자가 undefined 또는 null일 경우, 오른쪽 피연산자를 반환한다.OR 연산자는는 왼쪽 피연산자가 undefined, null 또는 falsy값일 경우, 오른쪽 피연산자를 반환한다.Optional Chaining은 null 또는 undefined일 수 있는 객체의 속성을 접근해야할 때 유용하다. 왼쪽 피연산자가 null 또는 undefined인 경우 undefined를 반환한다.
참고
자바스크립트 Deep Dive
