JavaScript 배열(Array) 고급 메서드 8가지 – 실무 예제로 배우는 활용법

 

 

안녕하세요 😊
JavaScript 배열은 정말 자주 쓰이는 자료구조입니다.
특히 ES6 이후 추가된 고급 배열 메서드를 잘 활용하면
코드가 훨씬 간결하고 직관적으로 바뀝니다.

이번 글에서는 실무에서 많이 쓰이는 배열 메서드 8가지를 예제와 함께 정리해보겠습니다.

---

📍 1. map() – 배열 변환

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

• 각 요소를 변환해 새로운 배열 반환
• 원본 배열 변경 없음

---

📍 2. filter() – 조건에 맞는 요소 추출

const users = [
  { name: "Kim", age: 28 },
  { name: "Lee", age: 17 }
];
const adults = users.filter(u => u.age >= 18);

• 조건식이 true인 요소만 반환

---

📍 3. reduce() – 누적 계산

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, cur) => acc + cur, 0);

• 합계, 평균, 그룹화 등 다양한 누적 계산 가능

---

📍 4. find() – 첫 번째 일치 값

const item = [5, 12, 8].find(n => n > 10);
console.log(item); // 12

• 조건에 맞는 첫 번째 요소 반환 (없으면 undefined)

---

📍 5. findIndex() – 첫 번째 일치 인덱스

const idx = ["a", "b", "c"].findIndex(ch => ch === "b");

• indexOf와 비슷하지만 조건식을 활용 가능

---

📍 6. some() – 하나라도 조건 만족?

const hasMinor = [18, 21, 17].some(age => age < 18);
console.log(hasMinor); // true

• 하나라도 조건식 true면 true 반환

---

📍 7. every() – 모두 조건 만족?

const allAdults = [18, 21, 30].every(age => age >= 18);

• 모두 true여야 true 반환

---

📍 8. flatMap() – 변환 + 평탄화

const arr = ["hi", "bye"];
const chars = arr.flatMap(str => str.split(""));
console.log(chars); // ['h','i','b','y','e']

• map() 후 flat() 1단계 실행과 동일

---

📍 실무 활용 예제 – 데이터 필터 & 변환

const orders = [
  { id: 1, items: ["apple", "banana"] },
  { id: 2, items: ["orange"] }
];

const allItems = orders.flatMap(o => o.items);
console.log(allItems); // ['apple', 'banana', 'orange']

 

---

✅ 마무리

배열 메서드를 적절히 조합하면
복잡한 로직도 간단하고 가독성 좋게 만들 수 있습니다.
조건 처리 → 변환 → 누적 계산 순서로 패턴화해보세요. 😊