[javascript] Optional chaining

Optional chaining

Optional chaining 연산자 ?. 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다.

?. 뒷쪽의 값이 존재하지 않는다면 undefined를 반환하고 즉시 종료된다.

<template v-for="(menu, index) in Lnb?.children" :key="index">
// source  
</template>

주의사항

=> Optional chaining은 ?가 아니라 ?.가 연산자이므로 []를 이용하여 접근할 때도 ?.[]와 같이 사용해야한다.

기존에 vue2를 사용할때는 <template>내부에서 Optional chaining을 인식하지 못하였기 때문에
Object의 Property에 접근할 때마다 삼항연산자로 Lnb?Lnb.children:[]와 같이 존재여부를 검사해주는 식으로 작업하였는데

vue3에서는 Optional chaining을 지원하므로 굉장히 편해졌다.

개인적으로는 vue2에서 vue3로 넘어오면서 가장 편해진 부분중 하나라고 생각한다.