[JS 톺아보기] 옵셔널 체이닝 '?'

옵셔널 체이닝

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

💡 왜 필요할까?

예를 들어 사용자 데이터가 여러개 존재하고, 그 중 몇 명은 주소 정보가 있고, 몇 명은 주소 정보가 없다고 가정해보자. 이럴 때 user.address.street 를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.

let user = {}; // 주소 정보가 없는 사용자
 
alert(user.address.street); // 에러 발생

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

let user = {}; // 주소 정보가 없는 사용자
 
alert( user && user.address && user.address.street ); // undefined 에러 X

중첩 객체의 특정 속성에 접근하기 위해 거쳐야 할 구성 요소를 && 로 연결해 확인하는 방법을 사용했지만 코드가 매우 길어질 수 밖에 없다.

옵셔널 체이닝 사용 방법

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

예시

let user = {};
 
alert(user?.address?.street) // undefined 에러 X

기존의 && 연산자와 동일하게 동작하지만 코드를 훨씬 간결하게 작성할 수 있다.

🚨 주의점

?.이 만능은 아니다. 변수 user가 선언되어 있지 않으면 user?.address 등과 같이 사용할 경우 에러가 발생한다.

// ReferenceError
user?.address; // user라는 변수 할당하지 않은 상태

또 다른 주의사항으로는 옵셔널 체이닝을 남용하지 말아야한다.

?. 는 존재하지 않아도 괜찮은 대상에만 사용해야 한다. 즉, 필수값이 아닌 속성에 접근할 때만 사용해야 한다. 예를 들어 user.address.street라는 속성에 접근할 때 user는 무조건 존재해야하는 속성이다. 그러니 모든 속성에 ?.를 붙이는 것이 아닌, 필수값이 아닌 address 혹은 street에만 사용해야한다.

이유는 디버깅이 어려워질 수 있기 때문이다. 만약에 실수로 user에 값을 할당하지 않았다면 바로 알아낼 수 있어야 하는데 옵셔널 체이닝을 사용했다면 예외를 조기에 발견하지 못하고 디버깅이 어려워질 수 있다.

user.address?.street // user는 필수값이기 때문에 ?.를 사용하지 않는게 바람직함

옵셔널 체이닝은 쓰기에는 사용할 수 없다.

속성이 없는 경우 ?.를 붙이고 값을 조회하려하면(읽기) 에러가 발생하지 않고 안전하게 접근할 수 있다. 하지만 값을 할당하려하면(쓰기) 에러가 발생한다.

다음 예시 코드는 user가 존재할 경우 user.name에 값을 쓰려는 의도로 작성된 코드이다.

let user = {};
user?.name = "Violet"; // SyntaxError

위 코드는 SyntaxError를 발생시킨다. 에러가 발생하는 이유는 undefined = "Violet"의 동작을 수행하려하기 때문이다.

정리

이전에는 안전한 접근을 위해 &&나 조건문을 사용해야 했다. 하지만 옵셔널 체이닝 ?.을 사용하면 매우 편리하게 대체할 수 있다. 너무 남용하지 않고 안전한 개발을 해봅시다!