옵셔널 체이닝(optinal chaining)

옵셔널 체이닝 (Optional Chaining)은 JavaScript에서 객체의 속성을 안전하게 접근하고 그 속성이 존재하지 않을 때 발생하는 오류를 방지하기 위한 연산자입니다.

 

어떤 객체가 중첩된 속성을 가질 때, 그 중 일부 속성이 존재하지 않거나 null 또는 undefined일 수 있는 경우에 유용합니다.

 

옵셔널 체이닝 연산자는 ?.로 표시되며, 속성에 안전하게 접근할 때 사용됩니다.

 

특징

1. 안전한 속성 접근: 객체의 속성에 안전하게 접근할 수 있습니다. 속성이 존재하지 않으면 자동으로 undefined를 반환하며, 이로 인해 오류가 발생하지 않습니다.
2. 객체 중첩 처리: 객체의 중첩된 속성에도 옵셔널 체이닝을 적용할 수 있습니다. 중첩된 속성 중 하나라도 없으면 그 부분에서 멈추고 undefined를 반환합니다.
3. 폴백 값 설정: 옵셔널 체이닝 연산자를 사용하면 속성이 존재하지 않을 때 반환할 폴백(대체) 값을 설정할 수 있습니다.

옵셔널 체이닝을 사용한 예시

const user = {
  name: "John",
  address: {
    city: "New York",
    postalCode: "10001",
  },
};

const city = user.address?.city; // "New York"
const country = user.address?.country; // undefined (address 객체 내에 country 속성이 없음)

옵셔널 체이닝은 JavaScript에서 객체 속성을 안전하게 탐색하고 데이터를 추출할 때 매우 유용합니다. 특히 API 응답이나 복잡한 데이터 구조를 다룰 때 사용됩니다. 이를 통해 오류가 발생할 가능성을 줄이고 코드를 더 견고하게 만들 수 있습니다.

 

옵셔널 체이닝을 남용하지 마세요.

?.는 존재하지 않아도 괜찮은 대상에만 사용해야 합니다.

사용자 주소를 다루는 위 예시에서 논리상 user는 반드시 있어야 하는데 address는 필수값이 아닙니다. 그러니 user.address?.street를 사용하는 것이 바람직합니다.

실수로 인해 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 합니다. 그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워집니다.

 

 

?.앞의 변수는 꼭 선언되어 있어야 합니다.

변수 user가 선언되어있지 않으면 user?.anything 평가시 에러가 발생합니다.

// ReferenceError: user is not defined
user?.address;

user?.anything을 사용하려면 let이나 const, var를 사용해 user를 정의해야 하죠. 이렇게 옵셔널 체이닝은 선언이 완료된 변수를 대상으로만 동작합니다.

 

?.()와 ?.[]

?.은 연산자가 아닙니다. ?.은 함수나 대괄호와 함께 동작하는 특별한 문법 구조체(syntax construct)입니다.

함수 관련 예시와 함께 존재 여부가 확실치 않은 함수를 호출할 때 ?.()를 어떻게 쓸 수 있는지 알아봅시다.

한 객체엔 메서드 admin이 있지만 다른 객체엔 없는 상황입니다.

 

 

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

let user2 = {};

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

두 상황 모두에서 user 객체는 존재하기 때문에 admin 프로퍼티는 .만 사용해 접근했습니다.

그리고 난 후 ?.()를 사용해 admin의 존재 여부를 확인했습니다. user1엔 admin이 정의되어 있기 때문에 메서드가 제대로 호출되었습니다. 반면 user2엔 admin이 정의되어 있지 않았음에도 불구하고 메서드를 호출하면 에러 없이 그냥 평가가 멈추는 것을 확인할 수 있습니다.

.대신 대괄호 []를 사용해 객체 프로퍼티에 접근하는 경우엔 ?.[]를 사용할 수도 있습니다. 위 예시와 마찬가지로 ?.[]를 사용하면 객체 존재 여부가 확실치 않은 경우에도 안전하게 프로퍼티를 읽을 수 있습니다.

 

 

let user1 = {
  firstName: "Violet"
};

let user2 = null; // user2는 권한이 없는 사용자라고 가정해봅시다.

let key = "firstName";

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

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