?.와 ?? 결합
선택적 체이닝을 합리적인 기본값과 함께 사용합니다.
?.와 ?? 결합은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
완벽한 조합
옵셔널 체이닝과 널 병합은 함께 사용하도록 설계되었습니다. obj?.value ?? fallback 패턴은 중첩된 값을 안전하게 읽고 값이 없으면 기본값을 제공합니다. 현대적인 TypeScript에서 가장 유용한 관용구 중 하나입니다.
type User = { profile?: { name?: string } };
const u: User = {};
const name = u.profile?.name ?? 'Anonymous';
console.log(name);패턴의 작동 방식
먼저 ?.가 체인을 평가해 값 또는 undefined를 반환합니다. 그런 다음 ??가 그 결과를 확인합니다. 결과가 null 또는 undefined이면 대체값을 사용합니다. 연산자 두 개로 깔끔한 표현 하나를 만들 수 있습니다.
type Cfg = { server?: { port?: number } };
const cfg: Cfg = { server: {} };
const port = cfg.server?.port ?? 8080;
console.log(port);결과의 타입
체인은 T | undefined를 생성합니다. ??는 undefined를 제거하고 대체값의 타입과 유니언합니다. 대체값의 타입이 일치하면 최종 타입은 T만 남으므로 undefined를 더 처리할 필요가 없습니다.
type Cfg = { timeout?: number };
const cfg: Cfg = {};
const timeout: number = cfg.timeout ?? 30;
console.log(timeout + 5); // number, safe arithmetic유효한 거짓 값 보존하기
??는 null 또는 undefined인 경우에만 작동하므로, 체인을 통해 가져온 유효한 0은 그대로 보존됩니다. 대체값은 속성이 실제로 없을 때만 적용됩니다.
type Audio = { settings?: { volume?: number } };
const a: Audio = { settings: { volume: 0 } };
console.log(a.settings?.volume ?? 50); // 0, not 50깊이 중첩된 설정에 접근하기
깊이 중첩된 설정에 접근할 때는 여러 ?. 단계를 연결하고 마지막에 ?? 하나를 사용합니다. 어느 연결 지점이든 없으면 기본값으로 깔끔하게 대체됩니다.
type Cfg = { db?: { pool?: { max?: number } } };
const cfg: Cfg = { db: {} };
const maxPool = cfg.db?.pool?.max ?? 10;
console.log(maxPool);API 응답의 기본값
애플리케이션 프로그래밍 인터페이스 응답에는 선택적 필드가 빠져 있는 경우가 많습니다. 이 조합 패턴을 사용하면 응답을 안전하게 읽고 적절한 기본값으로 대체할 수 있어, 이후의 코드를 단순하고 오류 없이 유지할 수 있습니다.
type Res = { data?: { items?: string[] } };
const res: Res = { data: {} };
const items = res.data?.items ?? [];
console.log('Item count:', items.length);메서드 결과와 함께 사용하기
함수나 메서드 호출 결과에 체인을 연결하고 기본값을 지정할 수도 있습니다. 호출 결과가 null 또는 undefined이면 대체값이 사용됩니다.
type Store = { find?: () => string | undefined };
const store: Store = { find: () => undefined };
const result = store.find?.() ?? 'default';
console.log(result);장황한 조건 검사 피하기
이 연산자들이 없었다면 여러 줄로 null을 확인하는 코드를 작성해야 했습니다. 이 조합 관용구는 전체 코드 블록을 표현 하나로 바꾸므로 안전성을 잃지 않으면서 가독성을 높여 줍니다.
type User = { name?: string };
const u: User = {};
// Old: let n; if (u && u.name) n = u.name; else n = 'Guest';
const n = u?.name ?? 'Guest';
console.log(n);다른 조회로 대체하기
?? 뒤의 대체값 자체를 또 다른 체인 조회로 만들 수도 있습니다. 그러면 최종적인 리터럴 기본값을 사용하기 전에 보조 데이터 원본을 시도할 수 있습니다.
type Prefs = { theme?: string };
const userPrefs: Prefs = {};
const sitePrefs: Prefs = { theme: 'light' };
const theme = userPrefs?.theme ?? sitePrefs?.theme ?? 'dark';
console.log(theme);요소 접근과 함께 사용하기
이 패턴은 배열 요소에 접근할 때도 사용할 수 있습니다. ?.[i]를 통해 요소를 읽고 ??로 기본값을 지정하면 됩니다.
type Data = { tags?: string[] };
const d: Data = { tags: [] };
const first = d.tags?.[0] ?? 'none';
console.log(first);실제 설정 판독기
지금까지 배운 내용을 하나로 합쳐 보겠습니다. 선택적인 계층을 안전하게 따라가면서 사용할 수 있는 값을 반드시 반환하는 설정 판독기입니다. 실제 TypeScript 개발에서 자주 작성하게 될 코드입니다.
type Settings = { ui?: { lang?: string } };
function getLang(s: Settings): string {
return s.ui?.lang ?? 'en';
}
console.log(getLang({ ui: { lang: 'tr' } }), getLang({}));간단한 확인
?.와 ??를 함께 사용하는 방법에 대한 이해를 확인해 보세요.
복습: ?.와 ?? 조합
obj?.value ?? fallback 관용구를 배웠습니다.
?.는 안전하게 아래로 내려가 값 또는undefined를 반환합니다.??는 결과가 null 또는 undefined일 때만 기본값을 제공합니다.- 최종 타입에서는
undefined가 사라져 깔끔한T가 되는 경우가 많습니다. 0과 같은 유효한 거짓 값은 보존됩니다.
다음에는 선택적 호출과 선택적 요소 접근을 알아봅니다.
type Cfg = { limit?: number };
const c: Cfg = {};
const limit = c?.limit ?? 100;
console.log(limit);자주 묻는 질문
“?.와 ?? 결합” 강의는 무료인가요?
네 — “?.와 ?? 결합” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“?.와 ?? 결합”에서 뭘 배우나요?
선택적 체이닝을 합리적인 기본값과 함께 사용합니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“?.와 ?? 결합” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.