[JavaScript] 배열을 다루는 forEach & map & reduce & filter 메서드

 

• forEach
• map
• reduce
• filter

---

오늘은 배열을 다루는 4가지 메서드에 대해서 알아보려고 한다.

 

배열을 다루는 메서드는 다양한데, 그 중 가장 많이 사용한다고 생각하는

 

forEach(), map(), reduce(), filter()에 대해서 알아보자.

---

- array.forEach()

 

forEach()는 배열의 각 요소에 대해 부작용(side effect)을 발생시키는 작업을 수행할 때 사용한다.

 

특징으로는, 반환값이 없으며, 원본 배열을 변경하지 않는다는 특징이 있다.

 

주로 로그 출력, API 호출, 데이터 저장 등의 작업에 적합하다.

 

아래의 코드는 배열의 모든 요소를 출력하는 코드이다.

// forEach()
const numbers = [1, 2, 3];
numbers.forEach(number => {
  console.log(number);  // 1, 2, 3
});

---

- array.map()

 

map()은 배열의 각 요소를 반환하여 새로운 배열을 생성할 때 사용한다.

 

특징으로는, 변환된 값을 포함하는 새로운 배열을 반환하며, 원본 배열은 변경하지 않는다.

 

주로 각 요소에 대한 변환이 필요할 때 적합하다.

 

아래의 코드는 배열의 모든 요소를 제곱하는 코드이다.

// map()
const numbers = [1, 2, 3];
const squres = numbers.map(number => number ** 2);
console.log(squares);  // [1, 4, 9]

---

- array.reduce()

 

reduce()는 배열의 요소를 누적하거나 집계하여 단일 값을 생성할 때 사용한다.

 

특징으로는, 최종 결과로 단일 값을 반환하며, 원본 배열을 변경하지 않는다.

 

주로 데이터의 집계, 변환 및 복잡한 연산에 적합하다.

 

아래의 코드는 배열의 모든 요소를 더하는 코드이다.

// reduce()
const numbers = [1, 2, 3];
// 0은 초기값, 첫 호출에서 acc = 0으로 시작
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum);  // 6

---

- array.filter()

 

filter()는 배열의 각 요소를 검사하여 주어진 조건을 만족하는 요소만으로 이루어진 새로운 배열을

생성할 때 사용한다.

 

특징으로는, 조건을 만족하는 요소로만 이루어진 새로운 배열을 반환하며, 원본 배열은 변경하지 않는다.

 

주로 특정 조건에 맞는 요소를 추출할 때 적합하다.

 

아래의 코드는 배열에서 짝수만 추출하는 코드이다.

// filter()
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers);  // [2, 4]