자바스크립트 - 선택적 체인

안녕하세요, 미래의 자바스크립트 마법사 여러분! ? 오늘은 선택적 체인( Optional Chaining)의 세계로 흥미로운 여정을 떠나보겠습니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 저는 친절한 안내자가 되어 단계별로 안내해드리겠습니다. 이 강의가 끝나면 프로처럼 체인을 사용할 수 있을 것입니다! 시작해보겠습니다!

존재하지 않는 프로퍼티 문제

거대한 도서관에서 책을 찾으려고 상상해보세요. "SF" 섹션이 3층 뒤쪽에 있을 것이라고 압니다. 하지만 도서관에 3층이 없거나 "SF" 섹션이 없다면 어떨까요? 이와 같은 문제는 자바스크립트에서 중첩된 객체를 다루는 경우 자주 마주치는 문제입니다.

예제를 보겠습니다:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi.books);

이 코드를 실행하면 오류가 발생합니다: "Cannot read property 'books' of undefined". 왜 그럴까요? library.fiction.sciFi가 존재하지 않기 때문입니다! 이제 선택적 체인이 구조물을 구원합니다.

자바스크립트에서 선택적 체인은 무엇인가요?

선택적 체인은 코드의 안전망과도 같습니다. 중첩된 객체 프로퍼티에 접근할 때 중간 프로퍼티가 존재하는지 않는지 신경쓰지 않아도 됩니다. ?. 연산자로 표시됩니다.

이전 예제를 선택적 체인으로 다시 작성해보겠습니다:

const library = {
fiction: {
fantasy: {
books: ['The Hobbit', 'Harry Potter']
}
}
};

console.log(library.fiction.sciFi?.books);

이제 오류가 발생하지 않고, 단순히 undefined를 반환합니다. "sciFi"가 존재하면 books를 주세요, 존재하지 않으면 걱정하지 마세요!

함수 호출과 선택적 체인

선택적 체인은 객체 프로퍼티뿐만 아니라 함수 호출에도 사용할 수 있습니다! 책을 대출할 수 있는 도서관 시스템이 있다고 가정해봅시다:

const library = {
fiction: {
fantasy: {
checkOut: function(book) {
console.log(`Checking out ${book}`);
}
}
}
};

library.fiction.fantasy.checkOut?.('The Hobbit');
library.fiction.sciFi?.checkOut?.('Dune');

이 예제에서 'The Hobbit'는 대출되지만, 'Dune'은 아무 일도 일어나지 않습니다. sciFi가 존재하지 않기 때문입니다. 오류가 없이 원활하게 진행됩니다!

표현식과 선택적 체인

선택적 체인은 대괄호 표기법과도 사용할 수 있습니다. 프로퍼티 이름이 동적으로 변하거나 특수 문자를 포함할 때 유용합니다:

const users = {
'123': { name: 'Alice', age: 30 },
'456': { name: 'Bob', age: 25 }
};

const userId = '789';
console.log(users[userId]?.name);

이제 '789' ID의 사용자가 없기 때문에 undefined를 반환하지만, 오류가 발생하지 않습니다.

"delete" 연산자와 선택적 체인

"delete" 연산자도 선택적 체인과 함께 사용할 수 있습니다. 프로퍼티가 존재하지 않을 때도 안전하게 삭제할 수 있습니다:

const obj = {
prop: {
innerProp: 'value'
}
};

delete obj.prop?.innerProp;
delete obj.nonExistent?.prop;

첫 번째 "delete"는 기대대로 작동하여 innerProp을 제거합니다. 두 번째는 아무 일도 일어나지 않지만, 오류를 발생시키지 않습니다.

선택적 체인과 짧은 회로

선택적 체인은 짧은 회로(short-circuiting) 기능을 가지고 있습니다. 왼쪽 부분이 null이나 undefined이면 평가를 중지하고 undefined를 반환합니다:

const obj = null;
console.log(obj?.prop?.subProp);  // undefined를 반환합니다

이는 "Cannot read property of null" 오류를 피하는 데 매우 유용합니다!

선택적 체인과 nullish 콜리스링 연산자

Nullish Coalescing 연산자(??)는 선택적 체인과 잘 작동합니다. Optional Chaining 결과가 null이나 undefined이면 기본 값을 제공할 수 있습니다:

const user = {
name: 'Alice',
details: {
age: 30
}
};

console.log(user.details?.job ?? 'unemployed');  // 'unemployed'를 반환합니다
console.log(user.details?.age ?? 'unknown');     // 30을 반환합니다

이는 프로퍼티가 존재하지 않을 때 기본 값을 제공하는 데 완벽합니다.

이제 다루었던 방법을 요약하는 표를 제공합니다:

방법	문법	설명
프로퍼티 접근	obj?.prop	안전하게 중첩된 객체 프로퍼티에 접근
함수 호출	func?.()	안전하게 존재하지 않을 수 있는 함수를 호출
표현식	obj?.[expr]	안전하게 동적이거나 특수한 이름을 가진 프로퍼티에 접근
"delete" 연산자	delete obj?.prop	안전하게 존재하지 않을 수 있는 프로퍼티를 삭제
짧은 회로	obj?.prop?.subProp	중간 부분이 null이나 undefined이면 평가를 중지
Nullish Coalescing과 함께	obj?.prop ?? defaultValue	Optional Chaining 결과가 null이나 undefined이면 기본 값을 제공

이제 여러분은 선택적 체인으로 자바스크립트 실력을 한 단계 업그레이드했습니다! 코딩은 LEGO로 만드는 것과 같아요 - 기본기를 다지면 언제든지 대작을 만들 수 있습니다. 계속 연습하고, 호기심을 유지하며, 행복하게 코딩하세요! ??‍??‍?

Credits: Image by storyset