구조분해 할당 & 스프레드

핵심 개념

배열 구조분해는 순서 기반, 객체 구조분해는 키 이름 기반으로 값을 추출합니다. 기본값 설정과 나머지 요소 수집(rest)이 가능합니다. 스프레드 연산자(...)는 배열/객체를 펼쳐서 복사하거나 병합합니다. 함수 매개변수에서도 구조분해를 사용할 수 있습니다. 구조분해 코드를 지우며 변수 추출 방식의 변화를 확인하십시오.

코드 분석

JS📋 코드 (16줄)

const [first, second, ...rest] = ['T-800', 'T-1000', 'T-X', 'T-600'];

  const { model, threat = 5, ...others } = { model: 'T-800', status: 'ACTIVE', location: 'LA' };

  const arr1 = [1, 2, 3];
  const arr2 = [4, 5, 6];
  const merged = [...arr1, ...arr2];

  const obj1 = { name: 'T-800', energy: 100 };
  const obj2 = { mission: 'TERMINATE', energy: 80 };
  const combined = { ...obj1, ...obj2 };

  document.write('<div style="color:#10b981;margin-bottom:4px;">ARRAY: first=' + first + ' second=' + second + ' rest=[' + rest + ']</div>');
  document.write('<div style="color:#f59e0b;margin-bottom:4px;">OBJECT: model=' + model + ' threat=' + threat + '(default)</div>');
  document.write('<div style="color:#22c55e;margin-bottom:4px;">SPREAD ARR: [' + merged + ']</div>');
  document.write('<div style="color:#888;">SPREAD OBJ energy: ' + combined.energy + ' (obj2 덮어씀)</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, obj.b, obj.c를 반복하면 코드가 장황해지고 수정 시 누락이 생깁니다

2.구조분해는 {a, b} = obj로 값을 추출하고, 스프레드(...)는 배열이나 객체를 펼쳐서 복사·병합합니다

3.다음 챕터에서 코드 실행 중 발생하는 예외를 잡아 처리하는 try-catch를 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 19 / 34

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