옵셔널 체이닝(Optional Chaining) - ?.

옵셔널 체이닝(Optional Chaining)은 ES2020에서 등장한 새로운 연산자로서 '?.' 형태로 쓰인다.

접근하는 데이터가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 

있는 연산자이다. 참조된 값이 null 혹은 undefined 여도 에러로 뱉지 않고 undefined 값을 리턴한다.

함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다.

 

옵셔널 체이닝이 필요한 이유)

아래와 같이 user 객체의 info.name에 접근했지만 읽을 수 없는 TypeError가 나타났다.

당연히 존재하지 않는 값에 접근 했기 때문에 에러가 발생한다.

const user = {};
console.log(user.info.name);
* TypeError: Cannot read property 'name' of undefined

위 방식의 접근방법을 옵셔널 체이닝을 사용하여 접근해보면

const user = {};
console.log(user.info?.name);
//결과
undefined

 

문법 예시)

아래 예시는 user 객체의 name에 접근했다. 하지만 user 객체의 name은 존재하지 않기 때문에 undefined를 리턴한다.

const user = {}
console.log(user?.name);

//결과
undefined

아래와 같이 null 에 접근했을 때도 undefined를 리턴한다.

const user = null;
console.log(user?.name);

//결과
undefined