<aside> 🍦 Optional Chaining에 대해서 공부하면서 기록합니다.

</aside>

Optional chaining

리덕스를 공부하던 와중에 발견한 간단하면서도 정말 꼭 필요한 자바스크립트 문법을 공부했다. 그 이름은 생소하게도 Optional Chaining. 이것은 말 그대로 체인된 요소들이 어떤 값을 참조하고 있는지 명시적으로 알려주지 않아도 깊숙한 곳까지 들어가서 속성의 값을 알 수 있는 방법이다.

작성 방식은 obj?.prop , obj?.value , func?.(args) , array?.index 형태로 ? 연산자를 사용해서 표현한다.

위의 말로는 정말 이해가 안된다. 바로 예제로 가보자.

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName); // -> undefined

adventurer 객체에서 dog 라는 요소가 있는지 없는지 모를 때 옵셔널 체이닝을 사용하면 편하다. 사용 방법은 조회하려는 객체에 알고 싶은 속성이 있는지 보고 ? 연산자로 체이닝을 시작해주면 된다.

위의 adventurer 객체에는 dog라는 속성이 없으므로 결과는 undefined를 반환한다. 위의 코드는 const dogName = adventurer.dog && adventurer.dog.name 과 명시적으로 동일하다.

객체에서 해당하는 요소가 있다면 그때 name이라는 속성까지 찾아서 알려줘 라는 뜻이다.