Optional Chaining(옵셔널 체이닝)이란?

const name = person && person.name;​

 

JavaScript에서 optional chaining은 프로퍼티나 메소드를 참조할 때 발생할 수 있는 에러를 방지하기 위한 문법입니다. 이전에는 다음과 같은 방식으로 프로퍼티를 참조했습니다.

const name = person && person.name;

위와 같은 코드는 person이 null이나 undefined일 경우, name 변수는 undefined가 되어 프로그램이 중단될 수 있습니다. 이 문제를 해결하기 위해 optional chaining 연산자(?.)가 등장하였습니다.

 

optional chaining을 사용하면 다음과 같은 코드로 에러를 방지할 수 있습니다.

const name = person?.name;

위 코드에서 person이 null이나 undefined인 경우, name 변수는 undefined가 되지만 프로그램이 중단되지 않습니다.

 

optional chaining은 객체뿐만 아니라 배열과 함수 호출에서도 사용할 수 있습니다.

const arr = [1, 2, 3];
const third = arr?.[2]; // 3

const func = obj?.method;

위 코드에서 arr?.[2]는 arr이 null이나 undefined인 경우 undefined를 반환합니다. obj?.method는 obj가 null이나 undefined인 경우 method 함수를 호출하지 않고 undefined를 반환합니다.

 

optional chaining은 코드의 가독성을 향상시키고, 예외 처리 코드를 줄일 수 있습니다.

하지만 optional chaining을 남용하면 코드의 가독성을 해치고 버그를 유발할 수 있으므로, 적절한 사용이 필요합니다.

예를 들어 다음과 같은 코드에서는 optional chaining을 사용하지 않는 것이 좋습니다.

const result = a?.b?.c?.();

위 코드에서 a, b, c 중 하나라도 null이나 undefined일 경우, result는 undefined가 됩니다.

이 때문에 버그를 찾기 어려워지므로, 다음과 같은 방식으로 optional chaining을 사용하지 않고 예외 처리 코드를 작성하는 것이 좋습니다.

let result;

if (a && a.b && a.b.c && typeof a.b.c === 'function') {
  result = a.b.c();
}

위 코드는 optional chaining을 사용하지 않지만, a, b, c가 null이나 undefined인 경우 예외 처리 코드가 실행되어 에러를 방지할 수 있습니다.