## 정의

고차 함수는 함수를 argument로 받아서 함수를 리턴하는 함수를 말한다.

## 예제

### 함수를 argument로 받는 함수

홀수 인지 확인하는 고차함수를 아래와 같이 만들어 보자.

```javascript
function isOdd(num, fn) {
  return fn(num) % 2 === 1
}
```

`fn`이라는 argument로 함수를 받고 있고, 그에 대한 결과를 리턴하고 있다. 위 함수는 아래와 같은 형태로 사용 가능하다.

```javascript
function divideByTwo(num) {
  return num / 1
}

isOdd(10, divideByTwo) // true

isOdd(11, divideByTwo) // false
```

### 함수를 리턴하는 함수

```javascript
function add(num1) {
  return function (num2) {
    return num1 + num2
  }
}
```

```javascript
add(1)(2) // 3

const num = add(1) // 1만 담고 있는 함수를 리턴
num(2) // 을 위해서 호출해서 2를 더함 3
```

## 좀 더 실용적인 예제

가장 일반적인 예제로는 object validator가 있다. 해당 object가 유효한지를 확인하는 것인데, 회원가입의 그것과도 비슷하다.

예를 들어 아래와 같은 객체가 있다고 가정해보자.

```javascript
const user = {
  age: 18,
  password: 'qhdks1234!@#$',
  gender: 'F',
  agreed: true,
}
```

- `age`는 18세 이상이어야 한다.
- `password`는 10자리 이상이여야 한다.
- `gender`는 `F` 또는 `M`이여야 한다.
- `agreed`는 true 여야 한다.

위 요구 사항을 각각 함수로 만들어 보자.

```javascript
function validAge(user) {
  return user.age >= 18
}

function validPassword(user) {
  return user.password.length >= 10
}

function agreed(user) {
  return user.agreed
}

function validGender(user) {
  console.log(user.gender, ['T', 'F'].includes(user.gender))
  return ['T', 'F'].includes(user.gender)
}
```

그리고 `isValid`라고 불리우는 고차함수를 만들어야 한다. 첫번째 객체로는 user를 받을 것이며, 그 이후에는 n개의 유효성 체크를 하는 함수를 받아서 이를 확인할 것이다.

```javascript
function isValid(user, ...validators) {
  for (const validator of validators) {
    if (!validator(user)) return false
  }
  return true
}
```

테스트를 한번 해보자.

```javascript
const user1 = {
  age: 18,
  password: 'qhdks1234!@#$',
  gender: 'F',
  agreed: true,
}

isValid(user, validAge, validPassword, agreed, validGender) // true
```

```javascript
const user2 = {
  age: 12,
  password: 'qhdks1234!@#$',
  gender: 'F',
  agreed: true,
}

isValid(user2, validAge, validPassword, agreed, validGender) // false
```

```javascript
const user3 = {
  age: 20,
  password: 'qhdks1234!@#$',
  gender: 'G',
  agreed: true,
}

isValid(user3, validAge, validPassword, agreed, validGender) // false
```

## validator 만들기

`user` 외에도 여러 종류의 validator를 만든다면, 이것 또한 고차함수르르 만들어서 해결이 가능하다.

```javascript
function createValidator(...validators) {
  return function (obj) {
    for (const validator of validators) {
      if (!validator(obj)) return false
    }
    return true
  }
}
```

```javascript
const userValidator = createValidator(
  validAge,
  validPassword,
  validGender,
  agreed,
)

userValidator(user1) // true
userValidator(user2) // false
userValidator(user3) //  false
```


higher order function, 고차함수

```javascript
useEffect(() => {
  //.. do something
}, []) // empty deps
```

이렇게 의존성이 비어있는 `useEffect`가 `componentDidMount`와 비슷한 타이밍에 동작하는 것이 아니라는 사실은 이런저런 블로그 글에 많이 나와있다. (사실 가장 비슷한건 `useLayoutEffect`다.)

