> ## Documentation Index
> Fetch the complete documentation index at: https://grit03.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# [3장] 자바스크립트로 배우는 함수형 프로그래밍

## 합성(Composition)

> **함수 합성**은 **함수들을 조합하여 새로운 함수를 만드는 것**이다.\
> 출처: [\[JavaScript\] 함수 합성(Function Composition)](https://velog.io/@nittre/JavaScript-%ED%95%A8%EC%88%98-%ED%95%A9%EC%84%B1Function-Composition)

함수형 프로그램은 로직을 작고 순수한 함수들로 나눈다. 따라서 결국에는 이 작은 함수를 결합해서 애플리케이션을 완성해야 한다.
이 함수들을 **순차적**으로 또는 **병렬적**으로 호출하거나 **결합(combine)** 하여 애플리케이션을 만들어낼 수 있다.

**합성(composition)** 을 하는 방법에는 여러가지 방법이 있다.

### 체이닝

자바스크립트에서는 함수들이 점 표기법(dot notation)을 사용하여, **이전 함수의 반환값에 대해 연속적으로 호출**하여 구성할 수 있다.

```ts theme={null}
const template = "hh:mm:ss tt";
const clockTime = template
  .replace("hh", "03")
  .replace("mm", "33")
  .replace("ss", "33")
  .replace("tt", "PM");

console.log(clockTime); // "03:33:33 PM"
```

### 함수에 차례로 인자를 전달하여 실행하기

**인자를 받아, 각 함수에 차례로 전달하여 실행**한다.\
특정 함수의 리턴 값이 입력이 되고, 이어 다음 함수를 실행시켜 결과를 반환한다. 이런 방식으로 결합하여 값을 변경한다.

```ts theme={null}
const both = (date) => appendAMPM(civilianHours(date));
```

하지만 이 문법은 이해하기 어렵고 따라서 유지보수나 확장이 힘들다. 만약 20개의 서로 다른 함수에 값 인자로 전달해야 한다면?

### 고차 함수를 사용하여 함수 합성하기

```ts theme={null}
const both = compose(civilianHours, appendAMPM);

both(new Date());
```

위 방법으로 합성을 구현하면, 함수를 언제든지 추가할 수 있어 확장 가능성이 좋다.\
또한 합성된 함수의 순서를 바꾸기도 쉽다.

여기서 합성 함수는 **고차함수**이다.\
이 `both` 함수는 **여러 함수들을 인자로 받아, 단일 함수를 반환** 한다.

```ts title="compose.ts" theme={null}
const compose =
  (...fns) =>
  (arg) =>
    fns.reduce((composed, f) => f(composed), arg);
```

위 코드는 합성 기법을 설명하기 위해 설계된 간단한 함수 예제이다.
고차 함수를 이용해 합성하는 방법은 인수가 하나 이상이거나 함수가 아닌 인수를 처리해야 할 때 더 복잡해질 수 있다.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.