[Javascript] Optional chaining (?.)

▶ Optional Chaining

Js 의 Optional Chaining 은 객체 속성이나 메소드에 접근할 때 해당 객체가 null 또는 undefined 인 경우 발생하는 TypeError 예외를 방지할 수 있는 기능이다. 

 

name, address 정보를 가진 person 객체가 있다.

const person = {
  name: "John",
  address: {
    city: "New York",
    state: "NY"
  }
};

 

person 객체에서 address 속성의 city 값을 가져오는 코드를 작성하고자 할 때, 일반적으로는 다음과 같은 코드를 작성할 수 있다.

const city = person.address.city;

 

하지만 ! 만약 person 객체가 null 또는 undefined 라면 .. ?

=> TypeError 예외가 발생하게 된다. 

이를 방지하기 위해 Optional Chaining 을 사용해 해결해보자

const city = person?.address?.city;

Optional Chaining 연산자 '?.' 를 사용하면

person 객체가 null 또는 undefined 인 경우에는 undefined 를 반환하고,

그렇지 않은 경우에는 정상적을 city 값을 가져올 수 있다. 

 

---

▶ 논리연산자 && 와 함께 사용하는 Optional Chaining

 

▷ && 

&& 연산자는 좌항 피연산자가 true 로 평가될 때, 우항 피연산자를 반환한다.

const x = 10;
const y = 20;

const result = x < y && "x is less than y"; // "x is less than y"

좌항피연산자 (x < y) 가 true 로 평가되므로

우항 피연산자 'x is less than y' 가 반환된다.

 

좌항 피연산자를 (x > y) 로 변경하면 false 로 평가되므로 

result 변수에는 false 가 할당된다.

 

▷ &&  와  ?.

const city = person?.address && person.address.city;

Optional Chaining '?.' 연산자는 person 객체 또는 address 객체가 null 이나 undefined 인 경우에는 'undefined' 를 반환한다. (null 과 undefined 는 falsy 한 값이기 때문에 좌항 피연산자 결과값이 반환되는거임) 

 

그리고 && 를 사용하여 'person?.address' 가 존재하는 경우에만 'person.address.city' 를 반환한다.

 

옵셔널체이닝 연산자 ?. 와 논리연산자 && 를 함께 사용하면 객체의 속성에 안전하게 접근할 수 있고 간결한 코드를 작성할 수 있다.