옵셔널 체이닝 & 널 병합

핵심 개념

옵셔널 체이닝(?.)은 null/undefined인 경우 에러 없이 undefined를 반환합니다. 깊이 중첩된 객체 접근 시 안전합니다. 널 병합 연산자(??)는 null/undefined일 때만 오른쪽 값을 반환하고, OR(||)는 falsy 값(0, 빈 문자열 포함) 모두에서 오른쪽을 반환합니다. ?.를 지우며 에러가 어떻게 발생하는지 확인하십시오.

코드 분석

JS📋 코드 (20줄)

const unit = {
    name: 'T-800',
    weapons: { primary: 'plasma rifle', secondary: null },
    getStatus: () => 'ACTIVE',
  };

  const primary = unit?.weapons?.primary;
  const secondary = unit?.weapons?.secondary ?? 'NO SECONDARY';
  const missing = unit?.armor?.type ?? 'NO ARMOR';
  const status = unit?.getStatus?.();

  const score = 0;
  const orResult = score || 'DEFAULT';
  const nullResult = score ?? 'DEFAULT';

  document.write('<div style="color:#10b981;margin-bottom:4px;">optional chaining primary: ' + primary + '</div>');
  document.write('<div style="color:#f59e0b;margin-bottom:4px;">?? secondary: ' + secondary + '</div>');
  document.write('<div style="color:#888;margin-bottom:4px;">missing armor: ' + missing + '</div>');
  document.write('<div style="color:#22c55e;margin-bottom:4px;">method call: ' + status + '</div>');
  document.write('<div style="margin-top:8px;color:#888;">0 || DEFAULT: ' + orResult + ' | 0 ?? DEFAULT: ' + nullResult + '</div>');

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 JS '옵셔널 체이닝 & 널 병합' 코드의 잠재적 버그와
메모리 누수·this 바인딩·비동기 경합 위험을
분석해서 프로덕션 수준으로 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'옵셔널 체이닝 & 널 병합'를 실제 서비스에서 어떻게 쓰는지
구체적 사례 3개와 복사 가능한 코드를
초보자가 이해할 수 있게 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 JS '옵셔널 체이닝 & 널 병합' 관련 코드 전체의 실행 흐름을 분석하고
성능 병목과 최적화 방안을 우선순위로 알려줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'옵셔널 체이닝 & 널 병합'에서 개발자들이 가장 많이 하는
실수 Top 3을 솔직하게 알려주고
2026년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

옵셔널 체이닝 & 널 병합은 이 3가지만 확실히 잡으세요

1.중첩 객체에서 obj.a.b.c를 접근할 때 중간에 null이 있으면 TypeError로 앱 전체가 멈춥니다

2.?.는 중간 값이 null/undefined면 undefined를 반환하고, ??는 null/undefined일 때만 기본값을 적용합니다

3.다음 챕터에서 클래스 이전의 상속 메커니즘인 프로토타입 체인을 배웁니다

💬 이 챕터 질문 보기

JS · CH.29 — 질문하거나 답변을 확인하세요

→

진행도 29 / 34

← 커리큘럼으로 ← 목록으로 (JavaScript)