[JS] optional chaining

참고

Optional chaining - JavaScript | MDN

 

요약

• 표기: obj.prop1?.prop2?.prop3
• 설명: optional chaining 연산자 (??)는 복잡한 구조를 갖는 객체에서의 안전한 참조를 가능케 한다.

 

상세

• 객체의 property가 누락될 가능성이 있는 경우 일반적으로 다음과 같이 체크한다.

let obj = {};

try {
    console.log('1.', obj.depth1.depth2); // depth1 / depth2가 누락되었으므로 에러가 발생. 
} catch {
    console.log('1. ERROR!!!');
}

try {
    console.log('2.', 
        obj.depth1 && obj.depth1.depth2
        ); // 객체의 속성 누락 여부를 체크하는 일반적인 방법.
} catch {
    console.log('2. ERROR!!!');
}

/* 실행결과
1. ERROR!!!
2. undefined
*/

• 그러나 객체의 구조가 충분히 복잡하다면, && (AND) 연산자를 통해 체크하는 방식은 작성해야하는 코드 양이 길어질 수 있다.
• 이러한 경우, optional chaining 연산자를 다음과 같이 적용해볼 수 있다.

let obj = {};

try {
    console.log('3.', obj.depth1?.depth2); // 누락된 속성의 값은 undefined를 반환.
    
    obj.temp = { depth2: 'monkey' };
    console.log('3.', obj.temp?.depth2); // 누락되지 않은 속성의 값은 해당 값을 반환.
} catch {
    console.log('3. ERROR!!!');
}

/* 실행결과
3. undefined
3. monkey
*/

 

주의사항

Optional chaining - JavaScript | MDN

IE 또 너야?