옵셔널 체이닝 '?.' (22.11.05 TIL)

이번 12주차는 리액트를 배우는 주차! 그 중 아샬님이 최신 문법이라고 하시며 알려주신 옵셔널 체이닝. 

const id = (latestTask?.id || 0) + 1;

한 번에 봐서는 무슨 문법인 지 알 수 없다. 일단 먼저 공식문서를 살펴보자.

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

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

사용자가 여러 명 있을 경우, 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정할 때 user.address.street 으로 주소 정보에 접근하면 에러가 발생할 수 있다.

let user = {}; // 주소 정보가 없는 사용자

alert(user.address.street); // undefined

또 다른 사례로는 브라우저에서 동작하는 코드를 개발할 때, 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생한다.

// querySelector(...) 호출 결과가 null인 경우 에러 발생
let html = document.querySelector('.my-element').innerHTML;

이런 문제가 발생했을 때 이전에는 && 연산자로 해결했었다. 중첩 객체의 프로퍼티에 접근하기 위해 && 로 연결해서 실제 객체가 있는 지 없는 지 확인하는 것이다. 이렇게 연결하는 방식은 조건이 추가될 수록 코드가 길어진다는 단점이 있다.

let user = {}; // 주소 정보가 없는 사용자

alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않음.

옵셔널 체이닝의 등장

'?.' 은 이 앞의 평가 대상이 undefined 이거나 null 이면 평가를 멈추고 undefined 을 반환한다. 위의 주소 정보 관련 코드를 다시 사용해보자.

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않음

---------------------------------------------------------------------

let user = null;  // user 객체가 존재하지 않아도 에러가 발생하지 않음

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

?. 은 바로 앞 평가 대상에만 동작되고, 확장은 되지 않는다. 참고로 위 예시에서 사용된 user?. 는 user 가 null 이거나 undefined 인 경우만 처리할 수 있다. 만약 user 가 실제 값이 존재할 경우에는 반드시 user.address 로 변경해야 한다. 그렇지 않으면 user.address.street 의 두 번째 점의 연산자에서 에러가 발생한다. 이 경우를 통해 옵셔널 체이닝은 존재하지 않아도 괜찮은 대상에만 사용해야 한다는 걸 알 수 있다. 위 예시에서 논리상 user 는 반드시 있어야 하지만 address 는 필수값이 아니다. 그러므로 user.address?.street 을 사용하는 것이 바람직하다.

단락 평가 (short-circuit)

?. 은 왼쪽 평가대상이 없으면 즉시 평가를 멈춘다. 그렇기 때문에 함수 호출을 비롯한 ?. 오른쪽에 있는 부가 동작은 ?. 의 평가가 멈췄을 때는 더 이상 일어나지 않는다.

let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않음.

alert(x); // 0, x는 증가하지 않음.

객체 존재 여부가 확실치 않은 경우

?.[] 를 사용하면 객체 존재 여부가 확실치 않은 경우에도 안전하게 프로퍼티를 읽을 수 있다.

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?.name = "Violet"; // SyntaxError: Invalid left-hand side in assignment

요약

1. obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

 

 

참고 :

옵셔널 체이닝 '?.'