[JavaScript] map, reduce, filter를 알아보자.

JavaScript에서 map , reduce, filter 메서드는 배열을 다룰 때 코드를 간결하고 사용자가 쓰기 편하게 해주는 아주 편리하고 강력한 메서드이다. 그렇기에 알아보고자 한다.

map

map 메서드는 배열의 각 요소에 대해 지정된 함수를 호출하고, 그 함수의 반환값을 가지고 새로운 배열을 생성한다.
이 때, 원본 배열은 변경되지 않고 새로운 배열이 반환된다. map 메서드를 사용하여 각 요소를 변환하거나 새로운 형태로 매핑할 수 있다.

map 메서드는 이와 같이 사용한다.

배열.map((요소, 인덱스, 배열) => { return 요소 });

예시

배열의 각 숫자를 제곱한 새로운 배열을 생성하는 예제이다.

const numbers = [1, 2, 3, 4, 5]; // numbers 배열 생성

const squaredNumbers = numbers.map((num) => num * num); 

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

예제의 1을 더한 값을 반환해보겠다.

const squaredNumbers = numbers.map((num) => num * num + 1);
console.log(squaredNumbers); // [2, 5, 10, 17, 26]

이와 같이 함수안에 적힌 대로 배열을 반환해줄 수 있다.

reduce

reduce 메서드를 사용하면 배열의 요소를 순회하면서 누적값을 업데이트하고 최종 결과를 반환할 수 있다.

reduce 메서드는 이와 같이 사용한다.

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

예시

객체 배열에서 특정 속성의 값을 합산하는 예제다.
예를 들어, 다음과 같이 객체 배열이 있다고 가정해 보겠다.

const ranKing = [
  { id: 1, rate: 100 },
  { id: 2, rate: 200 },
  { id: 3, rate: 50 },
];

reduce 메서드를 사용하여 rate 속성의 값을 합산해 보겠다.

const totalRate = ranKing.reduce((acc, ranKing) => acc + ranKing.rate, 0);

console.log(totalRate); // 350 (100 + 200 + 50)

위의 예제에서 초기값으로 0을 사용하여 합산을 시작하고, 배열의 각 요소를 순회하면서 Rate 속성의 값을 누적값에 추가한다.

filter

filter 메서드는 주어진 함수의 조건을 만족하는 배열 요소만을 포함하는 새로운 배열을 생성한다. 이 때, 원본 배열은 변경되지 않는다. filter 메서드를 사용하여 특정 조건을 만족하는 요소만을 추출할 수 있다.

filter 메서드는 이와 같이 사용한다.

arr.filter(콜백함수(요소[, 인덱스[, array]])[, callback함수를 실행할때 this로 사용되는 값)

예시

배열에서 짝수만을 추출하는 예제이다.

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

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

filter 함수는 주어진 함수가 true를 반환하는 요소만을 새로운 배열에 포함시킨다.