> [] 는 이펙트에 리액트 데이터 흐름에 관여하는 어떠한 값도 사용하지 않겠다는 뜻입니다. 그래서 한 번 적용되어도 안전하다는 뜻이기도 합니다.

https://iqkui.com/ko/a-complete-guide-to-useeffect/

https://yceffort.kr/2020/10/think-about-useEffect

그러나 여전히 많은 사람들이 (나를 포함해서) 라이프 사이클 메소드의 향기에서 벗어나지 못하고 있는 것 같다.

## componentWillMount

https://ko.reactjs.org/docs/react-component.html#unsafe_componentwillmount

`componentWillMount`는 말그대로 컴포넌트가 마운트 되기 직전에 실행되는 라이프 사이클 메소드다. 그러나 이름에서 보이는 것 처럼, deprecated 가 되었고, 얼마전에 나오는 v17에서는 완전히 사라졌다.

https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes

> For example, with the current API, it is too easy to block the initial render with non-essential logic. In part this is because there are too many ways to accomplish a given task, and it can be unclear which is best. We’ve observed that the interrupting behavior of error handling is often not taken into consideration and can result in memory leaks (something that will also impact the upcoming async rendering mode). The current class component API also complicates other efforts, like our work on prototyping a React compiler.

이유인 즉, 렌더링에 필요하지 않은 로직을 렌더링 직전에 (==`componentWillMount`) 넣어서 렌더링을 방해하는 경우가 많아졌다는 것이다. 그리고 이러한 동작은 메모리 유출을 낳는 경우가 많기 때문에 지원을 중단했다고 밝혔다.

그러나 아직까지도 많은 리액트 라이브러리들이 `componentWillMount`에 의존하고 있다.

## useComponentWillMount

근데 그럼에도 불구하고 정말 정말 mount가 되기 직전에 무언가를 해야한다면, 근데 쓰고 있는 컴포넌트가 함수형이라고 한다면 어떻게 해야할까?

```javascript
export const useComponentWillMount = (func) => {
  const willMount = useRef(true)
  if (willMount.current) func()
  willMount.current = false
}
```

`useRef`는 매번 렌더링할 때 동일한 ref객체를 제공한다. 따라서 func가 딱한번 실행되도록 보장할 수 있다. 그렇다면 이것이 mount되기 직전에 실행된다고 볼 수 있는 이유는 무엇일까?

`useEffect`는 말그대로 부수효과를 발생시키는 hook이기 때문에 렌더링이 된 이후에 실행된다.

그러나 `useRef` 코드에서 함수가 넘어오게 되면, (함수가 호출되는 시점에) 딱 한번 바로 실행할 수 있게 된다. 그리고 이 값은 또한 컴포넌트의 전체 라이프 사이클 내에서 계속해서 유지되는 것을 리액트에서 보장해준다.

> 이 기능은 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다.

> useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것입니다.

또 재밌는 방법은 이것이었다.

```javascript
export const useComponentWillMount = (func) => {
  useMemo(func, [])
}
```

의존성이 없는 `useMemo`를 쓰게 되면, 함수가 다시 호출 될 일이 없으므로 렌더링 직전에 실행되는 것을 보장할 수 있다.

참고: https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks


라이프 사이클의 굴레에서 벗어나

useComponentWillMount??

