Optional Chaining
??
- 이것을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
- 속성이나 메서드에 접근할 때 객체가 null 또는 undefined 인 경우에도 에러를 발생시키지 않고 안전하게 접근할 수 있다.
- 이전에는 객체의 중첩된 속성을 접근할 때 '&&' 연산자를 사용하여 null 체크를 해야 했지만, 옵셔널 체이닝을 사용하면 더욱 간결하고 가독성이 좋은 코드를 작성할 수 있다.
필요한 이유
- 예시로 사용자가 여러명 있는데 그 몇명은 주소를 가지고 있지 않다고 가정해보자. 이럴 때 user.address.street 을 사용해 주소 정보에 접근하면 에러가 발생할 수 있다
const user = {}
alert(user.address.street)
//TypeError : Cannot read property 'street' or undefined이런 경우이다.
사용
- ? 은 앞의 평가 대상이 undefined나 null 이면 평가를 멈추고 undefined를 반환한다.
const user = {}
alert(user?.address?.street)
//undefined, 에러가 발생하지 않는다단락 평가
- ? 은 왼쪽 평가대상에 값이 없으면 즉시 평가를 멈춘다. 이런 평가 방법을 단락평가(short-circuit)라고 부른다
- 따라서 함수 호출을 비롯한 ? 오른쪽에 있는 부가 동작은 ? 의 평가가 멈췄을 때 더는 일어나지 않는다.
?.() 와 ?.[]
- ?. 은 연산자가 아니다. 함수나 대괄호와 함께 동작하는 문법 구조체(syntax construct) 이다
- ex
const user1 = { admin() { alert('관리자 계정입니다')}}
const user2 = {}
user1.admin?.() // 관리자 계정입니다
user2.admin?.() //?.() 를 통해 존재 여부를 확인했다. user1에는 호출, user2는 에러없이 평가가 그냥 멈춘다.
대신 .[]를 사용해 객체 프로퍼티에 접근하면 읽을 수 있다.
요약
- obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
- obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
- obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함
참고 :
