** 스펙에 추가된 지 얼마 안 된 문법입니다. 구식 브라우저는 폴리필(특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드조각이나 플러그인)이 필요합니다.
📍 옵셔널 체이닝이 필요한 이유
몇 가지 사례를 통해 왜 옵셔널 체이닝이 등장했는지 알아보자.
사용자가 여러 명 있는데 그 중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자.
이럴 때 user.adress.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.
- undefined 값의 프로퍼티를 읽으려 할 때 에러 발생
let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError: Cannot read property 'street' of undefined또 다른 사례는 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제이다.
페이지에 있는 특정 요소에 담긴 정보에 접근하려 하는데, 요소가 존재하지 않는 경우이다.
- null값의 프로퍼티를 읽으려 할 때 에러 발생
// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;물론, && 연산자를 이용하여 해당 객체나 프로퍼티가 있는지 확인할 수 있지만,
AND를 연결해서 사용하면 코드가 반복적으로 중복, 길어진다는 단점이 있다.
예시)
let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.📍 옵셔널 체이닝의 등장
?.은 ?. '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.user?.address로 주소를 읽으면 아래와 같이 user객체가 존재하지 않더라도 에러가 발생하지 않는다.
let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined위 예시를 통해 ?.은 ?. ‘앞’ 문법이 위치해 있는 그 자리에서만 동작되고, 확장은 되지 않는다는 것을 알 수 있다.
user?. 평가가 끝나고 user에 값이 없다는 것이 판별되면 그 즉시 평가를 멈추기 때문에 마지막 두 줄에서 에러가 발생하지 않았다.
user가 존재하는 경우엔 user.address 같은 중간 프로퍼티들이 평가대상이 되기 때문에 반드시 값이 있어야 에러가 발생하지 않는다.
📍 단락 평가
.?는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다.
때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?.의 평가가 멈췄을 때 더는 일어나지 않는다.
let user = null;
let x = 0;
user?.sayHi(x++); // 아무 일도 일어나지 않습니다.
alert(x); // 0, x는 증가하지 않습니다.📍 ?.()와 ?.[]
?.은 연산자가 아니라
함수나 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)이다.
?() 는 존재 여부가 확실치 않은 함수를 호출할 때 사용가능하다.
아래의 예시는 한 객체엔 메서드 admin이 있지만 다른 객체엔 없는 상황이다.
let user1 = {
admin() {
alert("관리자 계정입니다.");
}
}
let user2 = {};
user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();?.()를 사용해 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📝 정리
-
옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽다.
-
?.왼쪽 평가 대상이null이나undefined인지 확인하고null이나undefined가 아니라면 평가를 계속 진행한다. -
?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다. -
?.은?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다. -
?.는 존재하지 않아도 괜찮은 대상에만 사용하자. 꼭 있어야 하는 값인데 없는 경우에?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없기 때문이다.
