배열 메서드 해부: map filter reduce

핵심 개념

map은 각 요소를 변환한 새 배열 반환, filter는 조건을 만족하는 요소만 추출, reduce는 배열을 하나의 값으로 축약합니다. 세 메서드 모두 원본 배열을 변경하지 않습니다(불변성). 체이닝으로 연결 사용이 가능합니다. 각 메서드를 지우며 데이터 파이프라인이 붕괴되는 것을 확인하십시오.

코드 분석

JS📋 코드 (17줄)

const units = [
    { name: 'T-800', threat: 8 },
    { name: 'T-1000', threat: 10 },
    { name: 'T-X', threat: 9 },
    { name: 'T-600', threat: 6 },
  ];

  const names = units.map(u => u.name);
  const dangerous = units.filter(u => u.threat >= 9);
  const totalThreat = units.reduce((sum, u) => sum + u.threat, 0);

  document.write('<div style="color:#10b981;margin-bottom:6px;">MAP (이름 추출):</div>');
  document.write('<div style="margin-bottom:8px;">' + names.join(', ') + '</div>');
  document.write('<div style="color:#f59e0b;margin-bottom:6px;">FILTER (위협도 9 이상):</div>');
  document.write('<div style="margin-bottom:8px;">' + dangerous.map(u=>u.name).join(', ') + '</div>');
  document.write('<div style="color:#22c55e;margin-bottom:6px;">REDUCE (총 위협도):</div>');
  document.write('<div>' + totalThreat + '</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년 권장 패턴을 함께 알려줘.

⭐ 이것만 기억하세요

배열 메서드 해부: map filter reduce는 이 3가지만 확실히 잡으세요

1.for문으로 배열을 변환하면 매번 빈 배열 선언 → push 패턴을 반복해야 하고, 의도가 코드에 드러나지 않습니다

2.map은 변환, filter는 걸러내기, reduce는 누적 — 세 메서드가 배열 데이터 처리의 90%를 커버합니다

3.다음 챕터에서 배열과 함께 가장 많이 쓰이는 자료구조인 객체를 배웁니다

💬 이 챕터 질문 보기

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

→

진행도 10 / 34

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