JavaScript ES6에서 추가된 map(), filter(), reduce() 이해하기

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 언어 중 하나이며, ES6(ECMAScript 2015)는 그 사용성과 편의성을 크게 향상시킨 중요한 업데이트입니다.

 

특히, 배열을 다루는 데 있어 map, filter, reduce 함수는 개발하면서 가장 많이 사용하는 함수라고 해도 과언이 아닙니다. 본 글에서는 이 세 함수의 개념과 사용 방법을 설명합니다.

 

map 함수

map 함수는 첫번째 인자로 함수를 받습니다. 배열의 요소를 순회하면서 인자로 받은 함수의 반환값을 새로운 요소로 가지며, 새로운 배열을 반환합니다. 즉, 원본 배열을 변형하지 않고 새로운 배열을 생성합니다.

 

예를들어 어떤 배열 요소들의 제곱수를 가지는 배열을 구한다고 하면, 아래와 같이 작성할 수 있습니다.

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

 

filter 함수

filter도 함수는 첫번째 인자로 함수를 받습니다. 배열의 요소를 순회하면서, 인자로 받은 함수의 결과값이 true인 요소만 필터링을 합니다. 그리고, map과 동일하게 새로운 배열을 반환합니다.

 

예를들어, 어떤 배열에서 짝수인 요소만 골라내고 싶다면, 아래와 같이 작성할 수 있습니다.

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

 

reduce 함수

reduce 함수는 배열을 순회하며 각 요소에 대해 주어진 리듀서 함수를 실행합니다. 리듀서 함수는 네 가지 인자를 받을 수 있습니다.

 

4가지 인자 (아래 순서대로 인자를 받음)

1. 누적값(accumulator)
2. 현재값(currentValue)
3. 현재 인덱스(index)
4. 원본 배열(array)

가장 중요한 것은 누적값과 현재값이며, 이 둘을 사용해 최종 결과를 도출합니다. 모든 배열의 요소를 더하는 코드를 작성한다면 아래와 같이 할 수 있습니다.

const array = [1, 2, 3, 4];
const result = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(result); // 10

 

reduce 활용

map과 filter가 reduce에 비해 상대적으로 사용하기 쉬워서, reduce를 사용 안하는 경우도 주변에서 많이 봤습니다. reduce의 이해를 높이기 위해 다른 예시를 들어보겠습니다.

 

같은 나이 별로 그룹화를 한다고 했을때, 아래와 같이 코드를 작성할 수 있습니다.

const people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

const groupByAge = people.reduce((acc, cur) => {
  if (!acc[cur.age]) {
    acc[cur.age] = [];
  }
  acc[cur.age].push(cur);
  return acc;
}, {});

console.log(groupByAge);

{
  '20': [ { name: 'Max', age: 20 }, { name: 'Jane', age: 20 } ],
  '21': [ { name: 'Alice', age: 21 } ]
}

 

결론

map, filter, reduce 함수는 자바스크립트에서 배열을 다룰 때 많이 사용하고, 이 함수들을 활용함으로써 코드의 가독성을 높이고, 불필요한 반복문 사용을 줄일 수 있기 때문에 반드시 알아야하는 배열의 함수들입니다.

 

관련 글

Javascript의 var / let / const 의 스코프와 재할당 가능 여부