고차함수 (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>
);
}
};