[JavaScript] ?. 옵셔널체이닝

1. 옵셔널체이닝이란?

옵셔널체이닝은 존재하지 않을 수 있는 프로퍼티나 메서드를 안전하게 호출 할 수 있도록 해준다.

연산자는 ?. 을 사용하며 앞의 평가대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

2. 사용방법

위 두줄의 설명으로 제대로 이해가 안됐다면 아래 예제를 통해 알아보자.

user라는 이름의 중첩 객체가 있다. 주석처리된 age의 value를 출력하면 당연히 에러가 발생할 것이다.
하지만 옵셔널 체이닝을 통해 출력을 한다면 연산자 ?. 의 앞의 대상인 age가 undefined기 때문에 에러를 뱉지 않고 undefined를 반환한다.

const user = {
   name: 'Son',
  //  age : { value : 33},
};

console.log(user.age.value);    //result : error
console.log(user.age?.value);   //result : undefined

옵셔널 체이닝은 DOM을 조작할 때도 사용할 수 있다.

아래 예제에서 id를 선택했는데 id가 없는 경우라고 가정해보자. 이 경우 옵셔널 체이닝을 사용해서 ex2 처럼 사용한다면 에러가 발생하지 않는다.

//ex1.
document.querySelector('#id').innerHTML;

//ex2.
document.querySelector('#id')?.innerHTML;

3. 장점과 단점

위에서 설명한바와 같이 옵셔널 체이닝은 존재하지 않을 수 있는 프로퍼티나 메서드를 안전하게 호출할 수 있다는 장점이 있다. 그 외에도 몇가지 장점이 있다.

우선 아래 예제와 같이 코드의 길이를 줄일 수 있다. 주석처리한 코드를 아래줄과 같이 사용할 수 있다.

const player = {
  name : "Son",
  info: {
    height: "182cm",
    weight: "78kg",
  }
};

// const age = player && player.info && player.info.age;
const age = player?.info?.age;

또한 값이 존재하지 않아도 에러가 발생하지 않기 때문에 nullish 연산자와 유용하게 사용할 수 있다.

const user = {};
const userAge = user.info?.age ?? "나이 모름";

console.log(userAge);   //result : "나이 모름"

하지만 유용하게 쓰인다고 해서 막 쓰면 안된다. 단점이라기보다 주의할 점이 몇가지 있다.

옵셔널체이닝은 존재하지 않아도 괜찮은 대상에만 사용해야 한다. 아래와 같이 객체 자체를 주석처리하고 출력을 해보면 에러가 발생하는 것을 알 수 있다.

// const player = {
//   name : "Son",
//   info: {
//     height: "182cm",
//     weight: "78kg",
//   }
// };

console.log(player?.info?.height);    //result : error

또한 프로퍼티나 메서드가 null 이나 undefined인 경우에만 동작하고 0 이나 false 등은 그대로 반환되고, 객체를 위해 만들어진 것이므로 배열에서는 사용이 불가능하다.