?.와 ?? 결합하기
안전한 접근과 적절한 기본값을 함께 사용합니다.
?.와 ?? 결합하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
두 도구 함께 사용하기
옵셔널 체이닝 ?.은 없을 수 있는 값을 안전하게 읽고, 널 병합 ??은 기본값을 제공합니다. 두 기능을 함께 사용하면 깊이 중첩된 데이터를 읽고 깔끔하게 대체 처리할 수 있습니다.
const user = {};
console.log(user.profile?.name ?? "Anonymous");일반적인 패턴
a?.b ?? fallback 관용구는 값을 안전하게 읽고 결과가 널 값이면 기본값을 사용합니다. 이를 통해 장황한 방어적 확인 연쇄를 대신할 수 있습니다.
const data = { settings: { theme: "dark" } };
const theme = data.settings?.theme ?? "light";
console.log(theme); // "dark"값이 없을 때 대체하기
어느 연결 요소라도 널 값이면 ?.은 undefined를 반환하고, 그러면 ??가 이를 기본값으로 바꿉니다.
const data = {};
const theme = data.settings?.theme ?? "light";
console.log(theme); // "light"깊게 중첩된 구조
이 패턴은 깊게 중첩된 구조에도 확장해서 사용할 수 있으며, 마지막에 하나의 대체값만 지정하면 됩니다.
const res = { data: { user: { city: "Berlin" } } };
const city = res.data?.user?.city ?? "Unknown";
console.log(city); // "Berlin"유효한 거짓 값 유지하기
??는 널 값일 때만 기본값을 사용하므로, 연결된 구조에서 얻은 실제 0 값은 유지됩니다.
const cart = { items: [], count: 0 };
const count = cart?.count ?? 5;
console.log(count); // 0&& / || 함정과 비교
a && a.b || fallback로 작성하면 올바른 0이나 ""도 잘못 대체됩니다. ?.와 ??를 함께 사용하면 이를 피할 수 있습니다.
const cfg = { volume: 0 };
console.log(cfg && cfg.volume || 50); // 50, wrong
console.log(cfg?.volume ?? 50); // 0, correct함수 결과와 함께 사용하기
옵셔널 호출의 결과에도 기본값을 지정할 수 있으며, 두 연산자를 메서드 호출 앞뒤에 함께 사용할 수 있습니다.
const api = { fetchName: () => null };
const name = api.fetchName?.() ?? "default";
console.log(name); // "default"배열 요소 접근에 기본값 지정하기
이 패턴은 배열이나 동적 키에 대괄호로 접근할 때도 사용할 수 있습니다.
const state = { list: ["a"] };
const first = state.list?.[0] ?? "empty";
console.log(first); // "a"표시 문자열 만들기
불확실한 데이터로부터 안전하게 표시용 텍스트를 만드는 것이 실용적인 사용 사례입니다.
function label(order) {
return "Total: " + (order?.total ?? 0);
}
console.log(label(undefined)); // "Total: 0"우선순위 참고
?.은 ??보다 우선순위가 높으므로 a?.b ?? c는 (a?.b) ?? c로 해석됩니다. 이는 의도한 동작과 정확히 같습니다.
const u = { age: null };
console.log(u?.age ?? 18); // 18깔끔한 관용구
이 연산자들을 함께 사용하면 긴 방어적 코드를 읽기 쉬운 한 줄로 바꿀 수 있어 의도가 분명해집니다.
const profile = null;
console.log(profile?.bio?.length ?? 0); // 0빠른 확인
출력 결과를 예측해 보십시오.
요약
obj?.deep?.prop ?? fallback 관용구는 없을 수 있는 중첩 값을 읽고 결과가 null 또는 undefined일 때만 기본값을 제공합니다. &&/|| 방식과 달리 0이나 "" 같은 유효한 거짓 값도 유지합니다. ?.은 ??보다 우선순위가 높으므로 그룹화도 자연스럽게 올바르게 처리됩니다.
자주 묻는 질문
“?.와 ?? 결합하기” 강의는 무료인가요?
네 — “?.와 ?? 결합하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“?.와 ?? 결합하기”에서 뭘 배우나요?
안전한 접근과 적절한 기본값을 함께 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“?.와 ?? 결합하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.