<pre class="language-javascript"><code class="language-javascript">useEffect(() => {
 //.. do something
}, []) // empty deps
</code></pre>
이렇게 의존성이 비어있는 <code>useEffect</code>가 <code>componentDidMount</code>와 비슷한 타이밍에 동작하는 것이 아니라는 사실은 이런저런 블로그 글에 많이 나와있다. (사실 가장 비슷한건 <code>useLayoutEffect</code>다.)
<blockquote>
[] 는 이펙트에 리액트 데이터 흐름에 관여하는 어떠한 값도 사용하지 않겠다는 뜻입니다. 그래서 한 번 적용되어도 안전하다는 뜻이기도 합니다.
</blockquote>
<a href="https://iqkui.com/ko/a-complete-guide-to-useeffect/">https://iqkui.com/ko/a-complete-guide-to-useeffect/</a>
<a href="https://yceffort.kr/2020/10/think-about-useEffect">https://yceffort.kr/2020/10/think-about-useEffect</a>
그러나 여전히 많은 사람들이 (나를 포함해서) 라이프 사이클 메소드의 향기에서 벗어나지 못하고 있는 것 같다.
<h2 id="componentwillmount">componentWillMount</h2>
<a href="https://ko.reactjs.org/docs/react-component.html#unsafe_componentwillmount">https://ko.reactjs.org/docs/react-component.html#unsafe_componentwillmount</a>
<code>componentWillMount</code>는 말그대로 컴포넌트가 마운트 되기 직전에 실행되는 라이프 사이클 메소드다. 그러나 이름에서 보이는 것 처럼, deprecated 가 되었고, 얼마전에 나오는 v17에서는 완전히 사라졌다.
<a href="https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes">https://reactjs.org/blog/2018/03/29/react-v-16-3.html#component-lifecycle-changes</a>
<blockquote>
For example, with the current API, it is too easy to block the initial render with non-essential logic. In part this is because there are too many ways to accomplish a given task, and it can be unclear which is best. We’ve observed that the interrupting behavior of error handling is often not taken into consideration and can result in memory leaks (something that will also impact the upcoming async rendering mode). The current class component API also complicates other efforts, like our work on prototyping a React compiler.
</blockquote>
이유인 즉, 렌더링에 필요하지 않은 로직을 렌더링 직전에 (==<code>componentWillMount</code>) 넣어서 렌더링을 방해하는 경우가 많아졌다는 것이다. 그리고 이러한 동작은 메모리 유출을 낳는 경우가 많기 때문에 지원을 중단했다고 밝혔다.
그러나 아직까지도 많은 리액트 라이브러리들이 <code>componentWillMount</code>에 의존하고 있다.
<h2 id="usecomponentwillmount">useComponentWillMount</h2>
근데 그럼에도 불구하고 정말 정말 mount가 되기 직전에 무언가를 해야한다면, 근데 쓰고 있는 컴포넌트가 함수형이라고 한다면 어떻게 해야할까?
<pre class="language-javascript"><code class="language-javascript">export const useComponentWillMount = (func) => {
 const willMount = useRef(true)
 if (willMount.current) func()
 willMount.current = false
}
</code></pre>
<code>useRef</code>는 매번 렌더링할 때 동일한 ref객체를 제공한다. 따라서 func가 딱한번 실행되도록 보장할 수 있다. 그렇다면 이것이 mount되기 직전에 실행된다고 볼 수 있는 이유는 무엇일까?
<code>useEffect</code>는 말그대로 부수효과를 발생시키는 hook이기 때문에 렌더링이 된 이후에 실행된다.
그러나 <code>useRef</code> 코드에서 함수가 넘어오게 되면, (함수가 호출되는 시점에) 딱 한번 바로 실행할 수 있게 된다. 그리고 이 값은 또한 컴포넌트의 전체 라이프 사이클 내에서 계속해서 유지되는 것을 리액트에서 보장해준다.
<blockquote>
이 기능은 클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리합니다.
</blockquote>
<blockquote>
useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것입니다.
</blockquote>
또 재밌는 방법은 이것이었다.
<pre class="language-javascript"><code class="language-javascript">export const useComponentWillMount = (func) => {
 useMemo(func, [])
}
</code></pre>
의존성이 없는 <code>useMemo</code>를 쓰게 되면, 함수가 다시 호출 될 일이 없으므로 렌더링 직전에 실행되는 것을 보장할 수 있다.
참고: <a href="https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks">https://stackoverflow.com/questions/53464595/how-to-use-componentwillmount-in-react-hooks</a>

