JavaScript [옵셔널 체이닝 '?.']

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

 

 

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

사용자가 여러명 있는데 그중 몇 명은 주소 정보가 없다고 가정하겠습니다. 이럴 때 user.address.street 를 사용해 주소 정보에 접근하면 에러가 발생할 수 있습니다.

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로 연결해 객체나 프로퍼티가 있는지 확인했습니다. 그러나 이렇게 하면 코드가 길어진다는 단점이 있습니다.

 

 

옵셔널 체이닝의 등장

?. 은 ?. 앞의 평가 대상이 undefined 나 null 이면 평가를 멈추고 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가 null 이나 undefined 인 경우에만 처리할 수 있습니다. 실제 값이 존재하면 반드시 user.address 로 표현해야 합니다. 그렇지 않으면 에러가 발생합니다.

 

⚠ 옵셔널 체이닝을 남용하지 않도록 합니다.

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

사용자 주소를 다루는 위의 예시처럼 논리상 user는 반드시 있어야 하는데 address 는 필수값이 아닙니다. 그러니 user.address?.street 를 사용하는 것이 바람직합니다.

 

 

단락 평가

?. 는 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춥니다. 참고로 이런 평가 방법을 단락 평가라고 합니다.

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

let user = null;
let x = 0;

user?.sayHi(x++); // user가 null이기에 아무 일도 일어나지 않습니다.

alert(x); // 0, x는 증가하지 않습니다.

 

 

?.() 와 ?.[]

?. 은 연산자가 아닙니다. ?. 은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체입니다.

함수 관련 예시와 함께 존재 여부가 확실치 않은 함수를 호출할 때 ?.()를 어떻게 쓸 수 있는지 알아봅시다.

다음 예시는 메서드 admin이 있는 객체와 없는 객체가 같이 있는 상황입니다.

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

let user2 = {};

user1.admin?.(); // 관리자 계정입니다.
user2.admin?.();

 

두 상황 모두에서 user 객체는 존재하기 때문에 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 와 조합해 사용할 수 있습니다.

delete user?.name; // user가 존재하면 user.name을 삭제합니다.

 

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

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

// user가 존재할 경우 user.name에 값을 쓰려는 의도로 아래와 같이 코드를 작성해 보았습니다.

user?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment
// 에러가 발생하는 이유는 undefined = "Violet"이 되기 때문입니다.​

 

 

* 요약 *

옵셔널 체이닝 문법 ?. 다음과 같이 사용할 수 있습니다.

• '앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환합니다.
• ?.() 이면 메서드에 접근할 수 있습니다.
• ?.[] 를 이용하면 직접적으로가 아닌 변수를 이용해서 프로퍼티에 접근할 수 있게 됩니다.