[JavaScript] 옵셔널 체이닝 (?.)

 

옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

 

# 옵셔널 체이닝이 필요한 이유

예시 1

user가 여러명 있다고 해보자.

그 중 몇 명은 address 정보를 가지고 있지 않다.

이럴때 user.address.street을 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.

let user = {};
alert(user.address.street); // TypeError:Cannot read property 'street' of undefined
// user.address의 값이 undefined이므로

 

예시 2

다른 사례로는, 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다.

자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려하면 문제가 발생한다.

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;
//Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')

 

 

?.이 추가되기 전엔, 이 문제들을 해결하기 위해 && 연산자를 사용하곤 했다.

중첩 객체의 특정 프로퍼티에 접근하기 위해 거쳐야 할 구성요소들을 AND로 연결해, 실제 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했다.

* &&(AND)연산자에 관하여 ↓

2023.10.26 - [JavaScript] - [JavaScript] 논리적 AND 연산자 (&&)

[JavaScript] 논리적 AND 연산자 (&&)

 

예시:

let user = {};
alert(user && user.address && user.address.street);
// 값은 undefined이다.
// 왼쪽부터 평가진행한다. user은 빈 객체이므로 truthy. user.address가 undefined이므로 undefined값 그대로 반환.
// 따라서 alert로 'undefined'이 뜬다. 에러발생x

 

하지만 이렇게 AND를 연결해서 사용하면 코드가 길어진다는 단점이 있다.

 

 

 

# 옵셔널 체이닝의 등장

?.은 ?. '앞'의 평가 대상이 undefined이나 null이면 평가를 멈추고 undefined을 반환한다.

let user = {};
alert(user?.address?.street);
// 값은 undefined.
// user?.address값이 undefined. 여기서 평가 멈추고 undefined 출력.
// 따라서 alert로 'undefined'이 뜬다. 에러발생x

 

user?.address로 주소를 읽으면 아래와 같이 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의 두 번째 점 연산자에서 에러가 발생한다.

 

 

※ 옵셔널 체이닝을 남용하지 말아라.

?.는 존재하지 않아도 괜찮은 대상에만 사용해야한다.

사용자 주소를 다루는 위 예시에서 논리상 user는 반드시 있어야 하는 반면에 address는 필수값이 아니다.

그러므로 user.address?.street을 사용하는 것이 바람직하다.

실수로 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야한다.

그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워진다.

 

※ ?.앞 변수는 꼭 선언되어 있어야 한다.

변수 user가 선언되어있지 않으면 user?.anything 평가시 에러가 발생한다.

user?.address // ReferenceError: user is not defined

 

user?.anything을 사용하려면 let이나 const, var를 사용해 user를 정의해야한다. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작한다.

 

 

 

[ 단락 평가 ]

?. 는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다.

참고로 이런 평가 방법을 단락 평가(short-circuit)라고 부른다.

그렇기 때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?.의 평가가 멈췄을 때 더는 일어나지 않는다.

let user = null;
let x = 0;

user?.sayHi(x++); // 값은 undefined.
//user를 평가한 후, null이므로 평가 중단.
//alert(user?.sayHi(x++))를 한다면, alert으로 undefined 뜬다.

alert(x); // 0

 

# ?.() 와  ?.[]

?.은 연산자가 아니다.

?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체이다.

존재여부가 확실하지 않은 함수를 호출할 때?.()를 어떻게 쓸 수 있는지 알아보자.

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};

user1.admin?.(); // alert로 "관리자 계정입니다."
user2.admin?.(); // undefined : alert해보면 undefined뜬다.

?.()를 사용해 admin의 존재 여부를 확인했다.

user1엔 admin이 정의되어 있기 때문에 메서드가 제대로 호출되었다.

반면 user2엔 admin이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면 에러 없이 그냥 평가가 멈췄다.

 

() 대신 대괄호 []를 사용해 객체 프로퍼티에 접근하는 경우엔 ?.[]를 사용할 수도 있다.

let user1 = {
  firstName: "Violet"
};
let user2 = null;
let key = "firstName";

alert(user1?.[key]) //"Violet"
alert(user2?.[key]) // undefined:?.왼쪽평가대상인 user2가 null이므로 평가 멈추고 undefined 반환

alert(user1?.[key]?.something?.not?.existing); //undefined
// user1?.[key]까지는 값 존재.
// user1?.[key]?.something의 값이 undefined이므로 평가 멈추고 undefined 반환

 

 

!! ?.은 읽기나 삭제하기에는 사용할 수 있지만, 쓰기에는 사용할 수 없다.

?.은 할당 연산자 왼쪽에서 사용할 수 없다.

user?.name = 'Violet'; // Uncaught SyntaxError: Invalid left-hand side in assignment

// let user = { name: 'ria'} 이렇게 user변수가 있고, name프로퍼티가 있다고 하더라도 같은 에러가 뜬다.

 

 

요약

- ?. 왼쪽 평가대상이 null 또는 undefined인지 확인하고, null 또는 undefined이 아니라면 평가를 계속 진행한다.

- ?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 한다.

- 꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없다.

 

 

*참고: https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'