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

고차 함수를 이해하기 위해서는 함수형 프로그래밍이 무엇인지, 퍼스트 클래스 함수의 개념이 무엇인지

이해하는 것이 도움이 된다. 

 

함수형 프로그래밍

함수를 다른 함수의 파라미터로 넘길 수 있고, return 값으로 함수를 받을 수 있는 프로그래밍 형태이다. 

 

퍼스트 클래스 함수 

자바스크립트가 함수를 일급 시민( first-class citizen )으로 대해준다. 

왜냐하면 자바스크립트 또는 함수형 프로그래밍 언어 함수들은 전부 객체이다. 

 

자바스크립트에서, 함수는 Function 객체라는 특별한 타입이다. 

function special () {
	console.log("hello");
}

special();

special.test = "!?";

console.log(special.test);
// !?

자바스크립트에서 함수가 객체인 것을 증명하기 위해서 다음과 같은 방식으로 코드를 작성할 수 있다. 

 

※ 작성할 수 있는 거지만 사용하는 것을 추천하진 않는다.

 

함수를 변수에 할당하기 

자바스크립트에서 함수를 변수에 할당할 수 있다. 

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

square(5);

함수를 파라미터로 넘기기

마찬가지로 함수를 파라미터로 넘길 수 있다. 

function first() {
	console.log("first");
}

function second() {
	console.log("second");
}

function third(type, first, second) {
    if(type === "first")
    	first()
    else if(type === "second")
    	second()
}

 

정리하자면, 

함수 자체를 인자로써 다른 함수에 전달하거나 다른 함수의 결과값으로 리턴할 수 있고, 함수를 변수에 할당하거나 

데이터 구조안에 저장할 수 있는 함수이다. 

 

고차 함수 ( Higher-Order Function )

함수를 인자로 받거나 함수를 반환함으로 작동하는 함수를 말한다. 

즉, 고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수를 말한다. 

 

예를 들어, Array.prototype.map, Array.prototype.filter 와 Array.prototype.reduce가 언어 내부에 포함된

고차 함수이다.

 

고차 함수의 동작 

Array.prototype.map

map() 메서드는 입력으로 들어온 배열 내 모든 엘리먼트를 인자로 제공받는 콜백 함수를 호출함으로 새로운 배열을 

만들어 낸다. 

 

map() 메서드의 콜백 함수에서 모든 반환된 값을 가져와 값을 이용한 새로운 배열을 만들어낸다. 

 

예)

고차 함수가 아닌 함수로 작성

const arr1 = [1, 2, 3];
const arr2 = [];

for(let i =0; i < arr1.length; i++) {
	arr2.push(arr1[i] * 2);
}

console.log(arr2);

 

고차 함수로 작성

const arr1 = [1, 2, 3];
const arr2 = arr1.map(item => item * 2);

console.log(arr2);

 

Array.prototype.filter 

filter() 메서드는 콜백 함수에 의해 제공된 테스트를 통과한 모든 엘리먼트를 가진 새로운 배열을 만들어 낸다. 

 

예)

고차 함수가 아닌 함수로 작성

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];

const fullAge = [];

for(let i = 0; i < persons.length; i++) {
  if(persons[i].age >= 18) {
    fullAge.push(persons[i]);
  }
}

console.log(fullAge);

고차 함수로 작성

const persons = [
  { name: 'Peter', age: 16 },
  { name: 'Mark', age: 18 },
  { name: 'John', age: 27 },
  { name: 'Jane', age: 14 },
  { name: 'Tony', age: 24},
];
const fullAge = persons.filter(person => person.age >= 18);
console.log(fullAge);

 

Array.prototype.reduce

reduce() 메서드는 호출하는 배열의 각각의 멤버에 대해서 콜백 함수를 실행하고 하나의 결과값만 보낸다. 

 

예)

고차 함수가 아닌 함수로 작성

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

let sum = 0;

for(let i = 0; i < arr.length; i++) {
	sum = sum + arr[i];
}

console.log(sum);

고차 함수로 작성

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

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

console.log(sum);