[JavaScript] 옵셔널 체이닝

옵셔널 체이닝(Optional Chaning)

자바스크립트에서 존재하지 않는 요소에 접근하려 할 때 에러가 발생할 수 있습니다. 
그래서 옵셔널 체이닝이 등장하기 전에는 AND 연산자의 단축평가를 이용해 이를 해결할 수 있었습니다.

let users = {}

console.log(users && users.user && users.user.name)
undefined

하지만 이 경우에 체이닝이 길어지면 길어질수록 코드의 복잡성이 증가한다는 단점이 있습니다.
그래서 이를 해결하기 위해 ES2020 부터 옵셔널 체이닝이 추가되었습니다.

옵셔널 체이닝(?.)은 체이닝(.)과 동일한 기능을 하는데 차이점은 옵셔널 체이닝은 nullish한(null or undefined) 값을 할당하고 있는 경우에 에러를 반환하지 않고 undefined를 반환합니다.

---

옵셔널 체이닝 사용 이유

 

예시를 통해 살펴보도록 하겠습니다.
users에서 user 프로퍼티에 접근하였고 users에는 user 프로퍼티가 존재하지 않기 때문에 undefined가 할당됩니다.

let users = {}

console.log(users.user.name)

그 다음 undefined가 할당된 users.user에서 name 프로퍼티에 접근하였고 당연히 다음과 같이 에러가 발생합니다.

TypeError: Cannot read property 'name' of undefined

하지만 위 경우에서 옵셔널 체이닝을 사용하면 에러가 발생하지 않고 undefined가 출력됩니다.
옵셔널 체이닝이 참조값이 nullish 한지 판단한 후 nullish 하다면 에러가 아닌 undefined를 반환하기 때문입니다.
따라서 값이 누락될 가능성이 있는 경우에 옵셔널 체이닝을 사용하면 프로그램의 안정성을 높일 수 있고 보다 간단하게 표현할 수 있습니다.

let users = {}

console.log(users.user?.name)

undefined

---

옵셔널 체이닝 사용법

옵셔널 체이닝은 다양한 방법으로 사용할 수 있습니다.

1. null/undefined 체크
옵셔널 체이닝의 기본적인 사용법으로 참조값이 nullish 한지 체크할 때 사용합니다.

let users = {}

console.log(users.user?.name)

2. 함수의 호출
존재하지 않을 수 있는 함수를 호출할 때 옵셔널 체이닝을 사용함으로써 예외를 발생시키는 것 대신에 자동으로 undefined를 반환합니다.

let users = {}

console.log(users.func?.())

undefined

3. 대괄호 표현식(Bracket notation)
프로퍼티에 대괄호 표현식을 사용해서 접근할 때 옵셔널 체이닝을 사용하여 안전하게 접근할 수 있습니다.

let users = null

console.log(users?.['user'])

undefined

배열 요소에 접근할 때에도 대괄호를 사용하기 때문에 역시 옵셔널 체이닝을 사용할 수 있습니다.

let arr = [1, 2, 3, 4, 5]

console.log(arr?.[5])

undefined

4. null 병합 연산자와 같이 사용하기
옵셔널 체이닝을 사용한 후 undefined가 반환되었을 때 null 병합 연산자(??)를 사용해 기본 값을 할당할 수 있습니다.

let user = {
    age: 19
}

user.name = user?.name ?? '홍길동'

console.log(user.name)

홍길동