옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
옵셔널 체이닝이 필요한 이유
옵셔널 체이닝은 왜 등장했을까? 몇 가지 사례를 통해 알아보자!
사용자가 여러 명 있는데, 그 중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자. 이런 경우 주소 정보에 접근하면 에러가 발생할 수 있다.
let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError: Cannot read property 'street' of undefined또 다른 사례로, 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 정보를 가져오려 하면 문제가 발생한다.
// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;옵셔널 체이닝이 명세서에 추가되기 전에는 이런 문제들을 해결하기 위해 && 연산자를 사용했다.
let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 AND 연산자로 연결해 해당 객체나 프로퍼티가 실제로 있는지 확인하는 것이다. 그런데 이렇게 AND 를 사용하면 코드가 아주 길어진다는 단점이 있다.
옵셔널 체이닝의 등장
?. 은 앞의 평가 대상이 undefined 나 null 이면 평가를 멈추고 undefined 를 반환한다. (null 이나 undefined 가 아닌 경우에는 값이 있다 or 존재한다 라고 하자.)
옵셔널 체이닝을 사용해 프로퍼티에 안전하게 접근해 보자!
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않는다. 옵셔널 체이닝을 사용하면 객체가 존재하지 않더라도 에러가 발생하지 않는다.
let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined?. 는 ?. 앞 평가 대상에만 동작되고, 확장은 되지 않는다.
위 예시에서 사용된 user?. 는 user 가 null 이나 undefined 인 경우에만 처리할 수 있다.
user 가 실제 값으로 존재하는 경우 user.address 프로퍼티는 값이 있어야 한다. 그렇지 않으면 두 번째 점 연산자에서 에러가 발생한다.
옵셔널 체이닝을 남용하지 말자!
옵셔널 체이닝은 존재하지 않아도 괜찮은 대상에만 사용해야 한다.
위 예시에서 논리 상 user 는 반드시 있어야 하지만, address 는 필수 값이 아니다. 따라서 user.address?.street 를 사용하는 것이 바람직하다.
user 값이 없는 경우는 바로 알아낼 수 있도록 해야 에러를 조기에 발견할 수 있다.
?. 앞의 변수는 반드시 선언되어 있어야 한다.
변수 user 가 선언되어 있지 않으면 평가 시 에러가 발생한다.
user?.anything 을 사용하려면 ler, var, const 를 사용해 user 를 정의해야 한다. 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다.
단락 평가
?. 는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다. 이런 평가 방법을 단락 평가라고 부른다.
따라서 함수 호출을 비롯해 ?. 오른쪽에 있는 부가 동작은 ?. 의 평가가 멈췄을 때 더는 일어나지 않는다.
let user = null;
let x = 0;
user?.sayHi(x++); // ?. 에서 평가 종료
alert(x); // 0 출력 ?.()와 ?.[]
?. 는 연산자가 아니다. 대괄호와 함께 동작하는 특별한 문법 구조체에 해당한다.
존재 여부가 확실치 않은 함수를 호출할 때 ?.() 를 어떻게 쓸 수 있는지 알아보자! 한 객체에는 메서드 admin() 이 있지만 다른 객체에는 없는 상황이다.
let user1 = {
admin() {
alert("관리자 계정입니다.");
}
}
let user2 = {};
user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();user1 에는 admin 이 정의되어 있기 때문에 메서드가 제대로 호출되었다.
user2 에는 admin 이 정의되어 있지 않았지만 에러 없이 평가가 멈췄다.
대괄호를 사용해 객체 프로퍼티에 접근하는 경우 ?.[] 를 사용할 수도 있다. 객체 존재 여부가 확실하지 않은 경우에도 안전하게 프로퍼티를 읽을 수 있다.
let user1 = {
firstName: "Violet"
};
let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.
let key = "firstName";
alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined
alert( user1?.[key]?.something?.not?.existing); // undefined삭제하는 데 사용할 수도 있다.
delete user?.name; // user가 존재하면 user.name을 삭제합니다.그러나 쓰기에는 사용할 수 없다.
user?.name = "Violet";
// SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문요약
obj?.prop–obj가 존재하면obj.prop을 반환하고, 그렇지 않으면undefined를 반환함obj?.[prop]–obj가 존재하면obj[prop]을 반환하고, 그렇지 않으면undefined를 반환함obj?.method()–obj가 존재하면obj.method()를 호출하고, 그렇지 않으면undefined를 반환함
