옵셔널 체이닝(Optional Operator)

옵셔널 연산자(Optional Operator)는 JavaScript에서 값이 `null` 또는 `undefined`일 수 있는 경우 이를 안전하게 접근하거나 조작하기 위한 문법입니다. 대표적으로 옵셔널 체이닝(Optional Chaining)과 널 병합 연산자(Nullish Coalescing Operator)가 있습니다.

### 1. 옵셔널 체이닝(Optional Chaining)

옵셔널 체이닝(`?.`)은 객체의 프로퍼티에 접근할 때, 해당 프로퍼티가 존재하지 않거나 `undefined`일 경우 에러를 발생시키지 않고 `undefined`를 반환하는 연산자입니다.

#### 문법
```javascript
let value = obj?.prop;
let value = obj?.[expr];
let value = arr?.[index];
let value = func?.(args);
```

#### 사용 예시
```javascript
const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  }
};

console.log(user.address?.city); // 'Wonderland'
console.log(user.address?.postcode); // undefined (안전하게 접근 가능)
console.log(user.contact?.email); // undefined (에러 발생하지 않음)
```

### 2. 널 병합 연산자(Nullish Coalescing Operator)

널 병합 연산자(`??`)는 왼쪽 피연산자가 `null` 또는 `undefined`인 경우 오른쪽 피연산자를 반환하는 연산자입니다. 이는 기본값을 설정할 때 유용합니다.

#### 문법
```javascript
let value = a ?? b;
```

#### 사용 예시
```javascript
let username = null;
let defaultName = 'Guest';

let displayName = username ?? defaultName;
console.log(displayName); // 'Guest'

let input = '';
let defaultValue = 'N/A';

let result = input ?? defaultValue;
console.log(result); // '' (input이 null이나 undefined가 아니기 때문에 input 값을 그대로 사용)
```

### 예제: 옵셔널 연산자를 사용한 함수

```javascript
function getUserInfo(user) {
  // 옵셔널 체이닝을 사용하여 안전하게 프로퍼티에 접근
  const city = user?.address?.city ?? 'Unknown';
  const email = user?.contact?.email ?? 'No email provided';

  return `City: ${city}, Email: ${email}`;
}

const user1 = {
  name: 'Alice',
  address: {
    city: 'Wonderland'
  },
  contact: {
    email: 'alice@example.com'
  }
};

const user2 = {
  name: 'Bob'
};

console.log(getUserInfo(user1)); // "City: Wonderland, Email: alice@example.com"
console.log(getUserInfo(user2)); // "City: Unknown, Email: No email provided"
```

### 실전 예제: API 응답 처리

옵셔널 체이닝과 널 병합 연산자는 특히 API 응답을 처리할 때 유용합니다. API 응답 데이터는 예기치 않게 누락될 수 있기 때문에 안전하게 접근하는 것이 중요합니다.

```javascript
fetch('https://api.example.com/user/123')
  .then(response => response.json())
  .then(data => {
    const username = data?.name ?? 'Anonymous';
    const email = data?.contact?.email ?? 'No email available';

    console.log(`Username: ${username}`);
    console.log(`Email: ${email}`);
  })
  .catch(error => console.error('Error fetching user data:', error));
```

이처럼 옵셔널 연산자를 사용하면 코드가 더 안전하고 간결해지며, `null` 또는 `undefined` 값으로 인해 발생할 수 있는 오류를 효과적으로 방지할 수 있습니다.