## Table of Contents

## 자바스크립트의 함수는 일급 객체다

일급객체의 정의는 다음과 같다.

1. 모든 요소는 함수의 실제 매개변수가 될 수 있다.
2. 모든 요소는 함수의 반환 값이 될 수 있다.
3. 모든 요소는 할당 명령문의 대상이 될 수 있다.
4. 모든 요소는 동일 비교의 대상이 될 수 있다.

자바스크립트에서 함수는, 다음 모두를 충족 시키므로 일급 객체라고 볼 수 있다.

## 함수를 선언하는 6가지 방법

### 1. named function declaration (명명 함수 선언)

```javascript
function hello() {
  // ...
}
```

가장 대중적인 방법이다. 함수의 이름이 `hello`가 된다. 이미 여러차례 싸질러 놨듯, 호이스팅 되기 때문에 이 함수는 어느 스코프에서든 호출 할 수 있는 함수가 된다.

### 2. anonymous function expression (익명 함수 표현)

```javascript
var hello = function () {
  //...
}
```

이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 함수긴 한데, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다.

```javascript
var hello = function () {
  //...
}

hello.name

//  > "hello"
hello

// > ƒ () {
//   //...
// }
```

변수 할당은 호이스팅 되지 않으므로, 할당 된 이후에만 실행 가능하다.

### 3. named function expression (명명 함수 표현)

```javascript
var hello = function originalName() {
  // ...
}
```

2와 거의 동일하다. 다른 점은 함수 이름이 명확하게 선언되어 있으므로 JS 엔진에 의해 추론되지 않는 다는 것이다.

### 4. Immediately-invoked expression (즉시 실행 표현)

```javascript
var hello = (function () {
  //...
})()
```

즉시 실행 함수로, 클로져를 활용할 수 있다. 내부 함수는 변수나 다른 함수등을 쓸 수 있지만,이 함수 밖에서는 완전히 캡슐화되어 접근 할 수 없다. 가장 흔해 빠진 예제 중 하나로는 카운터가 있다.

```javascript
var myCounter = (function (initialValue = 0) {
  let count = initialValue
  return function () {
    count++
    return count
  }
})(1)

myCounter() // 2
myCounter() // 3
myCounter() // 4
```

외부 함수에서 넘겨준 1을 가지고, 내부에서 처리를 하여 리턴하고 있다.

### 5. function constructor

```javascript
var hello = new Function()
```

아마도 이런식으로 함수를 쓸일은 거의 없을 것이다.

```javascript
const adder = new Function('a', 'b', 'return a + b')
adder(2, 6)
// 8
```

이는 `eval()`을 사용하는 것과 같기 때문에 굉장히 위험하다. 그리고 이 생성자는 전역 범위로 한정된 함수만 생성할 수 있다.

### 6. arrow function (화살표 함수)

```javascript
var hello = () => {
  //...
}
```

그리고 요즘들어 많이 쓰이고 있는 화살표 함수다. 몇가지 다른게 있다면

- `constructor`로 쓰일 수 없다.
- `prototype`을 가지고 있지 않는다.
- `yield` 키워드를 허용하지 않으므로 generator를 쓸 수 없다.
- `this`도 다르다.

#### 리턴

```javascript
const f1 = (x, y, z) => x + y + z

const f2 = (x, y, z) => {
  return x + y + z
}
```

위 `f1` `f2`는 값이 같다. object를 바로 리턴하려면 괄호를 씌우면 된다.

```javascript
const f3 = (x, y, z) => ({ x, y, z })
```

## this

근데 이 얘기는 내가 너무 많이 떠든거 같다. https://yceffort.kr/2020/05/difference-between-function-and-arrow#1-this%EC%99%80-arguments%EC%9D%98-%EC%B0%A8%EC%9D%B4


거의 모든 것이라고 했지만 사실 그렇진 않음 어그로임

