[JS ES6] Optional Chaining (?.) / Nullish Coalescing Operator (??)

ES2020(또는 2021년)부터 사용 가능한 optional chaining과 nullish coalescing operator

---

1️⃣ Optional Chaining (?.)

개념

• optional chaining (?.) 은 객체의 프로퍼티에 접근할 때, 해당 객체가 null 또는 undefined인 경우 에러를 발생시키지 않고 undefined를 반환합니다.
• 즉, "왼쪽 값이 null 또는 undefined면 마침표(.) 대신 ?. 을 사용하여 안전하게 접근하라"는 의미입니다.

기본 예제

var user = {
  name: 'kim',
  age: 20
}

console.log(user.name);   // 'kim'
console.log(user?.name);  // 'kim'

• 설명:
  • 일반 마침표(.)와 동일하게 작동하지만, 만약 user가 null이나 undefined였다면 에러 대신 undefined가 반환됩니다.

중첩된 객체에서의 사용

• 중첩된 객체를 다룰 때, 존재하지 않는 프로퍼티에 접근하면 에러가 발생합니다.
• optional chaining을 사용하면 에러 없이 안전하게 접근할 수 있습니다.

예제: 중첩 객체 접근 시 에러 방지

var user = {
  name: 'kim',
  age: { value: 20 }
}

console.log(user.age1?.value1);  // undefined (에러 없음)

• 설명:
  • user.age1이 존재하지 않으므로, .value1에 접근할 때 에러 대신 undefined를 반환합니다.

주의:

optional chaining은 에러를 해결해 주는 것이 아니라 에러를 발생시키지 않도록 "감추는" 역할입니다.

---

2️⃣ Nullish Coalescing Operator (??)

개념

• nullish coalescing operator (??) 는 좌측의 값이 null 또는 undefined일 때, 우측의 값을 반환합니다.
• 주로 데이터가 늦게 도착하거나 아직 값이 설정되지 않았을 때 기본값을 제공하는 데 사용됩니다.

기본 예제

var user;

console.log(user ?? '로딩중'); // '로딩중'

• 설명:
  • user가 undefined이므로, ?? 연산자는 우측의 '로딩중'을 반환합니다.

활용 예제

• Ajax 요청이나 React, Vue 같이 데이터가 늦게 도착할 수 있는 상황에서 유용합니다.
• 예를 들어, 아직 데이터가 준비되지 않은 상태라면 기본 텍스트를 보여줄 수 있습니다.

var user = null;
var displayName = user ?? '사용자 정보 로딩 중';
console.log(displayName);  // '사용자 정보 로딩 중'

---

📌 정리

• Optional Chaining (?.):
  • 중첩된 객체에서 존재하지 않는 프로퍼티에 안전하게 접근할 수 있도록 도와줍니다.
  • 에러 없이 undefined를 반환하여 실행 흐름을 유지할 수 있습니다.
• Nullish Coalescing Operator (??):
  • 값이 null이나 undefined일 때 기본값을 제공하여 사용자에게 안정적인 데이터를 보여줄 수 있습니다.
  • 특히 Ajax 요청 등 비동기 데이터 처리 시 유용합니다.