[JavaScript] 자바스크립트 메서드 map(), filter(), reduce() 사용

자바스크립트(JavaScript)에서 배열을 쉽게 다룰 수 있도록 하는 메서드 map(), filter(), reduce()에 대해 알아보자.

 

간단히 정리하자면,

 

map() - 배열의 각각의 요소를 활용해서 새로운 배열을 만들고 싶을 때

filter() - 조건에 맞는 특정 요소만 추출해서 새로운 배열을 만들고 싶을 때

reduce() - 각각의 요소를 활용해서 어떤 값을 얻고 싶을 때 (누적 값)

 

사용한다. 

1. map()

map() 메서드는 배열의 각각 요소에 대해 주어진 함수를 실행하여 반환한 결과를 모아 새로운 배열을 만들어준다. 

1-1) arr.map(callback(currentValue))

var arr = [1, 2, 3, 4, 5];

var mapArr = arr.map((i) => i * 10);
console.log(mapArr); // 결과: [10, 20, 30, 40, 50]

 

위 코드는 각 요소마다 10을 곱해서 새로운 배열을 만드는 코드이다. 

map()은 함수를 인자로 넘겨준다. 그 함수가 배열의 각각의 요소(1, 2, 3, 4, 5) 마다 실행되고 반환되는 결과가 새롭게 배열로 만들어져 mapArr에 담긴다. 

 

1-2) arr.map(callback(currentValue, index)) 

map()에 넘겨주는 함수의 파라미터는 2개일 수도 있다.

var arr = ['a', 'b', 'c', 'd', 'e'];

var mapArr = arr.map((i, index) => i + index);
console.log(mapArr); // 결과: ["a0", "b1", "c2", "d3", "e4"]

위 코드는 각 요소에 index번호를 붙여주는 코드이다.

 

 

2. filter()

2-1) arr.filter(callback(element))

filter() 메서드는 배열의 각 요소마다 조건을 만족하는지 확인하고, 조건을 만족하는 경우만 리턴하여 새로운 배열을 만들어준다. 

var arr = [1, 2, 3, 4, 5];

var arrFilter = arr.filter((i) => i % 2 == 0);
console.log(arrFilter); // 결과: [2, 4]

위 코드는 배열의 요소 중 짝수인 것만 골라서 새로운 배열을 만드는 코드이다. 1, 2, 3, 4, 5 중 짝수는 2, 4 이므로 [2, 4]라는 새로운 배열이 만들어진다.

 

1-2) arr.filter(callback(currentValue, index)) 

filter() 메서드도 map() 메서드와 마찬가지로 index를 콜백의 인자로 사용할 수 있다.

 

 

3. reduce()

reduce() 메서드는 배열의 있는 모든 요소들을 누적한 값을 반환한다. 

 

3-1) arr.reduce(callback(accumulator, currentValue))

reduce()의 callback(콜백)은 반환 값을 누적시킨 값을 받는 변수(accumulator)와 현재 요소(currentValue)를 필수 인자로 받는다. 

var arr = [1, 2, 3, 4, 5];

var arrReduce = arr.reduce((acc, curr) => acc + curr);
console.log(arrReduce); // 결과: 15

현재 요소는 curr에 들어가고 acc에는 curr의 값이 누적되어 다시 acc로 전달된다. 모든 요소를 순차적으로 순회하고 나면, 결과적으로 배열의 모든 요소의 값을 누적한 값을 얻을 수 있다. 

 

3-2) arr.reduce(callback(accumulator, currentValue), initialValue)

initialValue로 초기값을 지정할 수 있다. 초기값은 callback(콜백) 함수의 첫 번째 인자가 된다. 초기값을 설정하지 않으면 배열의 첫 번째 값이 초기값으로 설정된다.