javascript] 옵셔널체이닝(optional Chaining)이란?

 

📌1. optional chaining이란?

: 옵셔널 체이닝(optional chaining)은 객체의 중첩된 속성이나 메서드에 접근할 때, null 또는 undefined 에러를 방지하기 위한 방법입니다. 실제 개발을 하다보면객체 내의 값에 접근할 때, 값이 존재하지 않는 경우가 생각보다 많이 있습니다😥
이런 경우 프로그램이 터지는 걸 막기위해 옵셔널체이닝 같은 예외처리를 꼭 해줘야합니다. 아래 간단한 예시를 볼까요? 
member들의 address에 접근하고 싶은데, jinsu의 경우 주소를 입력하지 않았기때문에 city에 접근 시 바로 에러가 납니다. 

const member = {
  name: 'hana',
  address: {
    city: 'Seoul',
    zipCode: '10001'
  }
};

const member2 = {
  name: 'jinsu',
  address: {}
};

// 중첩 객체의 특정 프로퍼티에 접근
let cityName = member.address.city; // 'Seoul'
let cityName2 = member2.address.city; // address가 null 또는 undefined로 에러 발생

일반적으로 JavaScript에서 객체의 프로퍼티에 접근할 때, 중간에 있는 프로퍼티가 존재하지 않으면 TypeError가 발생합니다. 위 예시에서는 address객체에 city라는 프로퍼티가 없기 때문에 에러가 발생했습니다. 이런 경우 어떻게 해결하는게 좋을까요? 여러가지 방법이 있겠지만 ES2020(ES11)에서 도입된 옵셔널체이닝을 사용하시면 간결하게 코드를 작성하여 해결할 수 있습니다😉

📌2. 사용방법

:  먼저 일반적으로 에러를 막기위해서 가장 흔하게 쓸 수 있는 방법인 if문으로 문제를 해결해보겠습니다.

const member = {
  name: 'jinsu',
  address: {}
};

let cityName;
if (member.address) {
  cityName = person.address.city;
} else {
  cityName = undefined;
}

console.log(cityName); // undefined

이번에는 옵셔널체이닝 연산자를 사용하여 문제를 해결해 보겠습니다.

const member = {
  name: 'jinsu',
  address: {}
};

const cityName = member.address?.city;

console.log(cityName); // undefined

짜잔! 코드가 한줄로 짧게 끝났네요. 두 예시 모두 같은 결과를 반환하지만, 옵셔널 체이닝을 사용한 예시는 코드가 훨씬 간결하며, if문과는 다르게 널 체크를 명시적으로 처리하지 않아도 되는 장점이 있습니다.

이렇게 물음표와 마침표를 붙여 사용하는 것이 바로 옵셔널 체이닝 연산자(?.)인데요. 만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 null또는 undefined이라면 undefined를 반환하고, 그렇지 않은 경우에는 그 다음 프로퍼티를 값을 리턴해줍니다. 옵셔널 체이닝을 사용하면 address의 city값이 null또는 undefined인 경우, undefined를 반환해주고,   address의 city값이 존재하는 경우에는 city값을 반환해줍니다.
참고로 저는 옵셔널체이닝을 기억할 때 .? → '만약에 .이하가 있다면 그걸리턴 아니면 undefined' 요렇게 기억합니다ㅎㅎ

 

📌3. 다양한 예시

💡 (1) 객체의 속성 접근

: 위에서 보여드렸던 것과 같이 옵셔널 체이닝을 사용하여 객체의 중첩된 속성에 접근하는 방법입니다. postion 값이 없다면 에러가 나는게 아니라 job에 undefined를 반환합니다.

const employee = {
  name: 'Mike',
  job: {
  	department: 'develop',
  	position : { frontEnd: true }
  }
};

const job = employee.job.position?.frontEnd; // 만약 position이 없다면 job은 undefined

* 참고로 대괄호 표기법에도 옵셔널 체이닝을 사용할 수 있습니다

const employee = {
    name: 'Mike',
    job: {
        department: 'develop',
        position : { frontEnd: true }
    }
  };
  
  const job = employee.job['position']?.['frontEnd']; // 만약 position이 없다면 job은 undefined

 

💡 (2) 함수 호출

: 옵셔널 체이닝을 사용하여 함수를 호출하는 방법입니다. 참조할 수 없는 메소드를 호출하는 경우에 undefined를 반환합니다.

const calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b
};

const result = calculator.multiply?.(5, 3); // multiply라는 함수가 없으므로 result는 undefined
console.log(result)

💡 (3) 배열 요소 접근

: 옵셔널 체이닝을 사용하여 배열의 요소에 접근하는 방법입니다. 존재하지 않는 인덱스에 접근하는 경우 undefined를 반환합니다.

const numbers = [1, 2, 3, 4];

const fifthNum = numbers[5]?.(); // numbers[5]라는 요소가 없으므로 fifthNum는 undefined

 

💡 (4) 조합된 사용

: 기본값을 설정할 때, Nullish 병합 연산자를 함께 쓰면 코드를 더 간결하게 만들면서도 null 또는 undefined값을 다룰 수 있습니다. (* Nullish 병합 연산자는 변수가 null 또는 undefined인 경우에만 기본 값을 설정하고자 할 때 사용합니다. 변수가 null 또는 undefined인 경우에만 오른쪽 피연산자를 반환합니다.)

const member = {
    name: 'Seoul',
    address: { }
  };

const member2 = {
    name: 'Seoul',
};

// 1. address가 있는 경우
const defaultCity = member.address?.city ?? 'Unknown';

// 2. address가 없는 경우
const defaultCity2 = member2.address?.city ?? 'Unknown2';

console.log(defaultCity);
console.log(defaultCity2);

Nullish 병합 연산자를 사용하면 2번 예시 처럼 address가 없는 경우에도 기본값을 설정해 줄 수 있습니다.
옵셔널 체이닝과 Nullish 병합연산자를 함께쓰면, 옵셔널 체이닝은 속성이나 메서드에 안전하게 접근할 수 있도록 해주고, Nullish 병합 연산자는 변수 값이 null 또는 undefined일 때만 기본값을 제공해주기때문에 코드의 안정성과 간결성을 가져갈 수 있습니다.