옵셔널 체이닝(optional chaining)이란?
옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
?. 앞의 평가대상이 만약 undefined 또는 null 일 경우 평가를 멈추고 undefined를 반환한다.
.?은 연산자가 아니라 특별한 문법 구조체이다. 또한 이는 읽기나 삭제에는 사용가능하지만 쓰기에는 사용이 어렵다.
어떤 경우에 사용하는가?
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.
위와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않는다.
let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined
위 예시를 통해 ?.은 ?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있다.
참고로 위 예시에서 사용된 user?.는 user가 null이나 undefined인 경우만 처리할 수 있다.
user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 한다. 그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생함.
사용시 주의할 점
1.존재하지 않아도 괜찮은 대상에만 적용해야한다. 에러를 피하기 위해서 남용하다가 디버깅이 어려워질 수 있다.
2. ?.(optional chaining)앞에 오는 변수는 선언이 되어 있어야한다.
사용방식
- obj?.prop : obj가 존재하면 prop 반환, 없으면 undefined 반환
- obj?.[prop] : obj가 존재하면 prop 반환, 없으면 undefined 반환
- obj?.method() : obj가 존재하면 method()호출, 아니면 undefined 반환
- obj.method?.() : obj의 메서드 method가 존재하면 메소드 실행, 아니면 undefined 반환
참조
https://ko.javascript.info/optional-chaining#ref-2161
옵셔널 체이닝 '?.'
ko.javascript.info
https://www.youtube.com/watch?v=WHUvtiKy_pg
