옵셔널 체이닝
최근에 추가된 문법으로 구식 브라우저는 폴리필이 필요하다.
옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
옵셔널 체이닝이 필요한 이유
옵셔널 체이닝이 등장한 배경을 알아보자!
사용자가 여러 명이 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정해보자
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로 연결해 실제 해당 객체나
프로퍼티가 있는지 확인하는 방법을 사용했다. - 코드가 아주 길어진다는 단점이 있다.
옵셔널 체이닝의 등장
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.- ?. 은 ?. '앞'의 평가 대상이 undefined나 null 이면 평가를 멈추고 undefined를 반환한다.
let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefined- user?.address 로 주소를 읽으면 위와 같이 user 객체가 존재하지 않더라도 에러가 발생하지 않는다.
위 예시를 통해 ?. 은 ?. '앞' 평가 대상에만 동작되고, 확장은 되지 않는다는 사실을 알 수 있다.
user가 null이나 undefined가 아니고 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야한다.
그렇지 않으면 user?.address.street의 두 번째 점 연산자에서 에러가 발생한다.
옵셔널 체이닝을 남용하지 않기
?.는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.
사용자 주소를 다루는 위 예시에서는 논리상 user는 반드시 있어야 하는데 address는 필수 값이 아니다.
그러니 user.address?.strret를 사용하는 것이 바람직하다.
?. 앞의 변수는 꼭 선언되어 있어야 한다
변수 user가 선언되어있지 않으면 user?.anyting 평가 시 에러가 발생한다.
// ReferenceError: user is not defined
user?.address;- 선언이 완료된 변수를 대상으로만 동작한다.
단락 평가
?.는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다. 이런 평가 방법을 단락 평가(short-circuit)라고 부른다.
그렇기 때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?.의 평가가 멈췄을 때 더는 일어나지 않는다.
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- . 대신 대괄호 [] 를 사용해 객체 프로퍼티에 접근하는 경우엔 ?.[]를 사용할 수도 있다.
delete user?.name; // user가 존재하면 user.name을 삭제합니다.- ?.은 delete와 조합해 사용할 수도 있다.
?.는 쓰기에는 사용할 수 없다
// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.
user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.
⭐ 요약
옵셔널 체이닝 문법 ?. 은 세 가지 형태로 사용할 수 있다.
1. obj?.prop : obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환
2. obj?.[prop] : obj가 존재하면 obj[prop]를 반환하고, 그렇지 않으면 undefined 반환
3. obj?.method() : obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환
옵셔널 체이닝 문법은 직관적이고 사용하기도 쉽다.
?. 왼쪽 평가 대상이 null 이나 undefined인지 확인하고 아니라면 평가를 계속 진행한다.
?. 를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다.
?. 은 ?. 왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.
꼭 있어야 하는 값인데 없는 경우에 ?.를 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 주의!