자바스크립트 함수를 선언하는 여섯가지 방법

버튼 중복 클릭을 방지하는 것은 중요하다. 물론 기본적인 중복 방지에 대한 처리는 서버에 되어 있어야 하지만, 그렇다고 마냥 프론트엔드에서 손놓고 있을 수는 없는 일이다.

주니어 풀스택 개발자일때, 중복 클릭에 대해서 프론트엔드에서 부단히도 막아보려고 노력했지만, 사용자들은 갖가지 방법으로 여러번 클릭을 했고, 그 때마다 사용자들은 더욱 더 빠른 속도로 (혹은 창의적인 방법으로) 중복클릭을 해서 괴롭히곤 했다. 결국 어느정도 감내하고 (?) 서버에서 막는 방향으로 가긴했지만 - 그 때 마다 더 좋은 방법이 없을까 고민하곤 했다. 그 때 나왔던 다양한 중복 클릭 방지 방법을 이야기 해보고, 문제점은 무엇이었으며, 이를 해결할 수 있는 최선의 코드를, 함수형으로 써보면 어떻게 되는지 알아보장

## 방법 1) 글로벌 플래그 사용하기

```javascript
let clicked = false

function payment() {
 if (!clicked) {
 clicked = true
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
 }
}
```

이 방법도 물론 작동은 하겠지만 몇가지 문제가 있다.

- 전역 변수를 선언하는 것은 위험하다. 전역변수는 누구든 접근 가능하기 때문에, 자신이 알지도 못하는 새에 값이 변경될 수 있다.
- 사용자가 다시 버튼을 누를 수 있는 상황에 대비하여 해당 변수를 다시 초기화 하는 코드를 어딘가에도 넣어야 한다.
- 외부 변수에 의존하기 때문에 테스트 하기가 곤란하다.

## 방법 2) 핸들러를 날려 버리기 (혹은 변경하기)

```javascript
function payment() {
 document.getElementById('payment').onclick = null
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
}
```

이 방법도 일단은 작동하겠지만 문제가 존재한다.

- DOM의 버튼과 매우 강하게 연결 되어 있는 코드 이기 때문에, 재사용이 불가능하다.
- 위 예제와 마찬가지로 다시 버튼 클릭할 수 있는 상황에 대비하여 초기화하는 코드가 필요하다.
- DOM 요소가 있어야만 테스트가 가능하다.

## 방법 3) 버튼을 disable 처리하기

```javascript
function payment() {
 document.getElementById('payment').setAttribute('disabled', 'true')
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
}
```

역시 위와 마찬가지 이슈가 있다.

## 방법 4) 지역 변수 사용하기

```javascript
var payment = ((clicked) => {
 return () => {
 if (!clicked) {
 clicked = true
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
 }
 }
})(false)
```

이번에는 즉시실행함수를 사용하였다. 이는 함수형 접근법이기도 하고, `clicked`를 외부에서 접근할 수 없기도 하다. 1번의 예제에서 전역변수로 되어 있던 것을 지역변수로 바꾸고, 스코프를 잠궈서 접근하지 못하게 했다고 생각하면 된다. 이 코드의 단점은 한번만 클릭이 필요한 모든 함수에 대해서 이와 같이 똑같이 작업을 해야한다는 것이다.

## (아마도) 최선의 방법

- 단 한번만 호출해야 하는 원래 함수는 원래 작업 (결제) 이외의 작업을 해서는 안된다.
- 원본 함수를 수정해서는 안된다.
- 원본 함수를 한번만 호출하는 새로운 함수가 필요하다.
- 기존 기능에 적용할 수 있는 일반적인 솔루션이 필요하다.

여기에 필요한 것이 바로 고차함수 (higher-order function) 이다.

```javascript
const doOnce = (fn) => {
 let done = false
 return (...args) => {
 if (!done) {
 done = true
 fn(...args)
 }
 }
}
```

