?. 연산자(Optional Chaining)

  객체의 속성이나 메소드에 접근할 때 해당 항목이 없다면 오류가 발생된다. 이러한 상황에서 오류발생 대신 undefined를 리턴하는 것이 ?. 연산자이다. 단, Internet Explorer 브라우저는 이를 지원하지 않는다.

 

1. 속성/배열

let obj = {};

obj.prop1               //undefined
obj.prop1.prop2         //Uncaught TypeError: Cannot read property 'prop2' of undefined
obj.prop1?.prop2        //undefined
obj.prop1?.prop2?.prop3 //undefined

let arr = [];
arr[10]         //undefined
arr[10][1]      //Uncaught TypeError: Cannot read property '1' of undefined
arr[10]?.[1]    //undefined

  객체에서 존재하지 않는 속성에 접근하면 undefined 값이 반환된다. undefined 값이 반환된 속성의 안에 있는 존재하지 않는 속성에 접근하면 위와 같이 TypeError가 발생한다. undefined에는 속성이 없기 때문이다. 이러한 오류 상황에서 ?. 연산자를 사용하면 에러를 발생시키는 대신 위와 같이 undefined가 리턴된다. 배열의 경우에도 마찬가지이다. 즉, 어떤 요소가 존재하지 않을 때(값이 undefined) 이 값의 내부 요소를 오류 없이 탐색하고 싶으면 ?.를 사용하는 것이다.

 

2. 메소드

let obj = {};

obj.isihl();       // Uncaught TypeError: obj?.isihl is not a function
obj.isihl?.();     //undefined
window.isihl?.();  //undefined

  존재하지 않는 메소드를 호출하면 위와 같이 TypeError가 발생한다. 이러한 오류 상황에서 위와 같이 ?.연산자를 사용하여 메소드를 호출하면 에러를 발생시키는 대신 undefined가 리턴된다.