[ES6] 고차함수, 커링, 부분적용함수

안녕하세요!

이 번에는 고차함수, 부분적용함수, 커링에 대해 공부해보겠습니다.

• 고차함수 : 함수를 입력받아 함수를 반환하는 함수

이 번 포스팅을 통해 자세히 알아두면 좋을 것 같습니다.
분수를 소수로 표현하는 함수를 만들어보겠습니다
분모인수로 입력하면 분자를 입력하는 함수를 리턴합니다.
그리고 분자를 입력하면 소수점자리를 입력하는 함수를 리턴하며
최종으로 소수를 리턴합니다.

const decimalCalculator = denominator => numerator => decimalPoint => {
    const num = numerator/denominator
    return num.toFixed(decimalPoint)
}
const divideByThree = decimalCalculator(3) => 5번째 줄
const devideTenByThree = divideByThree(10) => 6번째 줄

console.log(devideTenByThree(3))
console.log(decimalCalculator(3)(10)(3))

// result
3.333
3.333

ecimalCalculator은 소수점을 계산하는 고차함수

5번 째 줄처럼 decimalCalculator(3)은 분모가 3으로 결정된 고차함수입니다.
divideByThree에 초기화 했는데,
divideByThree에 분자와 소수점자리를 입력하면 소수가 리턴됩니다.

6번 째 줄의 divideByThree(10)는 분모가3 분자가10으로 결정된 고차함수 입니다.
devideTenByThree에 초기화 했는데,
devideTenByThree에 소수점자리를 입력하면 소수가 리턴됩니다.

divideTenByThree(3)는
decimalCalculator(3)(10)(3) 처럼 인수를 한 번에 순차적으로 넣을 수 있습니다.
동일한 값을 반환하게 됩니다.

부분적용함수

고차함수를 한 번 호출하면 계속해서 사용할 수 있는 새로운 함수가 반환된다는 점이 강점입니다.

• 분모가 3으로 결정된 상태에서, 분자가 계속 바뀐다면
  devideByThree함수를 재활용하며 인자로 분자만 계속 넘겨주면 됩니다.
• 분모가 3 분자가 10으로 결정된 상태에서, 소수점 자리수가 계속 바뀐다면 devideTenByThree함수를 재활용하며 인자로 소수점 자리만 계속 넘겨주면됩니다.

모듈화를 하게돼도 하드코딩을 줄여줄 수 있습니다.

---

커링

자바스크립트는 순수한 형태의 커링을 완벽하게 지원하지 않는다고 합니다.
(순수한 커링 형태가 뭔지는 잘 모르겠습니다. 저는 우선 자바스크립트 한정으로 공부하겠습니다)
다만 부분 적용을 이용해서 일련의 단일 매개변수로 매개변수 숫자를 줄이는 방법이 일반적이라고 합니다.

커링과 부분함수

커링 함수는 여러개의 인수를 받는 함수에서 정확히 인수 하나만 받는 일련의 함수를 반환할 때 사용합니다.

const dogs = [
    {
        name : 'max',
        weight : 10,
        species : 'jindo',
        region : 'jindo',
        color : 'white'
    },
    {
        name : 'cola',
        weight : 20,
        species : 'ddongdog',
        region : 'jeonju',
        color : 'white'
    },
    {
        name : 'cider',
        weight : 15,
        species : 'mix',
        region : 'seoul',
        color : 'brown'
    },
    {
        name : 'wooyu',
        weight : 25,
        species : 'chiwawa',
        region : 'pyeongyang',
        color : 'black'
    },
]

//**********************************************//

function getDogNames (dogs, filterFunc) {
    return dogs
    .filter(filterFunc)
    .map(dog => dog['name'])
}
const identity = field => value => dog => dog[field] === value;
const colorCheck = identity('color')
const regionCheck = identity('region')

console.log(getDogNames(dogs, colorCheck('brown')))
console.log(getDogNames(dogs, colorCheck('white')))

조금 긴 듯 하지만, 반 이상이 데이터배열입니다.
identity()와 colorCheck()가 인수를 하나만 가지는 커링함수입니다.
커링을 통해서 필터의 추상화를 만들었습니다.
동적으로 필터정보를 입력하고 반환 받을 수 있습니다.

개인적인 생각으로 커링은 자바스크립트에서 부분함수에 포함되는 것 같지만, 인수를 하나로 한다는 점에서 좀더 명시적인 함수명을 작성할 수 있고 간결하고 명료한 코드를 만들 수 있는 것 같습니다.
필요에 따라 부분적용함수와 커링함수를 잘 썼으면 합니다.