```typescript
const doOnceTypescript = (fn: Function) => {
 let done = false
 return (...args: any) => {
 if (!done) {
 done = true
 fn(...args)
 }
 }
}
```

이를 적용하면 아래와 같은 모습일 것이다.

```html
<button id="payment" onclick="doOnce(payment)()">결제하기</button>
```

어렸을 때 내가 어떻게 했더라?

(함수형으로) 자바스크립트로 HTML 버튼 중복 클릭 방지하기

버튼 중복 클릭을 방지하는 것은 중요하다. 물론 기본적인 중복 방지에 대한 처리는 서버에 되어 있어야 하지만, 그렇다고 마냥 프론트엔드에서 손놓고 있을 수는 없는 일이다.
주니어 풀스택 개발자일때, 중복 클릭에 대해서 프론트엔드에서 부단히도 막아보려고 노력했지만, 사용자들은 갖가지 방법으로 여러번 클릭을 했고, 그 때마다 사용자들은 더욱 더 빠른 속도로 (혹은 창의적인 방법으로) 중복클릭을 해서 괴롭히곤 했다. 결국 어느정도 감내하고 (?) 서버에서 막는 방향으로 가긴했지만 - 그 때 마다 더 좋은 방법이 없을까 고민하곤 했다. 그 때 나왔던 다양한 중복 클릭 방지 방법을 이야기 해보고, 문제점은 무엇이었으며, 이를 해결할 수 있는 최선의 코드를, 함수형으로 써보면 어떻게 되는지 알아보장
<h2 id="방법-1-글로벌-플래그-사용하기">방법 1) 글로벌 플래그 사용하기</h2>
<pre class="language-javascript"><code class="language-javascript">let clicked = false

function payment() {
 if (!clicked) {
 clicked = true
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
 }
}
</code></pre>
이 방법도 물론 작동은 하겠지만 몇가지 문제가 있다.
<ul>
<li>전역 변수를 선언하는 것은 위험하다. 전역변수는 누구든 접근 가능하기 때문에, 자신이 알지도 못하는 새에 값이 변경될 수 있다.</li>
<li>사용자가 다시 버튼을 누를 수 있는 상황에 대비하여 해당 변수를 다시 초기화 하는 코드를 어딘가에도 넣어야 한다.</li>
<li>외부 변수에 의존하기 때문에 테스트 하기가 곤란하다.</li>
</ul>
<h2 id="방법-2-핸들러를-날려-버리기-혹은-변경하기">방법 2) 핸들러를 날려 버리기 (혹은 변경하기)</h2>
<pre class="language-javascript"><code class="language-javascript">function payment() {
 document.getElementById('payment').onclick = null
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
}
</code></pre>
이 방법도 일단은 작동하겠지만 문제가 존재한다.
<ul>
<li>DOM의 버튼과 매우 강하게 연결 되어 있는 코드 이기 때문에, 재사용이 불가능하다.</li>
<li>위 예제와 마찬가지로 다시 버튼 클릭할 수 있는 상황에 대비하여 초기화하는 코드가 필요하다.</li>
<li>DOM 요소가 있어야만 테스트가 가능하다.</li>
</ul>
<h2 id="방법-3-버튼을-disable-처리하기">방법 3) 버튼을 disable 처리하기</h2>
<pre class="language-javascript"><code class="language-javascript">function payment() {
 document.getElementById('payment').setAttribute('disabled', 'true')
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
}
</code></pre>
역시 위와 마찬가지 이슈가 있다.
<h2 id="방법-4-지역-변수-사용하기">방법 4) 지역 변수 사용하기</h2>
<pre class="language-javascript"><code class="language-javascript">var payment = ((clicked) => {
 return () => {
 if (!clicked) {
 clicked = true
 window.alert('결제가 진행 중입니다.')
 // 결제 프로세스..
 }
 }
})(false)
</code></pre>
이번에는 즉시실행함수를 사용하였다. 이는 함수형 접근법이기도 하고, <code>clicked</code>를 외부에서 접근할 수 없기도 하다. 1번의 예제에서 전역변수로 되어 있던 것을 지역변수로 바꾸고, 스코프를 잠궈서 접근하지 못하게 했다고 생각하면 된다. 이 코드의 단점은 한번만 클릭이 필요한 모든 함수에 대해서 이와 같이 똑같이 작업을 해야한다는 것이다.
<h2 id="아마도-최선의-방법">(아마도) 최선의 방법</h2>
<ul>
<li>단 한번만 호출해야 하는 원래 함수는 원래 작업 (결제) 이외의 작업을 해서는 안된다.</li>
<li>원본 함수를 수정해서는 안된다.</li>
<li>원본 함수를 한번만 호출하는 새로운 함수가 필요하다.</li>
<li>기존 기능에 적용할 수 있는 일반적인 솔루션이 필요하다.</li>
</ul>
여기에 필요한 것이 바로 고차함수 (higher-order function) 이다.
<pre class="language-javascript"><code class="language-javascript">const doOnce = (fn) => {
 let done = false
 return (...args) => {
 if (!done) {
 done = true
 fn(...args)
 }
 }
}
</code></pre>
<pre class="language-typescript"><code class="language-typescript">const doOnceTypescript = (fn: Function) => {
 let done = false
 return (...args: any) => {
 if (!done) {
 done = true
 fn(...args)
 }
 }
}
</code></pre>
이를 적용하면 아래와 같은 모습일 것이다.
<pre class="language-html"><code class="language-html">&#x3C;button id="payment" onclick="doOnce(payment)()">결제하기&#x3C;/button>
</code></pre>

