JS Nullish Coalescing, Optional Chaining

JS Nullish Coalescing, Optional Chaining

ECMAScript 2020에 도입된 Nullish Coalescing, Optional Chaining

나온지는 좀 되었지만 사용하지 않는 내 자신을 반성하며 정리해본다.

Nullish Coalescing

Nullish Coalescing 연산자 사용시

null ?? "Hello World" // "Hello World"
undefined ?? "Hello World" //"Hello World"
0 ?? "Hello World" // 0

OR 연산자 사용시

null || "Hello World" // "Hello World"
undefined || "Hello World" // "Hello World"
0 || "Hello World" // "Hello World"

• null, undefined -> 거짓이고 null -> Nullish Coalescing, OR 연산에서 같은 결과
• 0 -> 거짓이나 null 아님 -> Nullish Coalescing, OR 연산에서 다른 결과

Optional Chaining

우선 obj를 하나 생성해보자

const myObject = {
  test: {
    example: {
      id: 123,
    },
  },
}

그 후 해당 obj에 접근하는 방법은 다들 이렇게 접근할 것이다.

myObject.test.example.id // 123

하지만 코딩 에러나 실수로 잘못 접근한다면?

myObject.notHere.example.id // Uncaught TypeError: Cannot read property 'example' of undefined

이렇게 Uncaught TypeError 를 나타낼 것이고, 여기서 더 이상 코드가 실행되지 않을 것이다.
그럼 이제 Nullish Coalescing을 이용해 접근해보자.

myObject?.test?.example?.id // 123
myObject?.notHere?.example?.id // undefined

이렇게 하면 obj에서 뽑을 때 더 안전하게 접근이 가능하다.

• 객체에서 이용

myObject?.test?.example?.id // 123
myObject?.notHere?.example?.id // undefined

• 배열에서 이용

const myArray = [1, 2, 3]

myArray?.[0] // 1
myArray?.[2] // 3
myArray?.[3] // undefined

• 객체 내 함수 접근시

const myObject = {
  myNullFunction: null,
  myFunction: () => "Hello World",
}

myObject?.myNullFunction?.() // undefined
myObject?.myFunction?.() // "Hello World"

마치며

3항 연산자 길게 쓰는 것보다 간단하게 이용이 가능하고...

value ? value : undefined

응 C#, swift, 코틀린 등등.. 이미 다 있다고한다.