[JS] ?. 옵셔널 체이닝(Optional chaining)

옵셔널 체이닝

?.(옵셔널 체이닝)과 .(체이닝 연산자)의 차이점

일단 '체이닝'의 정의에 대해서 이해해야 할 것 같다.

.(체이닝 연산자) : 객체의 속성이나 메서드를 참조할 때 사용되는 연산자. Array.sort() 같은 용도

 

그렇다면 옵셔널 체이닝이 무엇인가 하면

?.(옵셔널 체이닝) : 참조가 유효한지 명시적으로 검증하지 않고, 객체 체인 내의 깊숙이 위치한 속성값을 불러올 수 있다.

검증하지 않는다는 의미는, 옵셔널 체이닝으로 참조한 nullish(정의되지 않은 메서드 등을 참조한 undefined, null)는 오류를 발생시키지 않고 undefined를 반환한다. 따라서 옵시널 체이닝은 참조가 누락될 가능성이 있을 경우, 어떤 속성에 대한 필요성이 보증되지 않은 경우에 사용한다.

 

일반적인 JS 코드 실행 단계에서 체이닝 연산자를 이용해 정의되지 않은 메서드나 변수를 참조할 경우 JS가 오류를 표출하면서 멈춘다. 옵셔널 체이닝은 이와 같은 현상을 방지하는 수단인 것이다.

 

오류가 발생하지 않음으로, 옵셔널 체이닝을 사용할 때는 자료의 값에 대한 검증에 주의가 필요하다. ??(nullish 연산자), !(부정 연산자. undefined 자동 형변환)등과 같은 방법으로 값을 검증해야 하는 경우가 있다.

 

옵셔널 체이닝 사용 예시

- 옵셔널 체이닝과 체이닝 연산자의 차이

console.log(user.contact?.phone); // ✅ undefined, 에러 없음
console.log(user.contact.phone); // ❌ TypeError: Cannot read property 'phone' of undefined

옵셔널 체이닝에서는 오류가 발생하지 않지만 체이닝에서는 오류가 발생하게 된다. 이와 같이 객체의 참조에서 에러 발생 시 코드 흐름을 지속할 수 있도록 하는 것이 사용 목적이다.

 

- 함수 호출 예시

const user2 = {
  getName: () => "Yoon"
};

const user3 = {};

console.log(user2.getName?.()); // "Yoon"
console.log(user3.getName?.()); // undefined (에러 발생하지 않음)

객체 참조에서 정의하지 않은 내용을 참조하더라도 에러가 발생하지 않는다.

 

- 검증 예시

const city = user.profile?.address?.city ?? "알 수 없음";
console.log(city); // "Seoul" 또는 "알 수 없음"

 

 

 

자료출처 : MDN(Optional chaining)