가령 아래와 같은

```javascript
const button = document.querySelector("button");
button.addEventListener("click", (event) => /* do something with the event */)
```

이 코드에서, 버튼 클릭에 대해서 리스너를 달았다. 이 뜻은 이벤트가 발생하는 것 (emitted를 발생하다라고 의역했다.) 에 대해서 구독을 했다는 것이고, 그러한 이벤트가 발생할 경우 콜백을 실행하겠다는 것을 의미한다. 버튼을 클릭할 때 마다, 이벤트가 발생하게 되고 해당 이벤트와 함께 콜백이 실행된다.

기존 코드베이스에서 작업 할 때, 커스텀 이벤트를 발생시키고 싶을 때가 있다. 버튼 클릭과 같은 DOM 이벤트 말고, 다른 트리거를 기반으로 이벤트를 내보내고 응답하도록 한다고 가정해보자. 이를 위해서는 커스텀 EventEmitter가 필요하다.

EventEmitter란 정의된 이벤트를 수신하고, 콜백을 실행한다음, 값과 함께 해당 이벤트를 내보내는 패턴이다. 이를 `pub, sub` 모델, 혹은 리스너라고 부르기도 한다.

```javascript
let n = 0
const event = new EventEmitter()
event.subscribe('THUNDER_ON_THE_MOUNTAIN', (value) => (n = value))
event.emit('THUNDER_ON_THE_MOUNTAIN', 18)
// n: 18
event.emit('THUNDER_ON_THE_MOUNTAIN', 5)
// n: 5
```

위 예제에서는 `THUNDER_ON_THE_MOUNTAIN`라고불리는 이벤트를 구독하였고, 이 이벤트가 발생할 때 마다 콜백 `(value) => (n = value)`를 실행하였다.이 이벤트를 실행하기 위하여, `.emit()`을 사용하였다.

이는 비동기 코드로 작업 할 때 유용하다. 그리고 현재 모듈과 다른 위치에서 값을 업데이트 해야 한다. (값을 업데이트 할 수 있는 스코프가 되어야 한다.)

