고차함수

자바스크립트는 함수가 함수를 반환할 수 있다

const func = () => {
  return () => {
    console.log("hello");
  };
};

const innerFunc = func();
innerFunc() //hello

func 함수를 호출하면 함수를 반환한다.

! 하지만 hello 말고 다른 값 으로 바꾸고 싶다면 어떻게 해야 할까?

: 매개변수로 만들어 준다!

const func = (message)=>{
  return()=>{
    console.log(message)
  }
}

const innerFunc1=func("love")
const innerFunc2=func("javascript")

innerFunc1() //love
innerFunc2() //javascript

func함수를 실행해주면 func함수에 넣은 매개변수를 console.log하는 함수가 반환 된다
전달만 하지 실행은 하지 않기 때문에 console.log 출력하고 싶다면 innerFunc 함수를 실행시켜 주면 된다

함수의 본문에서 바로 반환되는 값이 있을 때

{ 와 return 생략가능하다

전

const func = (message)=>{
  return()=>{
    console.log(message)
  }
}

후

const func = (message) => () => {
  console.log(message);
};

의미 : message라는 매개변수를 가지고 함수를 return하는데 그 함수는 () => { console.log(message) } 이다

그래서 어떤경우에 사용 할 수 있을까??

지금까지 만드는 작은 프로젝트들은 중복을 제거하기 쉽지만 실무에서는 모든 내부 코드가 같은 함수보다 대부분 다 비슷한데 특정부분만 다른 함수가 많다.

---

(활용하기 위한 쉬운 예시)만약 계산기를 만든다고 가정해보자.
아직 이벤트 위임을 배우지 않아서 각 연산자버튼마다 이벤트 리스너를 등록해 줬다. 고차함수 이용하지 않고서는 함수의 중복을 피하기 힘들어 진다.

const onClickOperator=(op)=>()=>{
  if(numberOne){
    operator=op;
    $operator.value=op;
  }else {
    alert('숫자를 먼저 입력하세요')
  }
}

document.querySelector("#plus").addEventListener("click",onClickOperator('+'))
document.querySelector("#minus").addEventListener("click",onClickOperator('-'))
document.querySelector("#multiply").addEventListener("click",onClickOperator('*'))
document.querySelector("#divide").addEventListener("click",onClickOperator('/'))

1. 여기서 왜 고차함수가 필요하냐면 함수 다음 괄호를 붙이면 함수가 바로 실행되어 (op)=>이후 부분의 함수가 return 된다.
2. 그래서 실제로 클릭이 되었을 때는 처음 이벤트리스너에 등록했을 때 return된 함수가 등록된 인자와 함께 호출이 된다.

check !

const hof = (a) => (b) => (c) => {
  return a + b * c;
};

const first = hof(3);
const second = first(4);
const third = second(5);
console.log(third);

1. hof(3)은 (b)=>(c)=>{ return a + b + c } 를 return한다
2. first(4)는 (c) = > { return a + b + c } 를 return한다
3. second(5)는 a + b * c 를 return 한다

출처

Let's get it 자바스크립트 프로그래밍