Javascript 내장 고차 함수 (filter, map, reduce)

자바스크립트에는 기본적으로 내장되어 있는 고차 함수들이 있다. 배열 메서드 중 일부도 여기에 해당한다. 대표적인 세 가지 고차함수 filter, map, reduce에 대해 알아보려고 한다.

 

filter

---

filter() 메서드는 주어진 함수의 특정 조건를 만족하는 모든 요소를 모아, 새로운 배열로 반환하는 메서드이다. 다시말해 배열(array)에서 지정한 조건을 통과한 일부 요소(element)만 원할 때 사용하는 것이다. 예를 들어, 배열에서 짝수만 걸러내거나, 길이가 10 이하인 문자열만 걸러내거나, 특정 문자열이 포함 되는 요소들만 걸러내고 싶을 때 사용 가능하다. 여기서 특정 조건은 filter 메서드의 인자로 전달되어야 하며,  함수 형태여야 한다. 기본적으로 아래와 같은 형태로 사용한다. 여기서 callback 함수는 그냥 메서드에 의해 인자로 '불려지는' 함수 정도로 이해하고 넘어가도 된다. 이 callback함수는 filter 메서드의 '필터기' 역할을 한다.

arr.filter(callback함수)

 

예제를 살펴보면 좀 더 이해하기 쉽다. arr라는 배열에서 값이 10이상인 요소들만 골라 필터링된 새로운 filtered 배열을 만들고 싶다고 하자. 그러면 arr.filter( )의 괄호 안에는, 10이상인 요소는 true로, 10 미만인 요소는 false로 판단해주는 함수를 넣어주면된다. 여기서는 이 함수를 isBigEnough라고 이름지었다. boolean값을 반환해주는 '비교 연산자'(>=)를 이용해 true 혹은 false를 반환해주도록 하고, 이 중 true인 부분만 필터링한 배열을 filtered에 할당한다.

let arr = [12, 5, 8, 130, 44];

function isBigEnough(value) {
  return value >= 10;
}

let filtered = arr.filter(isBigEnough);
//[12, 130, 44]

 

map

---

map() 메서드는 배열 내의 모든 요소 각각에 동일한 함수(callback 함수)를 적용한 값들을 모아 새로운 배열을 반환한다. filter와 마찬가지로 기존 배열을 수정하지 않고, 새로운 배열로 반환해준다. 

arr.map(callback함수)

 

간단한 예제로, numbers라는 배열 [1, 4, 9]가 있다고 하자. 이 배열의 모든 요소의 제곱근을 구하고 싶다면, map( ) 안에 제곱근을 구하는 함수(Math.sqrt)를 넣어주기만 하면 된다.

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);

// roots = [1, 2, 3]
// numbers = [1, 4, 9]

 

반대로 이번에는 numbers라는 배열 [1, 2, 3]이 있다고 하고, 이 배열의 모든 요소의 제곱을 구하고 싶다면, map( ) 안에 제곱을 구하는 함수를 넣어주기만 하면 된다. 이번에는 아예 map( ) 안에서 function(num){ return num*num; } 과 같이 함수를 선언하는 방식을 사용했다. map은 이렇게 하나의 데이터를 다른 데이터로 맵핑(mapping) 할 때 사용합니다.

var numbers = [1, 2, 3];
var roots = numbers.map(function(num){
		return num*num;
    });

// roots = [1, 4, 9]
// numbers = [1, 2, 3]

map 메서드는 이렇게 하나의 배열을 다른 배열로 맵핑(mapping) 할 때 사용한다!

 

reduce

---

reduce() 메서드는 배열의 각 요소에 대해 reducer 함수(callback 함수)를 실행하고, 하나의 결과값을 return한다. 다시말해 여러개의 데이터들이 속한 배열을 하나의 데이터로 응축(reduce)하는 것이다. 

arr.reduce(callback함수, 초기값)

여기서 reducer 함수는 네 개의 인자를 갖게된다. (모두 필수는 아님)

 

1) 누산기 (accumulator)

2) 현재 값 (currentValue)

3) 현재 인덱스 (currentIndex)

4) 원본 배열 (array)

 

reducer함수에서 최종적으로 반환되는 값은 누산기(accumulator)에 계속해서 누적, 갱신된 하나의 값이라고 생각하면 된다.

아래 코드를 보면, accumulator(누산기)와 currentValue(현재값)이 reducer함수의 인자로 들어간다. 즉 현재값이 계속해서 누산기에 더해지는 코드이기 때문에, 차례대로 현재값이 되는 1, 2, 3, 4가 누산기에 계속 더해져 모두 합한값인 10이 최종적으로 return 되는 것이다.

let arr = [1, 2, 3, 4];

let sum = arr.reduce(function (accumulator, currentValue) {
  	return accumulator + currentValue;
});

// sum = 10

 

여기에 초기값을 10으로 설정해주면, 누산기의 초기값이 10이 되고, 거기에 1, 2, 3, 4가 누적되면서 더해져 최종적으로는 20이라는 값을 얻게 된다.

let arr = [1, 2, 3, 4];

let sum = arr.reduce(function (accumulator, currentValue) {
  	return accumulator + currentValue;
}, 10);

// sum = 20

 

---

 

'추상화(abstraction)'란 복잡한 것을 압축해 핵심만 추출한 상태로 만드는 것, 다시말해 '요약'을 의미한다. 함수를 이용하면 여러번에 걸쳐야 했던 복잡한 일들을 한번에 처리할 수 있다. 즉 과정을 '요약'하는 것이다. 고차함수는 이러한 함수들을 한 차원 높게, 더 간단하게 처리할 수 있다. 과정이 요약될수록 생산성은 향상된다. 이렇게 훨씬 과정을 단축시켜주는 고차함수를 잘 다루게 되면 분명 생산성과 효율성을 높일 수 있게 될 것이다.