javascript 옵셔널 체이닝 (Optional Chaining)

개발하다보면, 옵션널 체이닝을 사용할 일이 종종 생깁니다. 어느날, 함께 일하는 시니어 개발자분이 아래와 같은 질문을 했습니다.

아래 코드 line 10 에서 왜 lint 에러가 안 생기나요? 

type Price = {
  localizedPrice: number;
};

type Subscription = {
  data: Price;
};

const targetPlan: Subscription | null = { data: { localizedPrice: 100 } };
const price = targetPlan?.data.localizedPrice; // 100

 

저는 자연스럽게 필수값 뒤에 옵션널 체인닝을 사용하지 않고 있었는데, 이 질문을 통해 누군가에게는 이 부분이 물음표일 수 있겠다고 생각했습니다. 대표적으로 kotlin 과 비교하면서 글을 작성해 보겠습니다. 

 

---

옵셔널 체이닝 (Optional Chaining) - TypeScript와 Kotlin 비교

1. 옵셔널 체이닝 개요

옵셔널 체이닝은 객체나 배열, 함수 등의 속성에 접근할 때, 그 값이 null 또는 undefined일 가능성이 있을 때 안전하게 접근할 수 있도록 돕는 문법입니다. 이를 통해 코드에서 null 또는 undefined를 직접 체크하지 않고도 속성에 안전하게 접근할 수 있습니다.

• TypeScript: ?. (옵셔널 체이닝)
• Kotlin: ?. (안전 호출 연산자)

2. TypeScript에서의 옵셔널 체이닝

TypeScript에서는 옵셔널 체이닝을 사용하여 객체가 null 또는 undefined일 때 안전하게 접근할 수 있습니다. ?. 연산자는 객체의 속성이 null이거나 undefined일 경우, 그 뒤에 있는 속성이나 메서드를 접근하려고 할 때 에러를 발생시키지 않고 undefined를 반환합니다.

type Price = {
  localizedPrice: number;
};

type Subscription = {
  data: Price;
};

const pp1Month: Subscription | null = { data: { localizedPrice: 100 } };
const price = pp1Month?.data.localizedPrice; // 100

• 옵셔널 체이닝 사용 예시: pp1Month가 null일 경우, pp1Month?.data.localizedPrice는 undefined를 반환하고, data는 undefined가 아니므로 옵셔널 체이닝을 붙이지 않아도 됩니다.

3. Kotlin에서의 안전 호출 연산자 (?.)

Kotlin에서도 옵셔널 체이닝과 유사한 기능을 제공하는 ?. (안전 호출 연산자)을 사용하여 null 값에 안전하게 접근할 수 있습니다. Kotlin에서는 모든 객체에 null 가능성이 있을 경우 안전 호출 연산자를 추가해야 합니다.

data class Price(val localizedPrice: Int?)
data class Subscription(val data: Price?)

val subscription: Subscription? = Subscription(Price(100))
val price = subscription?.data?.localizedPrice // 100

• 옵셔널 체이닝 사용 예시: subscription이 null일 경우, subscription?.data?.localizedPrice는 null을 반환합니다. 모든 객체에 ?.을 사용해야 합니다.

4. TypeScript와 Kotlin의 차이점

TypeScript와 Kotlin은 둘 다 옵셔널 체이닝을 통해 객체가 null 또는 undefined일 때 안전하게 접근할 수 있도록 해주지만, 두 언어에서의 사용 방식은 약간 다릅니다.

• TypeScript: 옵셔널 체이닝(?.)은 최상위 객체만 체크합니다. data가 필수값이라면 pp1Month?.data.localizedPrice와 같이 작성하면 됩니다. data에 옵셔널 체이닝을 추가할 필요는 없습니다.
• Kotlin: ?. 연산자는 모든 객체에 대해 사용해야 합니다. data가 필수값이라도 ?.을 사용하여 모든 객체가 null일 가능성을 처리해야 합니다.

이러한 차이는 각 언어의 타입 시스템과 null 처리 방식에 따른 결과입니다. TypeScript는 null을 직접적으로 체크하고, Kotlin은 객체가 null일 수 있는 가능성에 대해 좀 더 철저하게 접근하기 위해 모든 객체에 ?.을 사용해야 합니다. 

 

참고 문서

• https://ko.javascript.info/optional-chaining

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN