[Javascript] 옵셔널 체이닝 (Optional Chaining)을 사용해보자

Optional chaining 이 필요한 이유?

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

 에러 없이 안전하게 접근한다? 음.. 어떤 부분에 대해서 안전할까에 대해서 한번 천천히 생각해보도록 하자.

 만약, data라는 배열을 받아와서 핸들링한 후 리턴하는 예시가 있다고 해보자. 코드의 결과는 당연히 undefined가 나올 것이다. 왜 undefined가 나올까? 그것은 data가 아직 도착하지 않았는데 map 함수가 실행되었기 때문이다. map 함수 입장에서는 data가 뭔지 모르겠으니까 data를 undefined 취급해줄 수밖에 없는 것이다.

const example = data.map((test) => {
    return test;
}) 

// undefined

 이러한 에러가 발생하지 않도록 &&를 사용하여 data가 있는 경우에만 그다음 차례로 넘어가서 data.map()을 실행하도록 코드를 작성해주면 에러가 발생하지 않게 된다.

const example = data && data.map((test) => {
    return test;
}) 

 개발자들은 반복을 싫어하고, 좀 더 가독성 있는 코드를 추구한다. 매번 &&도 써야 하고, data도 두 번씩이나 쓴다면 좀 번거롭다고 생각할 수 도 있다. 나는 그런 거 같다 ㅎㅎ

그렇다면, 이 문제를 해결하려면 어떻게 해야 할까?

 이때 필요한 것이 바로 옵셔널 체이닝(Optional chaining)이다. 옵셔널 체이닝?. 을 사용하게 되면?. '앞’의 평가 대상이 undefined 나 null이면 평가를 멈추고 undefined를 반환하게 된다.

"아니 undefined를 반환하는데 뭐가 에러를 안 낸다는 거야?"

 라고 생각할 수 있다. 아래의 상황 example의 값이 어떻게 나올까? 어떻게 나오는 게 문제가 아니라 이미 null 값이라서 map 함수 앞에서 부터 에러가 발생하게 되고, 코드의 흐름이 끊어진다.

const data = null;

const example = data.map(test => {
  return test;
});

console.log('example :', example);

 그렇다면 여기서 옵셔널 체이닝을 사용하면 어떤 결과가 나올까?

const data = null;
//Optional chaining 반영
const example = data?.map(test => {
  return test;
});

console.log('example :', example);

 이번에 example 값은 나올까? 나온다. undefined 값을 찍어준다. data가 null 값을 가지고 있어도 에러를 발생하지 않고 리턴 값을 준다는 것이다. 에러가 나지 않고 뭐라도 뱉어 내준다는 것이 얼마나 고마운 일인가 ㅎㅎ 이러한 처리를 통해서, 비동기 처리와 비슷한 효과를 낼 수 있다고 본다.

 무분별하게 사용해서 내가 컨트롤할 수 없는 정도는 문제가 될 수 있지만, 내가 컨트롤할 수 있는 정도선에서 적당하게 사용한다면 코드를 깔끔하면서도 에러 발생을 줄이면서 코드를 작성할 수 있게 될 것이다.