이에 대한 적절한 예가 Redux다. Redux는 내부 저장소가 업데이트 된 것을 외부에 공유해 줄 수 있는 방법이 필요하다. 그래야 리액트가 해당 값이 변경되었다는 것을 인지하고 `setState()`를 호출하여 다시 렌더링을 할 수 있다. 이러한 일련의 과정이 `EventEmitter`를 통해 이루어진다. Redux에는 subscribe 함수가 존재하며, 이는 새로운 값을 받을 때 마다 실행되는 콜백을 함수로 받는다. 이를 Redux `<Provider />` 컴포넌트라고 하며, 새로운 값을 받을 때 마다 `setState()`를 호출한다.

## Implementation

위 EventEmitter는 Nodejs에만 존재한다. 한번 실재로 이를 구현해보도록 하자.

```typescript
class EventEmitter {
 public events: Events
 constructor(events?: Events) {
 this.events = events || {}
 }
}
```

### Events

Events 인터페이스를 정의해보자.

```typescript
interface Events {
 [key: string]: Function[]
}

/**
{
 "event": [fn],
 "event_two": [fn]
}
*/
```

### Subscribe

먼저 정의된 이벤트를 구독할 방법이 필요하다.

```typescript
event.subscribe('named event', (value) => value)
```

두개의 파라미터 (이벤트 명, 콜백)을 받을 수 있도록 구현해보자.

```typescript
class EventEmitter {
 public events: Events
 constructor(events?: Events) {
 this.events = events || {}
 }

 public subscribe(name: string, cb: Function) {
 ;(this.events[name] || (this.events[name] = [])).push(cb)
 }
}
```

### Emit

다음으로, `emit`을 활용해서 이벤트를 발생시키는 코드를 구현해야 한다. 파라미터는 몇개가 있을지 모르므로, 유연하게 대처해야 한다.

```typescript
class EventEmitter {
 public events: Events
 constructor(events?: Events) {
 this.events = events || {}
 }

 public subscribe(name: string, cb: Function) {
 ;(this.events[name] || (this.events[name] = [])).push(cb)
 }

 public emit(name: string, ...args: any[]): void {
 ;(this.events[name] || []).forEach((fn) => fn(...args))
 }
}
```

### Unsubscribing

이제는 이벤트 구독을 해제 해보자.

```javascript
subscribe(name: string, cb: Function) {
 (this.events[name] || (this.events[name] = [])).push(cb);

 return {
 unsubscribe: () =>
 this.events[name] && this.events[name].splice(this.events[name].indexOf(cb) >>> 0, 1)
 };
}
```

이제 `subscribe`에서 `unsubscribe`를 리턴한다. 화살표 함수를 활용하여 부모 스코프와 같은 스코프를 사용할 수 있도록 했다. 이 함수에서, 부모에게 전달한 콜백의 인덱스를 찾고자 bitwise operator (`>>>`) 를 사용했다.

이제 아래와 같이 이벤트 구독을 해제 할 수 있다.

```javascript
const subscription = event.subscribe('event', (value) => value)

subscription.unsubscribe()
```

## 결론

```typescript
interface Events {
 [key: string]: Function[]
}

export class EventEmitter {
 public events: Events
 constructor(events?: Events) {
 this.events = events || {}
 }

 public subscribe(name: string, cb: Function) {
 ;(this.events[name] || (this.events[name] = [])).push(cb)

 return {
 unsubscribe: () =>
 this.events[name] &&
 this.events[name].splice(this.events[name].indexOf(cb) >>> 0, 1),
 }
 }

 public emit(name: string, ...args: any[]): void {
 ;(this.events[name] || []).forEach((fn) => fn(...args))
 }
}
```

출처: https://css-tricks.com/understanding-event-emitters/

면접 때 잘 대답 못했던 질문 22222

yceffort

higher order function, 고차함수

useComponentWillMount??

자바스크립트 함수를 선언하는 여섯가지 방법

(함수형으로) 자바스크립트로 HTML 버튼 중복 클릭 방지하기

EventEmitter 구현해보기