[JavaScript] 옵셔널 체이닝 (Optional Chaining)

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

중첩된 객체에서 프로퍼티에 안전하게 접근할 수 있게 해주는 방법입니다. 객체가 `null`이나 `undefined`일 때 오류 없이 `undefined`를 반환합니다.

---

Error 예시 

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

const user1 = {
  name: 'hwichul',
  dog: {
    name: 'dal',
  }
}

printName(user1); // dal

const user2 = {
  name: 'shin',
}

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

 

`dog` 프로퍼티를 가지고 있지 않은 `user2`는 `dog` 프로퍼티가 `undefined`이기 때문에 `user2.dog.name`에 접근하는 순간 에러가 발생합니다.

 

중첩된 객체의 프로퍼티를 다룰 때는 `user.dog.name`에 접근하기 전에 `user.dog`가 `null`, `undefined`가 아닌지 검증하고 접근해야 에러를 방지할 수 있고, 옵셔널 체이닝을 사용하면 해결할 수 있습니다.

---

옵셔널 체이닝 사용 예시

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

 

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

 

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

 

옵셔널 체이닝 동작 원리를 삼항 연산자로 표현한다면 위 소스처럼 표현할 수 있습니다.

---

null 병합 연산자(??) 응용

function printName(user) {
  console.log(user.dog?.name ?? '꾸미는 없습니다.');
}

const user2 = {
  name: 'ggum',
}

printName(user2); // 꾸미는 없습니다.

 

`user2`에는 `dog` 프로퍼티가 없기 때문에 `nudefined`가 됩니다. 따라서 우측 값인 '꾸미는 없습니다.'가 반환됩니다.

---

null 병합 연산자(??)에 대해 궁금하시다면 👉 [JavaScript] AND, OR 연산자 정리 (Feat. null 병합 연산자)

 

[JavaScript] AND, OR 연산자 정리 (Feat. null 병합 연산자)

[JavaScript] AND, OR 연산자 정리 (Feat. n