240801 옵셔널 체이닝

옵셔널 체이닝 (Optional Chaining)

안전하게 프로퍼티에 접근하는 방법 중 하나
일반적인 객체 프로퍼티 접근법(점 표기법) 과 달리 옵셔널 체이닝 연산자(?.)를 통해 접근

function printDogName(user) {
  console.log(user.dog.name);
}

const user1 = {
  name: '존',
  dog: {
    name: '초코',
    breed: '치와와',
  }
}

printDogName(user1); // 초코

보통 이런식으로 중첩된 객체의 프로퍼티에 접근하게 된다.

const user2 = {
  name: '명수',
}

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

하지만 객체 내에 찾는 프로퍼티가 없는 경우가 있다.
dog 프로퍼티가 없는 (undefined) user2 이기 때문에, user2.dog.name 에 접근하려고 하면 💥에러가 발생한다.

이런식으로 중첩된 객체의 프로퍼티를 다룰 때는 user.dog.name에 접근하기 전에
아래 코드와 같이 user.dog이 null 혹은 undefined가 아니라는 것을 검증 하고 접근해야 에러를 방지할 수가 있다.

function printDogName(user) {
  console.log(user.dog && user.dog.name);
}

하지만, 객체의 이름이나 프로퍼티의 이름이 길어질수록 가독성이 나빠지는 문제가 발생하게 된다.

💡 이런 경우 코드를 간결하게 사용할 수 있는 문법이 옵셔널 체이닝(Optional Chaining)

function printDogName(user) {
  console.log(user.dog?.name);
}

옵셔널 체이닝 연산자(?.)
물음표?와 마침표.를 붙여 사용한다.
연산자 왼편의 프로퍼티 값이 undefined 또는 null이 아니라면 그다음 프로퍼티 값을 리턴, 그렇지 않은 경우에는 undefined를 반환하는 문법

이 동작 원리를 삼항 연산자를 통해 표현하면 다음과 같다.

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