[JavaScript] 옵셔널체이닝(?.) 사용법 총정리JavaScript 옵셔널체이닝(?.) 사용법 정리

자바스크립트 옵셔널 체이닝

 

---

 

목차

 

객체 속성 접근 시 발생하는 문제

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

옵셔널 체이닝 사용법

||와?? 차이점

주의할 점

정리

 

---

 

---

[객체 속성 접근 시 발생하는 문제]

자바스크립트로 객체를 다루다 보면 깊이 중첩된 속성에 접근해야 하는 상황이 생긴다.

이때 중간에 속성이 존재하지 않으면 TypeError가 발생하며 코드 실행이 중단된다.

예를 들어 다음과 같은 자바스크립트 객체가 있다.

const user = {
  profile: {
    name: "홍길동",
    contact: {
      email: "hong@example.com",
    },
    address: {
      city: "서울",
      zipCode: "06123",
    }
  },
  orders: [
    { id: 1, item: "노트북" },
    { id: 2, item: "키보드" }
  ],
  getProfile() {
    return "사용자 프로필입니다.";
  }
};

 

객체 user의 전화번호가 필요한 상황이다.

콘솔 로그로 user profile.contact.phone에 접근하면 phone이 존재하지 않아 Cannot read properties of undefined오류가 발생한다.

// 존재하지 않는 속성 접근 시 오류 발생
console.log(user.profile.contact.phone); // undefined
// Error: Cannot read properties of undefined

기존에는 이 문제를 피하기 위해 조건문이나 && 연산자를 중첩해서 안전하게 접근했다.

하지만 아래와 같이 코드를 작성하면 코드가 길어지고 가독성이 떨어지는 문제가 있었다.

if (user &&user.profile && user.profile.contact && user.profile.contact.phone) {
  console.log(user.profile.address.phone); // 출력되지 않음
}

// 혹은
console.log(user && user.profile && user.profile.contact && user.profile.contact.phone); // undefined

 

이러한 문제를 해결하기 위해 ES2020에서는 옵셔널체이닝(Optional Chaining, ?.) 문법이 도입되었다.

 

 

 

---

[옵셔널 체이닝(Optional Chaining,?.)이란?]

옵셔널 체이닝은 존재하지 않을 수 있는 객체 속성에 안전하게 접근할 수 있게 해주는 문법이다.

console.log(user?.profile?.contact?.phone) //undefined (에러 발생 x)

앞의 값이 null 또는 undefined라면 평가를 중단하고 undefined를 반환한다.

즉, 조건문 없이도 안전하게 속성에 접근할 수 있는 문법이다.

옵셔널 체이닝을 잘 활용하면 예외 상횡에서도 안정적으로 동작하는 코드를 작성할 수 있다.

API 응답 데이터나 사용자 입력값처럼 존재하 확실하지 않은 데이터를 다룰 때 유용하다.

 

 

---

[옵셔널 체이닝 사용법]

1. 객체 속성 접근
2. 배열 요소 접근
3. 함수 호출
4. null 병합 연산자와의 조합

 

1. 객체 속성 접근

// phone은 없는 속성
const phone = user?.profile?.contact?.phone;
console.log(phone); // undefined (에러 발생 X)

 

2. 배열 요소 접근

const firstOrder = user?.orders?.[0];
console.log(firstOrder); // { id: 1, item: "노트북" }

const thirdOrder = user?.orders?.[2];
console.log(thirdOrder); // undefined (에러 발생 X)

 

3. 함수 호출

console.log(user.getProfile?.()); // "사용자 프로필입니다."

const guest = {};
console.log(guest.getProfile?.()); // undefined

 

4. null 병합 연산자와의 조합

옵셔널체이닝은 ?? 와 ||가 자주 함께 사용된다.

값이 없을 경우 기본값을 설정하기 위해서다.

const city1 = user?.profile?.address?.city ?? "Unknown city";
console.log(city1); // "서울"

const guest = {};
const city2 = guest?.profile?.address?.city ?? "Unknown city";
console.log(city2); // "Unknown city"

 

 

---

[ ||와?? 차이점]

• ||
  • 왼쪽 값이 falsy면 오른쪽 값을 반환
  • falsy 값 : 0, "", false, null, undefined, NaN
• ??
  • 오직 Null이나 undefined일 때만 오른쪽 기본값을 반환
  • 0, "", false 같은 값은 그대로 유지

 

---

[주의할 점]

1. Reference는 잡지 못한다.
2. 읽기/삭제만 가능, 쓰기는 불가
3. 남용하지 말아야 한다.

 

1. Reference는 잡지 못한다.

선언조차 되지 않은 변수에서는 사용할 수 없다.

console.log(a?.b);
// ReferenceError: a is not defined

선언만 되어 있으면 안전하게 접근 가능하다

let obj; 
console.log(obj?.prop); // undefined

 

2. 읽기/삭제만 가능, 쓰기는 불가

옵셔널체이닝은 값을 반환만 하기 때문에 직접 할당에는 사용할 수 없다.

delete user?.profile?.name; // 안전하게 삭제 가능
user?.profile?.name = "Violet"; // SyntaxError

 

3. 남용하지 말 것

꼭 존재해야 하는 값에는 사용하지 않는 게 좋다.

예를 들어 user객체는 필수라면 user?.profile 대신 user.profile을 사용하는 것이 디버깅에 유리하다.

그래야 실수로 user가 할당되지 않았을 때 에러가 발생하고 디버깅이 쉬워지기 때문이다.

그래서 반드시 존재 여부가 불확실한 값에만 선택적으로 사용하는 것이 좋다.

 

 

---

[정리]

옵셔널체이닝(?.)은 중첩된 객체 속성에 안전하게 접근할 수 있게 해주는 문법이다.

• 객체 속성 접근 : obj?.prop
• 배열 접근 : obj?.[props]
• 함수 호출 : obj?.method()
• ??와||을 함께 사용하는 기본값 설정 가능

옵셔널 체이닝 사용 적절 예 : 외부 API 데이터, 사용자 입력

사용 지양 예 : 필수 객체, 반드시 존재해야 하는 값

 

옵셔널 체이닝을 잘 활용하면 코드가 간결해지고 예외 상횡에서도 안정적을 동작할 수 있다.

꼭 필요한 값까지 옵셔널체이닝을 사용하면 버그를 놓치기 쉽다는 점을 기억해야 한다.

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

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

옵셔널 체이닝 '?.'

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Optional chaining - JavaScript | MDN