0Pricing
Frontend Academy · 강의

배열 메서드: map, filter, reduce, find

수동 반복문 대신 고차 메서드로 배열을 변환하고, 필터링하고, 집계합니다. 메서드를 연결해 표현력 있는 데이터 파이프라인을 구성합니다.

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

배열 메서드를 사용하는 이유

명령형 for 반복문도 작동하지만 의도를 숨깁니다. 배열 고차 메서드는 어떻게 반복할지보다 무엇을 원하는지를 선언합니다. 이러한 메서드는 더 깔끔하고 테스트하기 쉬우며 조합할 수 있는 코드를 만들고, 일반 문장처럼 읽힙니다.

Array.map() — 모든 요소 변환

map()은 콜백에 의해 모든 요소가 변환된 새 배열을 반환합니다. 원본 배열은 변경되지 않습니다. 한 배열을 다른 배열로 변환해야 할 때 사용합니다.

const names = ['alice', 'bob', 'carol'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CAROL']

const prices = [10, 20, 30];
const withTax = prices.map(p => p * 1.2);
// [12, 24, 36]

Array.filter() — 일치하는 요소 선택

filter()는 콜백이 참으로 평가되는 요소만 포함하는 새 배열을 반환합니다. 콜백은 조건자 함수입니다.

const users = [
  { name: 'Alice', age: 22 },
  { name: 'Bob',   age: 17 },
  { name: 'Carol', age: 30 },
];
const adults = users.filter(u => u.age >= 18);
// [{ name: 'Alice', age: 22 }, { name: 'Carol', age: 30 }]

Array.reduce() — 값 누적하기

reduce(callback, initialValue)는 모든 요소를 하나의 값으로 누적합니다. 콜백은 누산기와 현재 요소를 받습니다. 초기값은 누산기의 시작 값입니다.

const prices = [10, 20, 30, 40];
const total = prices.reduce((sum, price) => sum + price, 0);
// 100

const tallied = ['a', 'b', 'a', 'c', 'b', 'a'].reduce((acc, letter) => {
  acc[letter] = (acc[letter] || 0) + 1;
  return acc;
}, {});
// { a: 3, b: 2, c: 1 }

Array.find() — 첫 번째 일치 항목

find()는 조건과 일치하는 첫 번째 요소를 반환하며, 일치하는 요소가 없으면 undefined를 반환합니다. ID나 속성 값으로 항목을 조회할 때 사용합니다.

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const bob = users.find(u => u.id === 2);
// { id: 2, name: 'Bob' }

const missing = users.find(u => u.id === 99);
// undefined

Array.findIndex()

findIndex()는 find()와 비슷하지만 일치하는 요소의 인덱스를 반환하며, 찾지 못하면 -1을 반환합니다. 배열에서 요소를 업데이트할 위치를 찾을 때 유용합니다.

const idx = users.findIndex(u => u.id === 2);
// 1

Array.some()과 Array.every()

some()은 하나 이상의 요소가 조건을 만족하면 true를 반환합니다. every()는 모든 요소가 조건을 만족할 때만 true를 반환합니다. 두 메서드 모두 결론이 나는 첫 결과에서 평가를 중단합니다.

const hasAdult = users.some(u => u.age >= 18);  // true if any adult
const allAdults = users.every(u => u.age >= 18); // true only if all adults

Array.flatMap() — 매핑 후 평탄화

flatMap()은 각 요소를 매핑한 다음 결과를 한 단계 평탄화합니다. .map(...).flat()과 같지만 더 효율적입니다.

const sentences = ['Hello world', 'Foo bar'];
const words = sentences.flatMap(s => s.split(' '));
// ['Hello', 'world', 'Foo', 'bar']

배열 메서드 연결하기

메서드는 새 배열을 반환하므로 연결해서 사용할 수 있습니다. 연결을 왼쪽에서 오른쪽으로 읽으십시오. 먼저 filter를 적용하고, 그다음 변환한 뒤, 마지막으로 집계합니다.

const result = products
  .filter(p => p.inStock)
  .map(p => ({ ...p, price: p.price * 0.9 })) // 10% discount
  .sort((a, b) => a.price - b.price)
  .slice(0, 5); // top 5 cheapest in-stock products

Array.at()과 Array.includes()

at(-1)은 마지막 요소를 가져옵니다. includes(value)는 값이 존재하는지 확인합니다. arr[arr.length - 1]이나 arr.indexOf(v) !== -1보다 훨씬 깔끔합니다.

const arr = [1, 2, 3, 4, 5];
arr.at(-1);        // 5
arr.at(-2);        // 4
arr.includes(3);   // true
arr.includes(99);  // false

불변성: 변경하지 않기

map, filter, reduce는 새 배열을 반환합니다. push, pop, splice는 원본을 변경합니다. React 상태에서는 상태를 직접 변경하지 말고, 전개 구문이나 map을 사용해 항상 새 배열을 만드십시오.

// Bad in React:
state.items.push(newItem); // mutates original

// Good:
const newItems = [...state.items, newItem]; // new array

빠른 확인

콜백이 true를 반환하는 요소로 이루어진 새 배열을 반환하는 배열 메서드는 무엇입니까?

복습: 배열 메서드

map()은 모든 요소를 변환합니다. filter()는 일치하는 요소를 선택합니다. reduce()는 하나의 값으로 누적합니다. find()는 첫 번째 일치 항목을 반환합니다. some()/every()는 포함 여부를 확인합니다. 이러한 메서드를 연결하면 중첩된 반복문을 읽기 쉬운 선언적 데이터 처리 흐름으로 바꿀 수 있습니다.

자주 묻는 질문

“배열 메서드: map, filter, reduce, find” 강의는 무료인가요?

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

“배열 메서드: map, filter, reduce, find”에서 뭘 배우나요?

수동 반복문 대신 고차 메서드로 배열을 변환하고, 필터링하고, 집계합니다. 메서드를 연결해 표현력 있는 데이터 파이프라인을 구성합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“배열 메서드: map, filter, reduce, find” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

  1. 배열 메서드: map, filter, reduce, find
  2. 객체 구조 분해와 전개
  3. 템플릿 리터럴과 선택적 체이닝
  4. 모듈: import와 export
← Frontend Academy(으)로 돌아가기