자바스크립트 배열 메서드 완전 정복

자바스크립트를 배우다 보면 가장 많이 다루게 되는 게 바로 “배열”입니다. 그리고 배열을 다루기 위해 필수적으로 알아야 하는 것이 바로 배열 메서드들이죠. 이 포스팅에서는 대표적인 배열 메서드들을 예제와 함께 소개합니다.

📌 forEach()

  • 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행합니다.
const fruits = ["🍎", "🍌", "🍇"];
fruits.forEach((fruit, index) => {
  console.log(index, fruit);
});

🔄 map()

  • 배열의 각 요소를 변환하여 새로운 배열을 반환합니다.
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

🎯 filter()

  • 조건에 맞는 요소만 골라 새로운 배열을 반환합니다.
const scores = [80, 90, 60, 70];
const passed = scores.filter(score => score >= 70);
console.log(passed); // [80, 90, 70]

💰 reduce()

  • 배열을 하나의 값으로 줄이는 데 사용합니다 (합계, 평균 등 계산에 적합).
const prices = [100, 200, 300];
const total = prices.reduce((acc, cur) => acc + cur, 0);
console.log(total); // 600

🔍 find() & findIndex()

  • find()는 조건을 만족하는 첫 번째 요소를 반환
  • findIndex()는 조건을 만족하는 요소의 인덱스를 반환
const users = [
  { name: "Lee", age: 28 },
  { name: "Kim", age: 32 },
];

const user = users.find(u => u.age > 30);
console.log(user); // { name: "Kim", age: 32 }

✅ 정리

  • forEach: 단순 순회
  • map: 변환 → 새 배열
  • filter: 조건 추출 → 새 배열
  • reduce: 누적 계산
  • find, findIndex: 조건 검색