옵셔널 체이닝

리액트로 코드를 작성하다 보면 프로퍼티를 읽을 수 없다는 에러를 자주 접할 수 있습니다. null 또는 undefined와 같은 값이 발생할 수 있기 때문에 이러한 값에 대한 처리가 필요한데 이러한 값은 프로퍼티에 접근하거나 프로퍼티의 메소드를 호출하려고 시도할 때 런타임 오류가 발생할 수 있습니다. 이러한 오류를 방지하기 위해 null 또는 undefined와 같은 값에 대한 처리가 필요합니다.

 

이럴 때 안전하게 코드에 접근하는 방법 중 하나인 옵셔널 체이닝을 사용하면, 옵셔널 값이 undefined 일 경우 발생하는 런타임 오류를 방지할 수 있습니다. 이를 통해 코드의 안정성을 높일 수 있습니다.

 

옵셔널 체이닝 이란?

옵셔널 체이닝은 객체의 중첩된 프로퍼티 중 하나라도 null 또는 undefined일 경우, 오류를 발생하지 않고 그대로 undefined를 반환하는 기능입니다.

 

아래 코드를 잠시 살펴봅시다.

 

function printCatName(user) {
  console.log(user.cat.name);
}

const user1 = {
  name: 'Code Kim',
  cat: {
    name: 'Nabi',
    breed: 'British Shorthair',
  }
}

printCatName(user1);

 

객체를 활용해서 데이터를 표현하다 보면 이렇게 중첩된 객체를 작성하게 될 일이 빈번하고, 함수에서도 이런 중첩 객체의 프로퍼티를 활용할 일이 많은데요. 함수 printCatName은 user 파라미터에 중첩된 cat객체의 name 프로퍼티를 콘솔에 출력해주는 함수입니다.

 

그런데, 이렇게 중첩 객체를 다룰 때 한가지 조심해야 될 부분이 있습니다.

 

const user2 = {
  name: 'Young',
}

console.log(user2.cat); // undefined
printCatName(user2); // TypeError: Cannot read property 'name' of undefined

 

여러가지 상황에 맞춰 데이터를 다루다 보면 때로는 우리가 예상한 프로퍼티를 가지고 있지 않을 수도 있는데요. cat 프로퍼티를 가지고 있지 않은 user2는 cat 프로퍼티가 undefined이기 때문에 user2.cat.name에 접근하려는 순간 에러가 발생하게 됩니다.

 

그래서 printCatName과 같이 중첩된 객체의 프로퍼티를 다룰 때는 user2.cat.name에 접근하기 전에 user.cat이 null 또는 undefined가 어니라는 것을 검증하고 접근해야 에러를 방지할 수 있는데요.

 

function printCatName(user) {
  console.log(user.cat && user.cat.name);
}

 

if 문을 활용할 수도 있지만, 일반적으로는 간결하게 AND연산자를 활용해서 이 문제를 해결 했었는데요.

그런데 이마저도 객체의 이름이나 프로퍼티의 이름이 길어질수록 가독성이 나빠지게 때문에 훨씬 더 코드를 간결하게 사용할 수 있는 문법이 바로 옵셔널 체이닝입니다.

 

function printCatName(user) {
  console.log(user.cat?.name);
}

 

위 코드에서 볼 수 있는 것처럼 물음표와 마침표를 붙여 사용하는 부분이 바로 옵셔널 체이닝 연산자(?.) 인데요. 만약 옵셔널 체이닝 연산자 왼편의 프로퍼티 값이 null 또는 undefined이 아니라면 그다음 프로퍼티 값을 리턴하고 그렇지 않은 경우에는 undefined를 반환합니다.

 

옵셔널 체이닝의 연산자의 동작 원리를 삼항 연산자를 통해 구체적으로 표현하면 아래와 같이 작성할 수 있습니다.

 

function printCatName(user) {
  console.log((user.cat === null || user.cat === undefined) ? undefined : user.cat.name);
}

 

자바스크립트에서 에러를 방지하는 일은 굉장히 중요한데요. 중첩된 객체를 다룰 때 에러를 방지하기 위해 다양한 방식을 활용할 수 있지만 옵셔널 체이닝 연산자를 활용하면 훨씬 더 간결하게 코드를 작성할 수 있다는 점 참고해주세요.