JavaScript 옵셔널 체이닝 / Optional chaining

Optional chanining

Optional chaining이란?

옵셔널 체이닝은 존재하지 않을 수 도 있는 요소(Property) 또는 메서드(Method)를 안전하게 호출할 수 있도록 도와줍니다.

Optional chaining 연산자  ' ?. '는 체인의 각 참조가 유효한지 아닌지 명시적으로 검증하지 않고, 연결된 객체 체인 안에 깊숙히 위치한 속성 값을 읽을 수 있어요.

쉽게 말하자면 요소(Property)가 없는 중첩 객체(Object)를 에러 없이 안전하게 접근할 수 있습니다.

?. 앞은 ?. 앞의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

const food = {
  breakfast: {
    meal: 'apple',
    desert: {
      drink: 'juice',
    },
  },
  lunch: {
    drink: 'coffee',
    meal: 'pasta',
  },
};

console.log(food.lunch.desert.drink); 
//Cannot read properties of undefined (reading 'drink')

실행 결과

 

위 코드 같은 음식 데이터를 가지고 있는 객체(Object)가 있을 때 콘솔에 적힌 객체에 접근하면 타입에러가 뜹니다.

만약 Optional chaining을 몰랐다면 아래의 코드처럼 콘솔을 찍었을것 같은데요.

 

console.log(food.lunch && food.lunch.desert && food.lunch.desert.drink);

 

검사를 해야할 항목이 많아지다보니 코드도 길어지고 가독성도 떨어지는데요..

그래서 이럴 때 Optional chaining을 이용하면 아래 코드처럼 변경할 수 있습니다.

 

console.log(food.lunch?.desert?.drink);

실행 결과 - Optional chaining 사용

?. 연산자의 왼쪽에 있는 것을 평가한 뒤 undefined 또는 null이 맞다면 undefined를 반환하고 평가를 끝냅니다.

 

Optional chaining 장점

if문을 줄여줍니다.

예시 코드를 함께 볼까요 ? 

const person = {
  name: "Luca",
  address: {
    city: "dong-gu",
    state: "Daejeon",
    country: "South Korea"
  }
};

const zipCode = person && person.address && person.address.zipCode;

실행 결과 - if문

 

if문의 비교 속성을 사용한다면 &&를 통해서 비교를 할텐데요 조금 길다고 생각되시지 않나요?

하지만 이를 간단하게 표현하기 위해서 Optional chaining 연산자 ?. 를 사용할 수 있습니다 !

 

const zipCode = person?.address?.zipCode;

 

이제 객체 person이 null 또는 undefined인 경우, zipCode 변수는 undefined가 됩니다.

따라서 if 문을 사용하여 zipCode 변수가 정상적으로 값을 가지는지 체크할 필요가 없는 것이죠 !

 

if (zipCode) {
  // zipCode가 존재하는 경우 실행될 코드 Block
} else {
  // zipCode가 존재하지 않는 경우 실행할 코드 Block
}

 

이것을 이렇게 바꿀 수 있어요 !

 

// zipCode가 존재하는 경우 실행할 코드
person?.address?.zipCode && 코드 실행;

// zipCode가 존재하지 않는 경우 실행할 코드
person?.address?.zipCode || 코드 실행;

 

위 코드에서 person?.address?.zipCode가 undefined 또는 null일 경우에는 뒤의 코드가 실행되지 않으므로 if문을 사용하여 체크할 필요가 없어지죠 !

 

nullish 연산자와 함께 쓰면 기본값을 할당하기에 용이합니다.

const fruits = {};
const fruitsStore = fruits.size?.color ?? '없는 과일';
// '없는 과일'

 

대괄호 표기법에도 Optional chaining이 가능합니다.

let nestedProp = obj?.['prop' + 'Name'];

 

존재하지 않을 수 있는 메서드를 호출할 때도 유용합니다.

const person = {
  name: "Luca",
  address: {
    city: "dong-gu",
    state: "Daejeon",
    country: "South Korea"
  },
  sayHello: function() {
    console.log("Hello!");
  }
};

 

이 객체에서 sayHello 메서드를 안전하게 호출하기 위해서는 다음과 같은 코드를 사용할 수 있어요 !

person?.sayHello?.();

실행 결과 - 메서드 호출

만약 객체 person이 null 또는 undefined인 경우엔, sayHello 메서드가 호출되지 않게 되겠죠.

따라서 Optional chaining을 사용한다면 굳이 if문을 사용하여 sayHello 메서드가 존재하는지 체크할 필요가 없어지는겁니다.

 

배열(Array)에 접근이 가능하다.

let arr = [1,2,3];
let arrayItem = arr?.[2];

console.log(arrayItem); // 3

실행 결과 - 배열 접근

---

Optional chaining 주의점

• 지원하지 않는 브라우저에서는 동작하지 않아요 ! 따라서, Optional chaining을 사용하는 경우에는 브라우저 호환성을 고려해야합니다.
• Optional chaining은 요소(Property)나 메서드(Method)가 null 또는 undefined인 경우에만 동작합니다.
  다른 false 값, 예시로 0, "", flase 등은 chaining의 연산 결과가 아니라 그대로 반환됩니다.
• Optional chaining을 남발하면 코드 가독성이 저하되겠죠 ?? ^^;;
• Optional chaining 연산자 ?. 는 함수 호출시 인자로 사용할 수 없습니다.
  대신, 함수 호출 전에 chaining연산자를 사용하여 안전하게 객체의 요소(Property)나 메서드(Method)를 호출해야합니다.
• Optional chaining은 객체 chaining을 위해 만들어진 것이므로, 배열에서 사용할 수 없습니다.
  (배열 접근만 가능)