JavaScript Academy · 강의

선언적 데이터 변환

map, filter, reduce로 데이터를 변환합니다.

선언적 데이터 변환은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

선언형 방식과 명령형 방식

명령형 코드는 HOW를 말합니다(반복문, 카운터, 변경). 선언형 코드는 WHAT을 말합니다. map, filter, reduce와 같은 배열 메서드를 사용하면 수동 반복문 없이 변환을 설명할 수 있습니다.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map: 각 요소 변환하기

map은 같은 길이의 새 배열을 반환하며, 각 요소는 함수에 의해 변환됩니다. 원본은 변경되지 않습니다.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter: 일부 요소만 유지하기

filter는 predicate가 참으로 평가되는 요소만 포함한 새 배열을 반환합니다.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce: 하나의 값으로 축약하기

reduce는 값을 누적하여 배열을 하나의 값으로 축약합니다. 축약 함수와 초기값을 제공하세요.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

연산 연결하기

각 메서드가 새 배열을 반환하므로, 읽기 쉬운 처리 흐름으로 연결할 수 있으며 위에서 아래로 읽힙니다.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

실제적인 처리 흐름

filter, map, reduce를 결합하면 하나의 표현식으로 데이터 집합에 대한 질문에 답할 수 있습니다.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

새로운 형태로 매핑하기

map은 숫자뿐 아니라 객체의 형태도 바꿀 수 있습니다. 각 데이터 항목에서 필요한 속성만 추출하세요.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce로 무엇이든 만들기

reduce는 합계에만 사용하는 것이 아닙니다. 객체를 만들고, 데이터를 그룹화하고, 심지어 map과 filter를 다시 구현할 수도 있습니다.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

순서가 중요함

매핑하기 전에 필터링하면 버릴 요소를 변환하지 않아도 됩니다. 명확성과 효율성을 위해 비용이 적은 필터를 연결 과정의 앞쪽에 배치하세요.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

어디에서도 변경하지 않기

이 메서드들은 원본 배열을 절대 변경하지 않습니다. 따라서 처리 흐름이 안전하고 예측 가능하며, 함수형 방식에 완벽하게 들어맞습니다.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

중첩된 결과에는 flatMap 사용하기

map이 배열을 만들어 내는 경우 flatMap은 한 번의 단계로 매핑과 한 단계 평탄화를 수행합니다.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

빠른 확인

선언형 변환

복습

선언형 변환은 HOW가 아니라 WHAT을 설명합니다. map은 변환하고, filter는 선택하며, reduce는 하나의 값으로 축약합니다. 이들을 읽기 쉬운 처리 흐름으로 연결하세요. 어느 것도 원본을 변경하지 않으며, 먼저 필터링하는 것이 효율적이고, reduce는 어떤 구조든 만들 수 있습니다. map이 배열을 만들어 내면 flatMap을 사용하세요.

자주 묻는 질문

“선언적 데이터 변환” 강의는 무료인가요?

네 — “선언적 데이터 변환” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“선언적 데이터 변환”에서 뭘 배우나요?

map, filter, reduce로 데이터를 변환합니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“선언적 데이터 변환” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기