Javascript 옵셔널 체이닝(Optional Chaining) " ?. "

목차

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

2. 옵셔널 체이닝 작동원리

---

1. 옵셔널 체이닝(Optional chaining) " .? "

 

옵셔널 체이닝은 왜 필요할까?

 

예를 들어, 객체안에 객체가 들어있는 중첩 객체에 접근하려고 했다 가정하자.

 

let user = {};

user.buyList = {}
user.buyList.food = "Pasta"
user.buyList.wash = "Shampoo"

console.log(user)

//  { 
//     buyList: {
//        food: 'Pasta',
//        wash: 'Shampoo'
//     }
//  }

 

만약 여기서 존재하지 않는 프로퍼티에 접근하면 어떻게 될까?

 

let user = {};

user.buyList = {}
user.buyList.food = "Pasta"
user.buyList.wash = "Shampoo"

console.log(user.buyList.beverage.cola)
console.log(1)

// TypeError: Cannot read properties of undefined (reading 'cola')

 

에러가 터지면서 다음 줄의 코드가 실행되지 않는다.

 

 

옵셔널 체이닝은 객체안에 프로퍼티가 존재하지 않을 경우에도 중첩 객체에 에러없이 접근할 수 있다.

에러가 터져 실행이 되지않으면 굉장히 곤란한 경우(서버 등등)가 상당한데, 이럴때에 필요한 가능이다.

 

같은 코드에 옵셔널 체이닝("?.")으로 바꿔보자.

 

let user = {};

user.buyList = {}
user.buyList.food = "Pasta"
user.buyList.wash = "Shampoo"

console.log(user?.buyList?.beverage?.cola) // undefined
console.log(1) // 1

 

에러가 터지지 않고 다음 줄이 정상적으로 실행된다.

 

 

---

2. 옵셔널 체이닝의 작동원리

 

?. 는 ?. 앞쪽을 평가하고, undefined나 null이면 평가를 멈추고 undefined를 반환한다.

 

1. obj?.property : obj가 존재하면, obj.property를 반환하고, 아니면 undefined를 반환한다.
2. obj?.[index] : obj가 존재하면, obj.[index]를 반환하고, 아니면 undefined를 반환한다.
3. obj?.method( ) : obj가 존재하면, obj.method()를 호출하고, 아니면 undefined를 반환한다.

 

※ 옵셔널 체이닝 ?. 은 연산자가 아님에 주의하자. ?. 은 문법 구조체(syntax contruct)이다.

 

 

---

참고자료
https://ko.javascript.info/optional-chaining