옵셔널 체이닝 ?.

목차

1. 옵셔널 체이닝 등장 배경

2. 옵셔널 체이닝 ?.

3. ?.()   ?.[]

    3-1. 객체 내 함수의 존재 여부 확인

    3-2. 객체 내 프로퍼티의 존재 여부 확인

 

---

1. 옵셔널 체이닝 등장 배경

사용자 중 어떤 사람들은 주소를 등록하고 싶지 않을 수도 있다.

주소를 등록하지 않아 null인 상태로 남겨두면, 주소 정보에 접근했을 때 에러가 발생할 수 있다.

let bang = {};
console.log(bang.address.street);	// TypeError: Cannot read property 'address' of undefined

 

?. 이 추가되기 이전에는 && 연산자를 활용했었다.

let bang = {};
console.log(bang && bang.address);	// undefined

하지만 중첩 객체에서 이렇게 AND 연산자를 사용하면 코드가 아주 길어질 수 있다.

 

 

또 다른 예시로 JS로 페이지에 존재 하지 않는 요소에 접근할 때의 문제도 있다.

let element = document.querySelector('.my_element').innerHTML;

 

 

---

2. 옵셔널 체이닝 ?.

?. 의 '앞'의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.

그 외의 상황에서는 그 존재하는 값을 반환한다.

 

let bang = {};
console.log( bang?.address );	// undefined (에러 발생 안함)
console.log( bang?.address.street );	// undefined

 

?.의 특징을 정리해보자.

• ?. 앞의 변수는 반드시 선언되어 있어야 한다.
• ?. 는 단락평가를 하여 왼쪽 대상에 값이 없으면 즉시 평가를 멈춘다.
• ?. 는 연산자가 아니라 함수/대괄호와 함께 동작하는 문법 구조체이다.

---

3. ?.()  ?.[]

?.는 연산자가 아닌 문법 구조체라고 했다. 사용 예시를 보자.

 

1. 객체 내 함수의 존재 여부 확인

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

let user2 = {};

user1.admin?.();	// 관리자 계정입니다.
user2.admin?.();

 

• ?.()를 사용해 admin의 존재 여부를 확인했다.
  user1 : admin이 존재하므로 메서드가 호출 됨
  user2 : admin이 존재하지 않으나(null/undefined) 에러 없이 진행됨.

2. 객체 내 프로퍼티의 존재 여부 확인

let user1 = {
  firstName: "bang"
};

let user2 = null;
let key = "firstName";

console.log(user1?.[key]);	// bang
console.log(user2?.[key]);	// undefined
console.log(user1?.something?.not?.existing);	// undefined

• ?.[] 를 사용해 객체의 존재 여부가 확실하지 않아도 안전하게 프로퍼티를 읽을 수 있다.

 

3. delete와 ?.

delete 키워드와 조합하여 사용할 수도 있다.

delete user?.name;	// user가 존재하면 user.name을 삭제

user가 존재한다면 ?.는 user를 반환하기 때문에 delete user.name이 될 수 있다.

?. 는 이렇게 읽거나 삭제에서 사용할 수 있지만 작성(쓰기)은 불가능하다.

 

?. 은 왼쪽 대상이 없어도 괜찮은 경우에만 사용해야한다.

꼭 있어야하는데 없는 경우에 사용하면 에러를 발견하기 어렵기 때문이다.

 

 

참고

https://ko.javascript.info/optional-chaining

옵셔널 체이닝 '?.'