[javascript] 배열 고차함수 map, filter, reduce

 

고차함수란?

다른 함수를 전달 인자(매개변수)로 받거나, 함수를 결과로 반환하는 함수를 뜻한다.

 

 

1. map

기존의 배열을 순회하여 새로운 배열을 만들 때 사용된다.

이 때 기존의 배열은 변경되지 않는다.

 

let array = [1, 2, 3, 4, 5]

let arrayMap = array.map((item) => {
  return item + 1;
});

console.log(arrayMap);
//[2, 3, 4, 5, 6]
console.log(array);
//[1, 2, 3, 4, 5]

 

❓ forEach와의 차이점은?

map은 콜백 함수를 반복적으로 실행한 결과를 반환하여 새로운 배열을 생성한다. 

forEach는 콜백 함수를 반복적으로 실행하지만 값을 반환하지 않아 리턴값을 사용할 수 없다.

 

 

 

 

2. filter

기존의 배열에서 조건에 해당하는 요소들만 추출하여 새로운 배열을 만든다.

즉, 인자로 주어진 함수의 실행결과가 true인 요소의 값만 추출하여 새로운 배열을 만들어준다.

이 때 기존의 배열은 변경되지 않는다.

 

let num = [1, 2, 3, 4, 5]

let numFilter = num.filter((item) => {
  return item % 2
  //2로 나눈 나머지가 true(1)인 경우 추출(0은 false)
});

console.log(num);
//[1, 2, 3, 4, 5]
console.log(numFilter);
//[1, 3, 5]

 

 

 

3. reduce

기존의 배열을 순회하면서 각 요소에 대해 매개변수로 받은 함수를 실행하는데, 

이 때 이전의 함수 실행 반환 값을 전달하여 함수를 실행하고 그 결과를 합산하여 반환한다.

이 때 기존의 배열은 변경되지 않는다.

 

reduce 함수는 인자에 첫번째로 콜백함수, 두 번째로 초기값을 전달 받는다.
그리고 그 콜백함수의 인자에는 accumulator, currentValue, currentIndex, array 네 가지가 들어갈 수 있다. 그러나 모두 사용하지는 않는다.

accumulator: 이전 반환 값. 초기값을 설정했을 경우 그 해당 값
currentValue: 현재 값
currentIndex: 현재 인덱스
array: 원본 배열

 

let numList = [1, 2, 3, 4, 5];

let numReduce = numList.reduce((previousValue, currentValue) => {
  return previousValue + currentValue
}, 0);

console.log(numList)
//[1, 2, 3, 4, 5]
console.log(numReduce)
//15

 

let numList = [1, 2, 3, 4, 5];

let numReduce = numList.reduce((previousValue, currentValue) => {
  return previousValue + currentValue
}, 2);

console.log(numReduce)
//17

 

 

 

정리

map - 배열 내부 요소들을 변형하여 새로운 배열 생성
filter - 배열 내부 요소들의 값을 걸러서 새로운 배열 생성
reduce - 배열 내부 요소들을 하나로 통합

 

 

 

---

참조

https://poiemaweb.com/js-array-higher-order-function