> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/javascript/js-upgrade/curious-story/currying-function.md).

# 커링 함수

currying function

{% hint style="info" %}
컴퓨터 과학에서 커링(Curring) 또는 커리 함수란?\
여러 개의 인자을 갖는 함수를 단일 인자를 갖는 함수들의 함수열로 바꾸는 것을 말한다. \
모지즈 쇤핑클에 의해 도입되었고, 이후 [해스켈 커리](https://ko.wikipedia.org/wiki/%ED%95%B4%EC%8A%A4%EC%BC%88_%EC%BB%A4%EB%A6%AC)에 의해 발전된 방법이다. 
{% endhint %}

## 커링 함수를 왜 사용할까? 

* 커링 함수를 사용하면 함수의 재사용성을 높일 수 있다. 
* 커링 함수의 첫 번째 인자 → **설정(옵션)** 등
* 커링 함수의 두 번째 인자 → **적용 대상, 값** 등

## **커리 함수 활용**

커리 함수 방법론에 따라 `커리함수(비교함수)(배열)` 방식으로 함수를 작성하여 실행할 수 있다. 

```javascript
currySortArray(function (x, y) {
  return x - y;
})(originalArray);
```

JavaScript에서는 커리 함수를 구현하기 위해 클로저 패턴을 사용한다. 

```javascript
function currySortArray(function(compareCallback) {
  return function(array) {
    var copyArray = array.slice()
    return copyArray.sort(compareCallback)
  }
})
```

결과적으로 `커리함수()()`는 먼저 실행 `()` 된 함수가 함수를 결과 값으로 반환하므로, 연결지어 실행 `()` 할 수 있다. 작성된 커리 함수를 사용해 오름차순, 내림차순 유틸리티 함수를 만들어 사용할 수도 있다. 

```javascript
// 커리 함수의 첫번째 실행은 함수 값을 반환 (비교 함수 전달)
var ascSortArray = currySortArray(function (x, y) {
  return x - y;
});
var descSortArray = currySortArray(function (x, y) {
  return y - x;
});
// 오름차순 정렬 (새로운 배열 반환)
ascSortArray(originalArray);
// 내림차순 정렬 (새로운 배열 반환)
descSortArray(originalArray);
```

**ES5 vs ES6**

커리 함수를 활용한 유틸리티를 작성하는 JavaScript 버전 별 방법을 비교해보자. 

**ES5**

```javascript
function currySortArray(function(compareCallback) {
  return function(array) {
    return array.slice().sort(compareCallback)
  }
})
var ascSortArray = currySort(function(x, y) { return  x - y})
var descSortArray = currySort(function(x, y) { return  y - x})
```

**ES6**

```javascript
const currySortArray = (compareCallback) => (array) =>
  [...array].sort(compareCallback);
const ascSortArray = currySortArray((x, y) => x - y);
const descSortArray = currySortArray((x, y) => y - x);
```

**유틸리티 활용**

```javascript
ascSortArray(originalArray); // [-31, 1, 10, 20, 101]
descSortArray(originalArray); // [101, 20, 10, 1, -31]
```

## 정리 

내가 이해한 커리 함수 내용

함수형 프로그래밍 중 하나이다. 만약 여러개의 인자를 받는 함수가 있다면 각각의 인자들을 각각 단일 인지로 만들어 순차적으로 실행시킬 수 있는 것을 말한다.

```javascript
function Fn(a, b) {
  var ab = a * b;
  return function (c) {
    return ab + c;
  };
}

Fn(1, 2)(3); // 5
```

커리 함수의 목적은 함수 재사용에 있다. **특히! 리액트에서는 자주 사용**한다고 하니까 지금 완벽하게 알지 못하더라도 익숙해 질 수 있도록 기본적인 개념은 알고 있도록 하자!

## 참고 

* [커링 함수 → 모던 자바 스크립트 ](https://ko.javascript.info/currying-partials)