[Javascript] 자주 쓰이는 배열 메서드(map(), filter() 등)

프론트엔드 개발에서 자주 사용하는 배열 메서드

JavaScript 배열 메서드는 데이터 조작과 UI 업데이트에 자주 활용된다.
특히 map(), filter(), reduce(), forEach() 등은 프론트엔드에서 데이터를 효율적으로 처리하는 데 필수적이다.

1. map(): 배열 변환 (새로운 배열 반환)

• 배열의 각 요소를 변환하여 새로운 배열을 생성한다.
• 기존 배열을 변경하지 않는다.

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
 
console.log(doubled); // [2, 4, 6, 8, 10]

 

프론트엔드 활용 예시

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];
 
const userNames = users.map(user => user.name);
console.log(userNames); // ["Alice", "Bob"]

데이터 변환이 필요할 때 사용 (예: API 응답 데이터 가공, UI 리스트 생성)

2. filter(): 조건에 맞는 요소만 남기기

• 배열에서 특정 조건을 만족하는 요소만 남긴 새로운 배열을 반환한다.

const numbers = [10, 25, 30, 45];
const filtered = numbers.filter(num => num >= 30);
 
console.log(filtered); // [30, 45]

 

프론트엔드 활용 예시

const products = [
  { name: "Laptop", price: 1500 },
  { name: "Mouse", price: 30 },
  { name: "Keyboard", price: 80 }
];
 
const expensiveProducts = products.filter(product => product.price > 100);
console.log(expensiveProducts);
/*
[
  { name: "Laptop", price: 1500 }
]
*/

리스트에서 특정 조건을 만족하는 요소만 보여줄 때 사용 (예: 검색 필터, 상품 리스트 필터링)

3. reduce(): 배열 값 누적 계산

• 배열의 요소를 순회하면서 값을 누적해 단일 결과를 만든다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, num) => acc + num, 0);
 
console.log(sum); // 15

 

프론트엔드 활용 예시

const cart = [
  { name: "Phone", price: 699 },
  { name: "Laptop", price: 1299 },
  { name: "Headphones", price: 199 }
];
 
const totalPrice = cart.reduce((acc, item) => acc + item.price, 0);
console.log(totalPrice); // 2197

배열 데이터를 합산하거나 특정 값을 계산할 때 사용 (예: 장바구니 총합 계산)

4. forEach(): 배열 요소 순회 (반환값 없음)

• 배열의 각 요소를 순회하면서 특정 동작을 수행한다.
• 새로운 배열을 반환하지 않는다.

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2));
// 2
// 4
// 6

 

프론트엔드 활용 예시

const buttons = document.querySelectorAll("button");
 
buttons.forEach(button => {
  button.addEventListener("click", () => {
    console.log("버튼 클릭됨!");
  });
});

배열을 순회하며 이벤트를 추가하거나 DOM 조작할 때 사용

5. find(): 특정 조건을 만족하는 첫 번째 요소 반환

• 조건을 만족하는 첫 번째 요소를 반환하며, 없으면 undefined를 반환한다.

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];
 
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: "Bob" }

배열에서 특정 요소를 찾을 때 사용 (예: 특정 ID를 가진 사용자 찾기)

6. some(): 조건을 만족하는 요소가 하나라도 있는지 확인

• 조건을 만족하는 요소가 하나라도 있으면 true, 없으면 false 반환

const numbers = [10, 20, 30, 40];
const hasLargeNumber = numbers.some(num => num > 25);
 
console.log(hasLargeNumber); // true

배열에서 특정 조건을 만족하는 요소가 존재하는지 확인할 때 사용 (예: 사용자 로그인 여부, 유효성 검사)

7. every(): 모든 요소가 조건을 만족하는지 확인

• 모든 요소가 조건을 만족하면 true, 그렇지 않으면 false 반환

const numbers = [10, 20, 30, 40];
const allPositive = numbers.every(num => num > 0);
 
console.log(allPositive); // true

배열의 모든 요소가 특정 조건을 만족하는지 확인할 때 사용 (예: 입력값 검증)

8. sort(): 배열 정렬

• 기본적으로 문자열 기준 정렬이므로 숫자는 정렬 방식 지정 필요

const numbers = [10, 2, 5, 30, 1];
numbers.sort((a, b) => a - b); // 오름차순 정렬
console.log(numbers); // [1, 2, 5, 10, 30]
 
numbers.sort((a, b) => b - a); // 내림차순 정렬
console.log(numbers); // [30, 10, 5, 2, 1]

 

프론트엔드 활용 예시

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 22 },
  { name: "Charlie", age: 30 }
];
 
users.sort((a, b) => a.age - b.age);
console.log(users);
/*
[
  { name: "Bob", age: 22 },
  { name: "Alice", age: 25 },
  { name: "Charlie", age: 30 }
]
*/

목록을 정렬할 때 사용 (예: 상품 가격 정렬, 이름순 정렬)

정리

메서드	기능	활용 예시
map()	배열 변환 (새 배열 반환)	리스트 UI 생성, 데이터 가공
filter()	특정 조건을 만족하는 요소만 반환	검색 필터, 조건부 리스트 표시
reduce()	배열 요소 누적 계산	장바구니 총합 계산, 평균값 계산
forEach()	배열 요소 순회	이벤트 추가, DOM 조작
find()	조건에 맞는 첫 번째 요소 찾기	특정 ID의 사용자 찾기
some()	조건을 만족하는 요소가 하나라도 있는지 확인	사용자 로그인 여부 체크
every()	모든 요소가 조건을 만족하는지 확인	입력값 검증
sort()	배열 정렬	상품 가격 정렬, 이름순 정렬

프론트엔드 개발에서 배열 메서드를 적절히 활용하면 데이터 가공과 UI 렌더링을 효율적으로 처리할 수 있다.