옵셔널 체이닝(optional chaining) ?.을 사용하면,
프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다.
옵셔널 체이닝이 필요한 이유
let obj = {};
alert(obj.name);
// TypeError: Cannot read property 'name' of undefined
// obj에 name 프로퍼티가 없기때문에 에러 발생위와 같은 상황에 기존에는 이런 문제들을 해결하기 위해 && 연산자를 사용하곤 했습니다.let obj = {};
alert(obj && obj.name);
// no err(undefined)이렇게 &&(AND)를 연결해서 사용하면 코드가 길어지는 단점이 있습니다.옵셔널 체이닝 사용
let obj = {};
alert(obj?.name);
// no err(undefined)
// -----------------------------------------
let user = null;
alert( user?.addr );
// no err(undefined)
alert( user?.addr.zip );
// no err(undefined)위 예시를 통해 ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있습니다.
위 예시에서 사용된 user?.는 user가 null이나 undefined인 경우만 처리할 수 있습니다.
user가 null이 아니고 실제 값이 존재하는 경우엔 반드시 user.addr 프로퍼티는 있어야 합니다.
그렇지 않으면 user?.addr.zip 두 번째 점 연산자에서 에러가 발생합니다.단락 평가
-
?.는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춥니다.
-
이런 평가 방법을 단락 평가(short-circuit)라고 부릅니다.
그렇기 때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?.의 평가가 멈췄을 때 더는 일어나지 않습니다.
let obj = null;
let cnt = 0;
obj?.plus(cnt++);
// 아무 일도 일어나지 않습니다.
alert(cnt);
// 0?.은 delete와 조합해 사용할 수도 있습니다.
// user가 존재하면 user.name을 삭제합니다.
delete user?.name; Reference
