HOF

OwlSuri·2022년 7월 24일

JavaScript

backgroundKnowledge

목록 보기

4/8

HOF

Higher-Order-Function 의 줄임말
하나 이상의 함수를 인자로 받는다.
함수를 결과로 반환한다.
함수 합성을 가능하게 해준다.
HOF를 사용하면 유연하고 반복을 줄일 수 있는 코드를 작성할 수 있다.
함수를 다루는 함수

HOF를 이해하려면?

자바스크립트에서 함수는 1급 객체다.
함수를 값(변수)처럼 취급할 수 있다.

function fruit(sweetness) {
  return sweetness * 3;
}
const pear = fruit(1);
const strawberry = fruit(5);
const watermelon = fruit(3);

-> 함수를 배열이나 객체에도 넣을 수 있음

const fruitsArr = [fruit(1), fruit(3), fruit(5)];
const fruitsObj = {
  pear: fruit(1),
  strawberry: fruit(5),
  watermelon: fruit(3)
};

-> 다른 함수의 인자로도 넘겨줄 수 있음

function strawberry(fruit) {
  return fruit(5); 
}
strawberry(fruit);

-> 함수가 다른 함수를 반환하는 것도 가능

function f(x) {
  return function(y) { ... }
}

📌 HOF : 함수를 인자로 받거나, 함수를 반환하는 함수

하나 이상의 함수를 인자로 받는다

const twice = function(f, v) {
    return f(f(v));
};

const plusOne = function(v) {
    return v + 1;
};

console.log(twice(plusOne, 1)); // 3

twice()는 함수를 인자로 받아 2번 반복해주는 HOF이다.
단순히 2번 반복하지만, 인자로 받는 함수에 어떻게 반복할 것인가를 제어할 수 있다.

Abstracting Patterns of Control

HOF는 단순히 함수의 값을 전달하는 역할을 할 뿐만아니라 함수의 흐름을 제어하는 파라미터의 역할도 한다(제어 패턴 추상화)
-> 계산의 세부사항을 인자로 넘기는 함수 안에 캡슐화하여 추상적으로 제공

0~99까지 출력하라는 요구를 받으면, for문만으로도 가능하지만

function repeat(n) {
    for (let i = 0; i < n; i++) {
        console.log(i);
    }
}

repeat(100);

이렇게하면 repeat() 괄호 안에 숫자만 바꿔주면 쉽게 제어할 수 있다.
그런데 여기에 9999까지 출력하는 동시에 배열에 담으라고 한다면?

function repeat(n, fn) {
    for (let i = 0; i < n; i++) {
        fn(i);
    }
}

// 0부터 9999까지 출력하기
repeat(10000, console.log);

// 0부터 9999까지 배열에 담기
const list = [];
repeat(10000, (i) => {list.push(i)});

함수를 결과로 반환하는 함수

function fillArray(n, fn) {
    let array = [];
    for (let i = 0; i < n; i++) {
        array.push(fn(i));
    }
    return array;
}

function makeItem(i) {
    return (i) => `item${i}`;
}

const array = fillArray(7, makeItem);

console.log(array);  
// [ 'item0', 'item1', 'item2', 'item3', 'item4', 'item5', 'item6' ]

makeItem() 함수가 함수를 반환하는 함수이다.

HOF의 예

Filter, Map, Reduce

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]