[JS] 옵셔널 체이닝

옵셔널 체이닝(?.)은 중첩 객체의 프로퍼티나 메서드에 안전하게 접근할 수 있도록 도와주는 문법이다. 프로퍼티가 없는 객체를 접근하려 할 때 에러를 방지하고, 대신 undefined를 반환한다.

---

1. 옵셔널 체이닝이 필요한 이유

에러 발생 예시

주소 정보가 없는 사용자의 street 프로퍼티를 접근하려 하면 에러가 발생한다:

let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); 
// TypeError: Cannot read property 'street' of undefined

기존의 해결 방법

'&&' 연산자를 사용해 중첩 프로퍼티 접근 전에 객체 존재 여부를 확인했다:

let user = {};
alert(user && user.address && user.address.street); // undefined

이 방법은 코드가 길어지고 가독성이 떨어지는 단점이 있다.

---

2. 옵셔널 체이닝의 사용법

옵셔널 체이닝 ?.은 왼쪽 평가 대상이 null 또는 undefined인 경우 평가를 멈추고 undefined를 반환한다.

기본 사용 예시

let user = {}; // 주소 정보가 없는 사용자
alert(user?.address?.street); // undefined, 에러 없음

null 값 처리

let user = null;
alert(user?.address); // undefined
alert(user?.address?.street); // undefined

---

3. 옵셔널 체이닝의 올바른 사용

옵셔널 체이닝은 존재 여부가 확실하지 않은 값에만 사용해야 한다.
예를 들어, 사용자 객체는 반드시 있어야 하지만, 주소는 선택적이라면:

let user = { name: "John" };
alert(user.address?.street); // undefined

user가 반드시 있어야 하는 경우에는 옵셔널 체이닝을 사용하지 않는 것이 좋다.

---

4. 옵셔널 체이닝의 제한

선언되지 않은 변수

옵셔널 체이닝은 선언된 변수에서만 동작한다:

// ReferenceError: user is not defined
user?.address;

변수는 반드시 let, const, var로 선언되어 있어야 한다.

---

단락 평가 (Short-Circuit Evaluation)

옵셔널 체이닝은 평가를 멈추는 단락 평가를 수행한다:

let user = null;
let x = 0;

user?.sayHi(x++); // 아무 일도 일어나지 않음
alert(x); // 0

---

5. ?.()와 ?.[]

함수 호출에 사용

존재 여부가 불확실한 메서드를 호출할 때 사용할 수 있다:

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
};

let user2 = {};

user1.admin?.(); // "관리자 계정입니다."
user2.admin?.(); // 아무 일도 발생하지 않음

대괄호 표기법

프로퍼티 이름이 동적으로 결정되는 경우에도 사용 가능하다:

let user1 = { firstName: "Violet" };
let user2 = null;

let key = "firstName";

alert(user1?.[key]); // "Violet"
alert(user2?.[key]); // undefined

---

6. 제한 사항

옵셔널 체이닝은 읽기와 삭제에는 사용할 수 있지만 쓰기에는 사용할 수 없다:

user?.name = "Violet"; 
// SyntaxError: Invalid left-hand side in assignment

---

요약

옵셔널 체이닝은 다음과 같은 형태로 사용된다:
1. obj?.prop: obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환한다.
2. obj?.[prop]: obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환한다.
3. obj?.method(): obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환한다.

사용 시 주의사항

• 선택적인 프로퍼티나 메서드에만 사용해야 한다.
• 반드시 선언된 변수에서만 동작한다.
• 잘못된 사용은 디버깅을 어렵게 만들 수 있으므로 주의해야 한다.

옵셔널 체이닝은 코드의 안전성과 가독성을 높이는 유용한 문법이다.