[JavaScript] 고차 함수 (Higher-Order Function)

고차 함수(Higher-Order Function)이란 함수를 인자로 받거나 함수를 반환하는 함수입니다. 먼저 알아두어야 할 것은 자바스크립트가 선언형 프로그래밍로 분류되는 함수형 프로그래밍(Functional Programming)이라는 것입니다. 함수형 프로그래밍에서는 함수를 1급 시민(First-Class Citizen)으로 인식한다고 설명되는데, 1급 객체로 인식하고 있다는 뜻이 됩니다. 이는 함수를 다음과 같이 변수에도 할당하는 것을 가능하게 합니다.

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

square(5); // Output : 25

 

이러한 특징을 통해 함수를 인자로 받거나 함수를 반환하는 함수인 고차 함수가 정의될 수 있습니다. 이번 글에서는 자바스크립트에 내장되어 있는 고차 함수들인 ① Array.prototype.map(), ② Array.prototype.filter(),

③ Array.prototype.reduce() 메서드들에 대해서 알아보겠습니다. 

 

① Array.prototype.map()

map() 메서드는 호출하는 배열의 모든 요소에 주어진 함수를 적용한 요소들로 구성된 새로운 배열을 반환합니다. 사용 구문과 예시는 다음과 같습니다.

// Syntax
const array_new = array_old.map(callbackFunc); 

// Example
const array_ex = [1, 3, 5, 6];
console.log(array_ex.map((x) => x * 2); // Output : [2, 6, 10, 12]

 

callbackFunc는 array_old의 각 요소에 적용할 함수입니다. callbackFunc는 3개의 인자 element, index, array를 가지고 있습니다. 각 인자의 의미는 다음과 같습니다.

- element : 현재 작업 중인 요소 (필수 인자)

- index : 현재 작업 중인 요소의 인덱스

- array : map()을 호출한 배열

const array_ex = [1, 3, 5, 6];
array_ex.map((ele, ind, arr) => {
  console.log(ele, ind, arr);
};

 

② Array.prototype.filter()

filter() 메서드는 호출하는 배열의 모든 요소들 중에서 주어진 조건을 통과하는 요소들로 구성된 새로운 배열을 반환합니다. 사용 구문과 예시는 다음과 같습니다. 

// Syntax
const array_new = array_old.filter(callbackFunc); 

// Example
const numbers = [10, 4, 15, 7, 9, 13];
console.log(numbers.filter((element) => element < 10)); // Output : [4, 7, 9]

 

callbackFunc는 array_old의 각 요소에 적용할 함수입니다. 이 함수는 결과 값으로 truthy 값이나 falsy 값을 반환하는 함수여야 합니다. callbackFunc가 받는 인자의 경우, map() 메서드와 동일하게 element, index, array 3개의 인자를 가지고 있습니다.

 

③ Array.prototype.reduce() 

reduce() 메서드는 호출하는 배열의 모든 요소에 함수를 적용하는데, 각 요소의 연산 결과를 다음 연산에 사용하여 마지막 결과 값으로는 하나의 값을 반환하게 됩니다. 사용 구문과 예시는 다음과 같습니다. 

// Syntax
const value_new = array_old.reduce(callbackFunc, initialValue); 

// Example
const numbers = [1, 2, 3, 4];
const init_val = 5;
const result = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, init_val)
console.log(result); // Output : 15

 

reduce() 메서드는 callbackFunc와 initialValue로 인자를 받을 수 있습니다. initialValue는 선택적으로 넣을 수 있는 인자인데, 만약 생략되었다면 자연스럽게 배열의 첫 번째 값이 초기값이 됩니다.

callbackFunc는 array_old의 각 요소에 적용할 함수입니다. 각 연산 결과는 callbackfunc가 다음 연산을 할 때 누적되어 사용됩니다. callbackFunc는 accumulator, currentValue, index, array, 총 4 개의 인자를 받을 수 있습니다. 각 인자의 의미는 다음과 같습니다.

- accumulator : 이전까지의 연산 결과 값 (필수 인자)

- currentValue : 현재 작업 중인 요소 (필수 인자)

- index : 현재 작업 중인 요소의 인덱스

- array : reduce()을 호출한 배열

 

* reduce()는 활용도가 높은 메서드인 만큼, map()과 filter()가 하는 역할을 수행할 수 있습니다. 

** 세 개의 메서드들은 모두 원본 배열을 바꾸지 않는 것을 알 수 있습니다. 이는 자바스크립트가 변수나 객체를 변경하지 않고 프로그램을 수행하는 함수형 프로그래밍(Functional Programming)임을 보여주는 특징 중 하나입니다.