[자바스크립트] ?. 연산자, 옵셔널 체이닝

옵셔널 체이닝이 뭔가요?? 

코드를 작성할 때, 데이터에서 특정 값들이 누락될 수도 있다.

당신에게는 아래의 data가 있다.

const data = [
  {
    name:"Thomas",
    like:{
      food:"banana",
      drink:"milk",
    },
  },
  {
    name:"James",
    like:{
      food:"pasta",
      drink:"coke",
    },
  },
  {
    name:"Kim",
    want:{
      food:"ramyeon",
      drink:"water",
    },
  }
];

 

data 기반으로 사용자 별 좋아하는 음식을 출력하려면,

for(let i=0; i<data.length; i++){
  console.log(data[i].like.food);
};

이렇게 작성하면 완벽해보인다.

 

출력 결과

사실 data의 3번째 객체에서는 like이라는 프로퍼티가 존재하지 않는다.
그래서 undefined(like가 없음)의 food 프로퍼티을 읽을 수 없다는 에러를 발생시킨다.

---

주로 이용하는 처리 방법

리액트를 이용할 때 종종 접한 방법으로, 논리 연산자를 이용할 수 있다.

for(let i=0; i<data.length; i++){
  console.log(data[i].like && data[i].like.food);
};

 

 

(false && AAA) 는 false에 의해 판단이 끝난다.(= 이미 false이므로, AAA까지 판단할 필요가 없다.)

AAA까지 평가하지 않기 때문에, data[i].like.food를 실행할 일이 없다.

 

그래서 리액트에서도

 1. {user.like && user.like.food && <div>{user.like.food}</div>

 2. {user && user.like && user.like.food && <div>{user.like.food}</div>}

논리 연산자 &&을 이용해서 에러 발생을 막는 방법이 자주 사용된다.

 

---

그래서 옵셔널 체이닝이 뭔데?

위처럼, 데이터가 존재하는지 보장할 수 없을 때 사용할 수 있다.

?.의 모습인 옵셔널 체이닝은 객체에 속성(키)가 존재하지 않아도 에러를 발생시키지 않돌고 도ㅗ아준다.

 

?.는 data[i].like.food에서 . 대신 이용하면 된다.
?. 앞의 평가 대상이 존재하지 않는다면? undefined를 반환하고 ?.뒷부분을 탐색하지 않는다.

 

예를 들어, data[i].like?.food 에서는
data[i].like이 존재하면 data[i].like.food를 반환한다.

존재하지 않으면 undefined(=data[i].like)을 반환한다.

 

?.의 왼쪽 데이터가 존재하지 않으면 undefined를 반환한다.

 

여기서, 유의할 점은 data[i]는 반드시 존재해야 하는 필수값이다.

data[i]가 존재하지 않으면 에러가 발생한다.

 

data[i]가 undefined이기 때문에 undefined.like 로 참조가 되어 타입 에러를 발생시킨다.

 

 

그렇다면 data[i]?.like?.food로 적을 수 있겠다.

 

data[i]가 존재하면 data[i].like?.food를 반환하고
존재하지 않으면 undefined를 반환한다.

       data[i].like이 존재하면 data[i].like.food를 반환하고
       존재하지 않으면 undefined를 반환한다.

 

결국 data[i] && data[i].like && data[i].like.food 와 같은 논리 흐름이다.

data[i] && data[i].like && data[i].like.food
data[i]?.like?.food

로 줄여지니 손가락노동에서 무척 이득이다.

---

정리

옵셔널 체이닝 ?. 은 왼쪽 평가 대상이 null 혹은 undefined일 때 즉시 평가를 종료하고 undefined를 반환한다.

왼쪽 평가 대상 자체를 평가하기 때문에, undefined[like]와 같이 타입 에러나 참조 에러가 발생하지 않도록 주의해야 한다.

 

만약 왼쪽 평가 대상이 null 혹은 undefined가 아니라면 계속 평가를 진행한다.

 

?.을 적용하는 왼쪽 평가 대상은 optional인 경우가 많다.(=있어도, 없어도 되는 데이터라는 것이다.)

배송 데이터라면, address는 필수적이지만, deliveryMessage는 없어도 되는 것과 비슷하다.

 

그래서 이렇게 optional 데이터인 상황에서 user?.address 으로 코딩해두면,

유저가 주소가 없어도 에러를 발생시키지 않게 된다.

그러므로 속성들의 필수여부를 먼저 인지하고, 필수적이지 않은 속성들의 평가에 사용하는 편이 더 좋겠다.

 

사실 객체의 nested가 깊어질수록, 판단이 힘들어지고 더더욱 특정 속성에 대한 누락이 발생하기 쉬워진다.

여러분들의 사이트가 "객체 누락"으로 문제가 생길바에는, 옵셔널체이닝을 통해 에러를 최대한 예방해주는 편이 좋다고 생각한다.