[Javascript] 고차함수(Higher-Order Function)에 대하여

자바스크립트에서 함수

자바스크립트에서 함수는 문법 구조일 뿐만 아니라 값으로써 변수에 할당될 수도 있고, 객체 프로퍼티나 배열 요소에 저장될 수도 있으며, 다른 함수에 인자로 전달될 수도 있고 여러 가지로 기능한다. 

함수는 특별한 종류의 자바스크립트 객체이다. 함수는 객체이므로 다른 객체와 마찬가지로 프로퍼티와 메서드를 가질 수 있다.

 

고차 함수

고차 함수는 하나 이상의 함수를 인자로 받아 새 함수를 반환하는 함수이다. 이 때 다른 함수의 인자로 전달되는 함수를 콜백 함수라고 한다. 또한 함수를 리턴하는 함수는 커리 함수라고 한다. 

// 이 고차 함수는 인자를 f에 전달하고 f의 반환 값의 논리 부정을 반환하는 새 함수를 반환한다.
function not(f) {
	return function(...args) {           // 새 함수를 반환
    	let result = f.apply(this, args); // f 함수를 호출하고
        return !result;                  // 그 결과를 부정함
    }
}

const even = x => x % 2 === 0; // 숫자가 짝수인지 판단하는 함수
const odd = not(even);         // 그 반대를 행하는 새 함수
[1, 1, 3, 5, 5].every(odd)     // => true: 배열 요소는 전부 홀수

// ⭐️ 다른 함수를 인자로 받는 경우
function double(num) {
	return num * 2;
}

function doubleNum(func, num) {
	return func(num);
}

// double은 doubleNum의 콜백 함수이다.
doubleNum(double, 5);


// ⭐️ 함수를 리턴하는 경우
function subtractor(subtract) {
	return function(num) {
    	return num - subtract;
    }
}

// subtractor(5)는 함수이므로 호출 연산자 '()'를 사용할 수 있다.
subtractor(5)(8) // => 3

// subtractor 함수가 리턴하는 함수를 변수에 저장할 수 있다. 
const subtract5 = subtractor(5);
subtract5(8) // => 3


// ⭐️ 함수를 인자로 받고 함수를 리턴하는 경우
function double(num) {
	return num * 2;
}

// doubleSubtractor 함수는 고차 함수
function doubleSubtractor(subtract, func) {
	const doubled = func(subtract);
    return function (num) {
    	return num - doubled;
    }
}

// double 함수는 doubleSubtractor 함수의 콜백으로 전달되었다.
doubleSubtractor(5, double)(18); // => 8

 

배열의 내장 고차 함수

자바스크립트 배열에는 함수를 인자로 받고 함수를 값으로 변환할 수 있는 함수인 내장 고차함수가 있다. 

 

Array.prototype.map

map() 메서드는 입력 배열의 모든 요소를 인자로 제공받는 콜백 함수를 호출함으로써 새로운 배열을 반환한다.

// 고차 함수 map()을 이용하여 작성
const arr1 = [1, 2, 3];

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

console.log(arr2); // => [2, 4, 6];

// map()이 동작하는 방식 
const arr1 = [1, 2, 3];
const arr2 = [];

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

console.log(arr2) // => [2, 4, 6];

 

Array.prototype.filter

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 = persons.filter(person => person.age >= )18;
console.log(fullAge); //  [{name: 'Mark', age: 18}, {name: 'John', age: 27}, {name: 'Tony', age: 24}]

// 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);

 

Array.prototype.reduce

reduce() 메서드는 배열의 각 요소에 대해 사용자 제공 "리듀서" 콜백 함수를 순서대로 실행하고 이전 요소에 대한 계산에서 반환 값을 전달한다.

// 고차함수 reduce()를 이용하여 작성
const arr = [5, 7, 1, 8, 4];

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

console.log(sum); // => 25

// 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) // => 25

 

고차함수를 왜 쓸까

반복되는 로직을 별도의 함수로 작성해 추상화해서 사용할 수 있다. 자바스크립트의 내장 고차 함수를 적재적소에 쓰면 같은 코드를 좀 더 적은 양으로 작성할 수 있다. 또한 함수의 복잡한 로직을 분리해서 별도로 관리하면 생산성이 올라가고 유지 보수 면에서도 편리하다. 

 

참고자료

자바스크립트 완벽 가이드 7/E

https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad

https://velog.io/@rememberme_jhk/JS-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98-higher-order-function

https://hanamon.kr/javascript-%EA%B3%A0%EC%B0%A8%ED%95%A8%EC%88%98%EC%99%80-%EC%BD%9C%EB%B0%B1-%EC%9D%BC%EA%B8%89%EA%B0%9D%EC%B2%B4%EB%9E%80/