[항해99] Day25. 옵셔널 체이닝(Optional Chaining)이란?

👩🏻‍💻 Today I Learned 📚

 

 

✨ 옵셔널 체이닝이란?

그냥 스윽- 보고 지나갈 때는 삼항연산자에 쓴느거를 다르게 말하는건가? 라며 가볍게 생각하고 찾아봤는데 그런게 아니였다. ………
Optional Chaining은 ES2020에서 등장한 새로운 연산자로서 ‘?.’ 의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자(.)와 비슷하게 동작하지만 참조가 null 혹은 undefined여도 에러식을 리턴하지 않고 undefined 값을 리턴한다. 함수도 마찬가지다.

중첩된 오브젝트 프로퍼티에 접근하는 데에 가장 안전한 방법으로, 중간 프로퍼티가 존재하지 않은 경우에도 안전하게 접근이 가능하다.

 

✨ 왜 사용하는가?

Optional Chaining을 사용하므로 문법의 가독성이 올라가고 한결 간결한 표현식을 쓸 수 있다. 속성값이 존재한다는 확실한 보증이 없을 경우 그 객체를 탐색하는데 도움을 준다.

const animals = { 
cat: { 
    name: "나비" 
}, 
lion: { 
    name: "호랑이" 
} } 

const dogName = animals.dog?.name; 


console.log(dogName); 


output //undefined 

옵셔널 체이닝을 쓰지 않은 상황에서는 값을 찾으려고하면 에러식이 뜬다

 

optional chaining 연산자는 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.

예를 들어, 중첩된 구조를 가진 객체에서 obj가 있다. optional chaining이 없이 깊이 중첩된 하위 속성을 찾으려면, 다음과 같이 참조를 확인해야 한다:

let nestedProp = obj.first && obj.first.second;

👇🏻

let nestedProp = obj.first?.second;

웹개발에서는, 웹 API를 통하여 얻은 오브젝트를 다룰 일이 많다. 그런데, 잘못된 셀렉터 등을 사용하거나 존재하지 않는 오브젝트를 참조하는 경우에는 null을 리턴할 수 있다. 이 경우에 엘리먼트가 없다면 error가 발생하는데, 에러가 발생하면 프로세스들이 멈추기 때문에, 여기서 결과로 그냥 html = null을 받고싶다면 어떻게 해야 할까? 이럴 때 옵셔널 체이닝이 필요하다.

옵셔널 체이닝 👉🏻 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN

 

 

 

💜 회고

어제 점심을 먹고 체하는 바람에 TIL도 쓰지 못하고 기절하듯이 잠이 들었었던 어제 😓 그래도 개인과제는 어느정도 다 끝내고 쓰러진거라서 그나마 다행이였다 💦 개인 과제에서 요구했던 사항은 리덕스로 목록관리 / 파이어베이스 데이터관리였는데, 여기에다가 수정과 삭제 기능을 더했고, 데이터에 자료가 없을 때 보여주는 empty 컴포넌트도 만들었었는데, 로딩이 될 때마다 자료가 있을 때에도 잠시 보였다가 사라지는 것이다 … 그래서 스피너도 만들었더니 잘 가려졌다.조금 더 자연스러운 포퍼먼스를 구현했다!!