1. Optional Chaining이란?
Optional Chaining (?.)은 ES11(ECMAScript2020)에서 도입되었는데 Chaining 연산자와 유사하게 동작하지만 Chaining 연산자의 경우 '앞'의 평가 대상이 null이나 undefined인 경우 에러식을 반환하는 반면 Optional Chaining은 '앞'의 평가 대상이 null 또는 undefined인 경우에도 undefined를 반환해주고 그렇지 않다면 우항에 프로퍼티 참조(변수를 통해 변수값을 참조하듯이 객체의 프로퍼티에 접근해 프로퍼티 값을 참조하는 것)를 이어간다.
2. Optional Chaining을 왜 사용하는가?
Optional Chaining'?.'(?. 은 연산자가 아닌 특별한 문법 구조체[syntax construct]이다.)이 존재하기 이전에는 &&(And) 연산자를 사용해 실제로 해당 객체나 프로퍼티가 있는지 확인하는 방법을 사용했다. 하지만 이렇게 && 연산자를 이용해 연결해서 사용할 경우 코드가 아주 길어진다는 단점이 존재했다. 하지만 Optional Chaining은 간결한 표현식으로 작성이 가능했고 그로인해 가독성이 증가했다. 또한 속성값이 존재한다는 확실한 보증이 없는 객체를 탐색하는데 도움을 준다.
3. 언제 Optional Chaining을 사용하는가?
Optioanl Chaining은 프로퍼티가 없는 중첩 객체에 에러 없이 접근하고 싶을 때 사용한다.
4. Optional Chaining의 사용방식
obj.prop // obj가 존재하면 obj.prop을 반환하고 그렇지 않다면 undefined 반환
obj?.[prop] // obj가 존재하면 obj[prop]을 반환하고 그렇지 않다면 undefined 반환
obj.method() // obj의 메소드가 존재하면 메소드를 실행하고 그렇지 않다면 undefined 반환
obj?.method() // obj가 존재하면 obj.method()를 호출하고 그렇지 않다면 undefined 반환
5. Optional Chaining 사용시 주의 할 점
- Optional Chaining은 선언이 완료된 변수를 대상으로만 동작한다.
- ?. 앞의 값은 선언이 되어 있는 상태여야 한다. 선언이 되어 있지 않다면 에러가 발생한다.
- Optional Chaining은 존재하지 않아도 되는 대상에만 사용해야 한다.
- 읽기나 삭제에는 사용가능하지만, 쓰기에는 사용 불가능하다.
6. 참조
모던 자바스크립트 deep dive p.122
https://rootjang-dev.tistory.com/2
https://ko.javascript.info/optional-chaining
프론트엔드 개발자