옵셔널 체이닝(Optional Chaining) 연산자: 예시와 특징
개발자들 사이에서 자주 나오는 옵셔널 체이닝(optinal chaining) 연산자에 대해서 자세히 알아보겠습니다. 이 연산자는 자바스크립트에서 객체의 키에 안전하게 접근할 수 있게 도와줍니다.
1. 옵셔널 체이닝 연산자란?
옵셔널 체이닝 연산자는 '?.'로 표시되며, 객체의 키에 접근할 때 해당 키가 존재하는지 여부를 체크하지 않고도 접근이 가능하게 해줍니다.
const value = obj?.key;
이 연산자가 도입되기 전에는 obj && obj.key의 형식으로 체크를 해야 했습니다. 하지만 옵셔널 체이닝 연산자를 사용하면 코드가 더 간결해지며, 가독성도 향상됩니다.
주요 특징:
- ?. 앞의 평가 대상이 **nullish (undefined 또는 null)**일 경우 평가를 멈추고 undefined를 반환합니다.
2. 옵셔널 체이닝 활용 시나리오
생각해보세요, 우리가 온라인 쇼핑몰의 사용자 정보와 그들의 주문 내역을 관리하는 시스템을 가지고 있다고 가정해봅시다. 사용자마다 주문 내역이 있을 수도, 없을 수도 있습니다. 만약 어떤 사용자의 최근 주문 상품 이름을 가져오려고 한다면 어떻게 할까요?
const users = {
minji: {
age: 28,
orders: [
{ id: 1, product: 'laptop' },
{ id: 2, product: 'phone' }
]
},
taeho: {
age: 32
}
}
전통적인 방법으로 taeho의 최근 주문 상품 이름을 가져오려고 하면, orders 배열이 존재하는지 확인하는 과정이 필요합니다.
const taehoLatestOrder =
users.taeho &&
users.taeho.orders &&
users.taeho.orders[0] ?
users.taeho.orders[0].product : 'No orders yet';
이 코드는 길고 복잡해 보입니다. 하지만 옵셔널 체이닝을 사용하면 다음과 같이 간결하게 표현할 수 있습니다.
const taehoLatestOrder = users.taeho?.orders?.[0]?.product || 'No orders yet';
이렇게 옵셔널 체이닝 연산자를 사용하면 코드의 가독성을 크게 향상시킬 수 있습니다. 코드의 복잡한 조건 체크를 줄이면서도 안전하게 데이터에 접근할 수 있게 도와줍니다.
3. 옵셔널 체이닝의 장점
옵셔널 체이닝 연산자는 코드를 작성할 때 다양한 이점을 제공합니다. 여기서 그 장점들을 자세히 알아보며 각 장점에 해당하는 예시 코드를 함께 확인해보겠습니다.
3.1. if문 줄임으로 코드 간결화
옵셔널 체이닝을 사용하면 깊게 중첩된 객체 구조에서 값에 접근하려 할 때, 해당 경로에 값이 존재하는지 매번 확인하는 번거로운 if문을 줄일 수 있습니다.
예시
기존 방법:
if (user && user.friends && user.friends.bob) {
console.log(user.friends.bob.age);
}
옵셔널 체이닝 사용:
console.log(user?.friends?.bob?.age);
이렇게 간결하게 코드를 작성할 수 있어 가독성이 향상되며, 코드의 길이도 줄일 수 있습니다.
3.2. nullish 연산자와의 조합
nullish 연산자(??)와 함께 사용하면, 값이 존재하지 않을 때 기본값을 설정하는 것이 매우 간편해집니다.
예시
const username = user?.info?.name ?? 'Guest';
위 코드에서 user?.info?.name의 값이 undefined나 null일 경우 'Guest'를 기본값으로 설정합니다.
3.3. 대괄호 표기법과의 호환
옵셔널 체이닝은 객체의 속성에 접근하는 일반적인 방법인 점 표기법뿐만 아니라 대괄호 표기법과도 잘 작동합니다.
예시
const key = 'location';
const city = user?.[key]?.city;
동적으로 속성의 이름을 가져와야 할 때 이러한 방식이 유용하게 사용됩니다.
3.4. 메서드 호출의 안전성 보장
존재하지 않을 수 있는 메서드를 호출할 때 옵셔널 체이닝을 사용하면, 해당 메서드가 없을 때 자동으로 평가가 중단되어 에러를 방지할 수 있습니다.
예시
user?.sayHello?.();
이렇게 옵셔널 체이닝 연산자를 활용하면, 객체의 속성이나 메서드의 존재를 확인하는 부가적인 코드 없이 안전하게 접근할 수 있게 됩니다.
4. 옵셔널 체이닝의 주의사항
옵셔널 체이닝 연산자는 코드의 간결성과 안전성을 향상시켜주는 강력한 도구이지만, 그만큼 주의해야 할 부분도 있습니다. 다음은 주의사항과 그에 대한 설명 및 예시 코드입니다.
1. 항상 존재해야 하는 값에는 사용하지 않는 것이 좋습니다.
옵셔널 체이닝은 값이 없을 수도 있는 경우에 사용하는 것이 바람직합니다. 만약 어떤 값이 반드시 존재해야 한다면, 옵셔널 체이닝을 사용하지 않고 에러를 발생시켜 개발자에게 알려주는 것이 더 좋습니다.
const user = {
name: "John",
address: {
city: "Seoul",
zipcode: "12345"
}
};
// 좋은 예
console.log(user.address.city); // "Seoul"
// 나쁜 예
console.log(user.address?.city);
위의 예에서 사용자의 주소는 반드시 있어야 하므로 옵셔널 체이닝을 사용하지 않는 것이 바람직합니다.
2. 옵셔널 체이닝 앞의 변수는 반드시 선언되어 있어야 합니다.
옵셔널 체이닝을 사용하더라도 앞의 변수가 선언되지 않았다면 참조 에러(ReferenceError)가 발생합니다. 따라서 옵셔널 체이닝을 사용하기 전에 변수의 선언 여부를 반드시 확인해야 합니다.
// 나쁜 예
console.log(notDeclaredVariable?.property); // ReferenceError: notDeclaredVariable is not defined
// 좋은 예
let possiblyUndefinedVariable;
console.log(possiblyUndefinedVariable?.property); // undefined
결론적으로, 옵셔널 체이닝은 특정 상황에서 매우 유용한 도구이지만, 그만큼 주의하여 사용해야 합니다. 코드의 가독성과 안전성을 동시에 고려하면서 옵셔널 체이닝의 장점을 최대한 활용하는 것이 중요합니다.
마치며
함께 읽으면 좋은 글
