고차함수 (Higher Order Function)

고차함수 (Higher Order Function)

  • h(x) = f(g(x))
  • 하나 이상의 함수를 인수로 취한다.
  • 함수를 결과로 반환한다.
var twice = function(f, v) {
    return f(f(v));
};

var f = function(v) {
    return v + 3;
};

twice(f, 7); // 13

커링 (Currying)

  • 수학자 Haskell Curry의 이름을 딴 이 기법은 함수가 함수를 만드는 기법이다.
  • 함수로 함수를 만들기 위해선 결과값으로 함수를 전달할 수 있어야한다. 이 지점에서 리턴값으로 사용할 수 있는 고차 함수가 등장한다.
  • 즉, 커링이란 특정 함수에서 정의된 인자의 일부를 넣어 고정시키고, 나머지를 인자로 받는 새로운 함수를 만드는 것이다.
// no curry
const sum = (a, b) => a + b

// curry
const sum = a => b => a + b

function curry(fn) {
  return function(a) {
    return function(b) {
      return fn(a, b);
    }
  }
}
// var curry = a => b => fn(a, b);

var add = curry((a, b) => a + b); // <-- 첫번째 함수를 리턴했다.
var add10 = add(10); // <-- 두번째 함수를 리턴했다.
add10(11); // 21
add10(21); // 31

function cal(a, b, c) {
    return a + b + c;
}
function curry(fn) {
    var args = Array.prototype.slice.call(arguments, 1);
    
    return function() { 
        return fn.apply(this, args.concat(Array.prototype.slice.call(arguments, 0)));
    }
}

var newFn1 = curry(cal, 1);
newFn1(2, 3); // (1 + 2 + 3) = 5

var newFn2 = curry(cal, 1, 3);
newFn2(4); // (1 + 3 + 4) = 8

filter, map, reduce

  • filter
    • 콜백 함수에 지정된 조건을 충족하는 배열의 요소를 반환
const people = [
 { name: ‘John Doe’, age: 16 },
 { name: ‘Thomas Calls’, age: 19 },
 { name: ‘Liam Smith’, age: 20 },
 { name: ‘Jessy Pinkman’, age: 18 },
];

const peopleAbove18 = (collection) => {
  return collection
    .filter((person) => person.age >= 18);
};

peopleAbove18(people);
// {name: "Thomas Calls", age: 19}
// {name: "Liam Smith", age: 20}
// {name: "Jessy Pinkman", age: 18}
  • map
    • 배열의 각 요소에 대해 정의된 콜백 함수를 호출하고 결과가 포함되어 있는 배열을 반환
const coffeeLovers = [‘John Doe’, ‘Liam Smith’, ‘Jessy Pinkman’];

const incrementAge = (collection) => {
  return collection.map((person) => {
    person.coffeeLover = coffeeLovers.includes(person.name);
 
    return person;
  });
};

incrementAge(people);
// {name: "John Doe", age: 16, coffeeLover: true}
// {name: "Thomas Calls", age: 19, coffeeLover: false}
// {name: "Liam Smith", age: 20, coffeeLover: true}
// {name: "Jessy Pinkman", age: 18, coffeeLover: true}
  • reduce
    • 배열의 모든 요소에 대해 지정된 콜백을 호출
const sumAge = (collection) => collection.reduce((sum, person) => {
 return sum + person.age;
}, 0);

sumAge(people); // 73

react-redux/connect.js

  • https://github.com/reactjs/react-redux/blob/master/src/connect/connect.js
export function createConnect({
    // something else
}) {
  return function connect(
    // something else
  ) {
    return connectHOC(selectorFactory, {
        // something else
    })
  }
}

export default createConnect()

HOC (higher order components)

  • https://www.vobour.com/book/view/XSSFQ5wBzsCLAbbo4
import React, { Component } from 'react';
import Layer from 'layer/Layer';

export default ComposedComponent => class extends Component {
    render() {
        return (
            <Layer {...this.props}>     //Props Proxy
                <ComposedComponent />
            </Layer>
        );
    }
};