[JS] 옵셔널 체이닝(Optional Chaining) `?.`

옵셔널 체이닝(Optional Chaining) `?.`

?.

 

: `?.` 앞의 평가 대상이 undefined /null이면(값이 없으면) 평가를 멈추고 undefined 반환

• 중첩 객체 내에 위치한 속성 값에 안전하게 접근
• `?.` 앞 평가 대상에만 동작⭕, 확장❌
• `?.` 앞의 변수는 꼭 선언되어 있어야 한다.

 

 

* 변수

?.prop

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

// user?. => user가 null이나 undefined인 경우만 처리
// user가 실제 값이 존재하는 경우엔 반드시 user.address 프로퍼티는 있어야 함
// 그렇지 않으면 user?.address.street의 두 번째 점 연산자(address.street)에서 에러 발생

 

 

 

* 함수

method?.()

let user1 = {
  admin() {
    alert("관리자 계정입니다.");
  }
}

let user2 = {};


user1.admin?.(); // 관리자 계정입니다.
user2.admin?.(); // 그냥 평가를 멈춤(에러 x)

 

 

 

* 객체

?.[prop]

let user1 = {
  firstName: "Violet"
};

let user2 = null;

let key = "firstName";


alert( user1?.[key] ); // Violet
alert( user2?.[key] ); // undefined
alert( user1?.[key]?.something?.not?.existing); // undefined

 

 

 

예제

function optionalChaining() {
  const topic = {
    _title: '매년 업데이트 되는 ECMAScript',

    getTitle() {
      return this._title;
    },

    setTitle(value) {
      this._title = value;
    },
  };

  console.log(topic?.getTitle?.()); // '매년 업데이트 되는 ECMAScript'
  console.log(topic?.getName?.()); // undefiend
}

 

 

---

 

Optional chaining - JavaScript | MDN

 

 

옵셔널 체이닝 '?.'