옵셔널 체이닝, null 병합 연산자... 자바스크립트에도 있지 않나요? (feat. chat GPT)

나현·2023년 3월 23일
0
post-thumbnail

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

옵셔널 체이닝, null 병합 연산자! 자바스크립트에도 있는 개념입니다.
이 두가지는 타입스크립트에도 있는 개념인데요,
이번 시간에는 개념 그 자체보다는
옵셔널 체이닝, null 병합 연산자의 타입스크립트에서와 자바스크립트에서의 차이점에 중점을 둬서 알아보도록 하겠습니다!

👀 옵셔널 체이닝, TS vs JS

저는 타입스크립트에 대해 배우기 전에 자바스크립트에도 옵셔널 체이닝이 있다고 알고 있었습니다.
그런데 공부해보니 타입스크립트에서의 옵셔널 체이닝도 비슷한 개념인 것 같았어요.
둘이 어떤 차이가 있을지,
만약 자바스크립트와 같은 개념이라면 포스팅을 쉬려고 했었습니다...😏

그런데 아무리 찾아봐도 둘의 차이점은 명쾌하게 알 수 없었고!
타입스크립트 글만 보면 마치 타입스크립트 고유의 기능인 것 같고,
자바스크립트 글만 보면 마치 자바스크립트 고유의 기능인 것만 같았습니다.

일단 자바스크립트의 옵셔널 체이닝에 대해 다시 한 번 확실히 알아보고자
MDN의 글을 읽고 왔습니다 :)

🔗MDN - 옵셔널 체이닝

그리고 둘의 어떤 차이점이 있는지 계속 찾아보다가 요즘 핫한 chat GPT 선생님에게 물어보고 왔습니다! (반말 주의)

Q. 자바스크립트 옵셔널 체이닝과 타입스크립트 옵셔널 체이닝은 다른거야?
A. 자바스크립트와 타입스크립트에서의 옵셔널 체이닝은 비슷한 개념이지만 구문이 약간 다릅니다.

자바스크립트에서의 옵셔널 체이닝은 ?. 연산자를 사용하여 객체의 속성을 안전하게 탐색하는 방법입니다. 예를 들어, object?.property와 같이 사용합니다. 이 연산자는 object가 존재하지 않으면 undefined를 반환하며, 해당 속성이 존재하지 않으면 undefined를 반환합니다.

타입스크립트의 옵셔널 체이닝 역시 ?. 연산자를 사용합니다. 하지만 이 연산자는 자바스크립트와 달리 컴파일러가 타입 검사를 수행하여 타입 안전성을 보장합니다. 타입스크립트에서는 이를 "선언된 형식 없는 속성 접근"이라고도 합니다. 예를 들어, object?.property와 같이 사용합니다.

따라서 자바스크립트에서는 객체의 속성을 안전하게 탐색하는 방법으로만 사용할 수 있지만, 타입스크립트에서는 컴파일러가 타입 검사를 수행하여 안전성을 보장하는 용도로도 사용됩니다.

결국 정리해보자면 사용법은 같지만,
타입스크립트에서는 컴파일러를 사용해 좀 더 안전하게 사용할 수 있다는 의의가 있습니다.

👀 null 병합 연산자 TS vs JS

자바스크립트에서 null 병합 연산과 타입스크립트에서 null 병합 연산은 어떻게 다를까요?
의미는 비슷한 것 같은데 어떤 차이가 있을까요?
물론 자바스크립트와 타입스크립트라는 차이가 있지만...
저로서는 확실하게 둘을 비교해가며 알고 싶었습니다.

자바스크립트의 null 병합 연산에 대한 개념은 이번에도 MDN을 훑어 봤습니다.

🔗MDN - null 병합 연산자

마찬가지로 둘의 차이를 chat GPT에게 물어봤습니다.

자바스크립트의 null 병합 연산자(??)와 타입스크립트의 null 병합 연산자(??)는 기본적으로 동일한 동작을 합니다.

둘 다 왼쪽 피연산자가 null이거나 undefined일 경우 오른쪽 피연산자를 반환합니다. 그 외의 경우에는 왼쪽 피연산자를 반환합니다.

하지만, 타입스크립트에서는 strictNullChecks 옵션이 켜져 있을 때, null 병합 연산자를 사용할 때 반환되는 값의 타입이 약간 다릅니다.

예를 들어, 다음과 같은 코드를 생각해봅시다.

const foo: string | null | undefined = null;
const bar = foo ?? 'default';

위 코드는 타입스크립트에서는 문제 없이 컴파일됩니다. bar의 타입은 string이 됩니다. 하지만, 다음과 같은 코드는 컴파일 오류가 발생합니다.

const foo: string | null | undefined = null;
const bar: string = foo ?? 42;

이유는 42의 타입이 number이기 때문입니다. 타입스크립트는 strictNullChecks 옵션을 사용할 때, null 병합 연산자를 사용할 때 반환되는 값의 타입을 왼쪽 피연산자의 타입과 유니온 타입을 형성합니다. 위 예시에서 foo의 타입은 string | null | undefined이므로 bar의 타입은 string | number입니다.

즉, 자바스크립트와 타입스크립트의 null 병합 연산자는 기본적으로 동일하지만, 타입스크립트에서는 반환되는 값의 타입이 약간 다를 수 있습니다.

설명을 읽어보면,
타입스크립트는 아무래도 그 특성상 null 이 아닐 경우의 피 연산자의 타입도 신경써야 한다는 것을 알 수 있습니다.


😝 마무리

오늘은 옵셔널 체이닝과 null 병합 연산자가 자바스크립트에서와 타입스크립트에서 어떤 차이가 있는지 알아보았습니다.
그나저나 chat GPT는 친절하게 예시까지 넣어서 알려주네요 ㄷㄷㄷ
다만 기본 개념은 아무래도 공식 문서나 공식 가이드북을 통해서 알아보는 것이 좋으니,
이해가 안될 경우 저렇게 참고하는 정도로 chat GPT를 사용하면 좋을 것 같습니다!

저는 다음 시간에도 살아남을 수 있을까요?!😂

profile
프론트엔드 개발자 신나현입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!

0개의 댓글