JavaScript Array 메서드 정리 (map, filter, reduce 등)

 

안녕하세요, 오늘은 JavaScript에서 가장 많이 사용되는 Array(배열) 메서드들에 대해 완전 정리해보겠습니다. 배열 메서드는 데이터 처리의 핵심이 되는 기능들로, 실무에서 매일 사용하게 되는 필수 도구들입니다. 각 메서드의 사용법과 실제 예제 코드를 통해 확실하게 익혀보도록 하겠습니다.

1. 배열 변환 메서드 - map(), filter(), reduce()

가장 핵심적인 배열 변환 메서드들입니다. 이 세 메서드만 제대로 알아도 대부분의 배열 처리 작업을 효율적으로 수행할 수 있습니다.

map() 메서드는 배열의 각 요소를 변환하여 새로운 배열을 생성합니다:

const numbers = [1, 2, 3, 4, 5];

// 각 숫자를 2배로 변환
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// 객체 배열에서 특정 속성만 추출
const users = [
  { name: '김철수', age: 25 },
  { name: '이영희', age: 30 },
  { name: '박민수', age: 28 }
];
const names = users.map(user => user.name);
console.log(names); // ['김철수', '이영희', '박민수']

 

filter() 메서드는 조건에 맞는 요소들만 골라서 새로운 배열을 만듭니다:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 짝수만 필터링
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// 나이가 30 이상인 사용자만 필터링
const adults = users.filter(user => user.age >= 30);
console.log(adults); // [{ name: '이영희', age: 30 }]

 

reduce() 메서드는 배열의 모든 요소를 하나의 값으로 축약합니다:

const numbers = [1, 2, 3, 4, 5];

// 배열의 모든 요소 합계
const sum = numbers.reduce((acc, current) => acc + current, 0);
console.log(sum); // 15

// 최댓값 찾기
const max = numbers.reduce((acc, current) => Math.max(acc, current));
console.log(max); // 5

// 객체로 그룹화
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
const fruitCount = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});
console.log(fruitCount); // { apple: 2, banana: 2, orange: 1 }

 

2. 배열 검색 메서드

배열에서 특정 요소를 찾거나 조건을 확인하는 메서드들입니다:

• find() : 조건에 맞는 첫 번째 요소 반환
• findIndex() : 조건에 맞는 첫 번째 요소의 인덱스 반환
• includes() : 특정 요소가 배열에 있는지 확인
• indexOf() : 특정 요소의 인덱스 반환
• some() : 하나라도 조건을 만족하면 true
• every() : 모든 요소가 조건을 만족하면 true

const users = [
  { id: 1, name: '김철수', age: 25, active: true },
  { id: 2, name: '이영희', age: 30, active: false },
  { id: 3, name: '박민수', age: 28, active: true }
];

// find() - 특정 조건의 첫 번째 요소 찾기
const activeUser = users.find(user => user.active);
console.log(activeUser); // { id: 1, name: '김철수', age: 25, active: true }

// findIndex() - 요소의 인덱스 찾기
const inactiveIndex = users.findIndex(user => !user.active);
console.log(inactiveIndex); // 1

// includes() - 배열에 특정 값이 있는지 확인
const ages = [25, 30, 28];
console.log(ages.includes(30)); // true

// some() - 하나라도 조건을 만족하는지 확인
const hasAdult = users.some(user => user.age >= 30);
console.log(hasAdult); // true

// every() - 모든 요소가 조건을 만족하는지 확인
const allActive = users.every(user => user.active);
console.log(allActive); // false

 

 

 

3. 배열 조작 메서드

배열의 요소를 추가, 제거, 정렬하는 메서드들입니다. 원본 배열을 변경하는 메서드와 새 배열을 반환하는 메서드로 구분됩니다:

원본 배열을 변경하는 메서드들:

let fruits = ['apple', 'banana'];

// push() - 배열 끝에 요소 추가
fruits.push('orange');
console.log(fruits); // ['apple', 'banana', 'orange']

// pop() - 배열 끝 요소 제거 및 반환
const lastFruit = fruits.pop();
console.log(lastFruit); // 'orange'
console.log(fruits); // ['apple', 'banana']

// unshift() - 배열 앞에 요소 추가
fruits.unshift('grape');
console.log(fruits); // ['grape', 'apple', 'banana']

// shift() - 배열 앞 요소 제거 및 반환
const firstFruit = fruits.shift();
console.log(firstFruit); // 'grape'

// sort() - 배열 정렬
const numbers = [3, 1, 4, 1, 5];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 1, 3, 4, 5]

