JavaScript - 고차함수(map, fill, reduce)

자바스크립트는 함수형 프로그래밍에 알맞은 언어라고 한다. 그리고 자바스크립트를 이렇게 만들어주는 요소가 JavaScript의 고차개념이다. 고차함수는 자바스크립트에서 광범위하게 사용되며 이것을 모른다면 자바스크립트 개발자라할 수 없다.

 

함수형 프로그래밍이란, 함수를 다른 함수의 파라미터로 넘길 수 있고(!!) 반환값으로 함수(!!)를 받을 수 있는 프로그래밍 형태이다. C/C++ 같은 고전파와 비교가 안되는 유연함이다. Java 진영 또한 점진적으로 함수형 프로그래밍을 위해 고차함수를 받아들이는 추세이다.

 

자바스크립트는 함수를 객체로 받아들이기 때문에 위와 같은 행동들이 가능하다. 리턴값으로 넘긴다던가, 파라미터로 받는다던가. 그래서 다음과 같은 행위가 가능하다.

 

const square = function(x) {
  return x * x;
}

const foo = square;

// prints 36
foo(6);

 

다른 언어들에선 절대 불가능이다.

 

이제 고차함수에 대해 알아보자. 위에서 설명한 것 처럼 javascript는 함수를 객체처럼 받는다고 했다. 고차함수란 함수를 인자로 받거나 함수를 반환함으로써 작동하는 함수를 말한다. 간단히 말해 고차함수는 함수를 인자로 받거나 출력으로 반환하는 함수이다.

 

1. map

 

map() 메소드는 입력으로 들어온 배열 내 모든 원소를 인자로 제공받는 콜백 함수를 호출함으로써 새로운 배열을 만들어낸다. map() 메소드는 콜백 함수에서 모든 반환된 값을 가져올 것입니다. 그리고 그 값들을 이용한 새로운 배열을 하나 만들어낸다.

 

예를들어, 배열 [1, 2, 3 ,4] 가 있고 모든 원소에 * 2 를 한 배열을 하나 새로 만들고 싶다고 하자. 만약 C++ 라면 이렇게 할 것이다.

 

int arr[1, 2, 3, 4];
int arr2[4];

for(int i = 0; i < 4; i++){
	arr2[i] = arr[i] * 2;
}

 

고차함수를 사용하면 다음과 같다.

 

// 고차함수 사용
const arr = [1, 2, 3, 4];

const arr2 = arr.map(function(item){
	return item * 2;
});

// 고차함수 + 화살표 함수 사용

const arr2 = arr.map(item => item * 2);

 

화살표 함수는 현재 아이템을 화살표처럼 바꾸겠다는 의미이다.

 

2. filter 

 

필터는 이름 그대로 조건에 맞는 원소들만 가져오겠다는 의미이다. 만약 [1, 2, 3, 4] 에서 2보다 큰 것만 가져오고 싶다면

 

arr = [1, 2, 3, 4]

arr2 = arr.filter(item => item > 2);

 

3. reduce 

 

리듀스는 호출하는 배열의 각각의 멤버에 대해 콜백함수를 실행하고 하나의 결과 값만 내보낸다.

리듀스는 accumulator과 currentValue . 전자는 리듀스 함수로부터 반환된 이전값을, 커렌트는 배열의 현재 값이 사용된다. 예를들면

 

const arr = [5, 7, 1, 8, 4];

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

// prints 25
console.log(sum);


//초기값 주기
const arr = [5, 7, 1, 8, 4];

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

// prints 35
console.log(sum);

 

아래처럼 초기값을 주면 이 초기값은 currentValue 로 세팅되어 첫 값이 원래 없었지만 10으로 세팅되어 원래 값 + 10 이 되었음을 볼 수 있다.