// reverse() - 배열 순서 뒤집기
numbers.reverse();
console.log(numbers); // [5, 4, 3, 1, 1]

 

새 배열을 반환하는 메서드들:

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

// concat() - 배열 합치기
const combined = arr1.concat(arr2);
console.log(combined); // [1, 2, 3, 4, 5, 6]

// slice() - 배열의 일부 추출
const sliced = combined.slice(1, 4);
console.log(sliced); // [2, 3, 4]

// 스프레드 연산자를 이용한 배열 합치기 (ES6+)
const spreadCombined = [...arr1, ...arr2];
console.log(spreadCombined); // [1, 2, 3, 4, 5, 6]

// splice() - 요소 추가/제거 (원본 배열 변경)
const fruits = ['apple', 'banana', 'orange'];
const removed = fruits.splice(1, 1, 'grape', 'kiwi');
console.log(fruits); // ['apple', 'grape', 'kiwi', 'orange']
console.log(removed); // ['banana']

 

4. 배열 순회 메서드

배열의 각 요소를 순회하며 작업을 수행하는 메서드들입니다:

const users = [
  { name: '김철수', age: 25 },
  { name: '이영희', age: 30 },
  { name: '박민수', age: 28 }
];

// forEach() - 각 요소에 대해 함수 실행
users.forEach((user, index) => {
  console.log(`${index + 1}. ${user.name} (${user.age}세)`);
});
// 출력:
// 1. 김철수 (25세)
// 2. 이영희 (30세)
// 3. 박민수 (28세)

// for...of 문을 사용한 순회 (ES6+)
for (const user of users) {
  console.log(`이름: ${user.name}, 나이: ${user.age}`);
}

// for...in 문을 사용한 인덱스 순회
for (const index in users) {
  console.log(`인덱스 ${index}: ${users[index].name}`);
}

 

5. 실무에서 자주 사용하는 패턴

실제 개발에서 자주 사용되는 배열 메서드 조합 패턴들을 소개합니다:

const products = [
  { id: 1, name: '노트북', price: 1000000, category: 'electronics', inStock: true },
  { id: 2, name: '마우스', price: 30000, category: 'electronics', inStock: false },
  { id: 3, name: '키보드', price: 80000, category: 'electronics', inStock: true },
  { id: 4, name: '책상', price: 200000, category: 'furniture', inStock: true }
];

// 패턴 1: 필터 + 맵 - 재고가 있는 전자제품의 이름만 추출
const availableElectronics = products
  .filter(product => product.category === 'electronics' && product.inStock)
  .map(product => product.name);
console.log(availableElectronics); // ['노트북', '키보드']

// 패턴 2: 필터 + 리듀스 - 재고가 있는 상품의 총 가격
const totalPrice = products
  .filter(product => product.inStock)
  .reduce((sum, product) => sum + product.price, 0);
console.log(totalPrice); // 1280000

// 패턴 3: 맵 + 필터 - 할인된 가격 중 50만원 이하인 것들
const discountedPrices = products
  .map(product => ({ ...product, discountPrice: product.price * 0.8 }))
  .filter(product => product.discountPrice <= 500000)
  .map(product => ({ name: product.name, discountPrice: product.discountPrice }));
console.log(discountedPrices);

// 패턴 4: 중복 제거
const categories = [...new Set(products.map(product => product.category))];
console.log(categories); // ['electronics', 'furniture']

 

6. 성능 고려사항

배열 메서드 사용 시 알아두면 좋은 성능 팁들입니다:

• 메서드 체이닝 주의: 각 메서드마다 새 배열을 생성하므로 큰 배열에서는 성능 영향
• for 루프 vs 배열 메서드: 단순 순회는 for문이 더 빠르지만, 가독성과 유지보수성 고려
• find vs filter: 하나만 찾으면 되는 경우 find() 사용
• 불변성 유지: 원본 배열 변경을 피하고 새 배열 반환하는 메서드 선호

 

 

 

오늘은 JavaScript 배열 메서드들을 체계적으로 정리해보았습니다. 이 메서드들은 함수형 프로그래밍의 핵심이 되는 도구들로, 익숙해지면 더 간결하고 읽기 쉬운 코드를 작성할 수 있습니다. 특히 map, filter, reduce는 실무에서 매일 사용하게 되니 반복 연습을 통해 완전히 자신의 것으로 만드시기 바랍니다. 다음에는 ES6+ 문법과 함께 사용하는 고급 배열 활용법에 대해서도 다뤄보도록 하겠습니다.