커링Currying

// const handler = (e, id) => {
// console.log(${id} 여길 클릭했구나 ${e.offsetX});
// };

  //   document.addEventListener("click", (e) => handler(e, "클릭"));
  //근데 지금 이벤트리스너 안에 콜백부분이 좀 번잡해서
  // 함수를 반환하는 함수를 넣으면 된다.
  ///////////////////////

  //즉, 이렇게 수정하면,
  const handler = (id) => (e) => {
    console.log(`${id} 여길 클릭했구나 ${e.offsetX}`);
  };

  document.addEventListener("click", handler("클릭")); // 이 콜백함수가 함수를 반환하면 자동으로 event 객체를 넣어준다.
  //즉, 브라우져에서 자동으로 event 객체를 바인딩 ,즉, 반환함수에다가 event 넣어준다.
  //훨씬 깔끔해졌다.

  /////////////////////////////////////////////////
  /////////////////////////////////////////////////
  ////////////////////////////////////////////////

  //예제를 하나 더보자면,

  const cache = (fn) => (a) => {
    return (b) => fn(a, b);
  };

  const add = (a, b) => a + b;

  cache(add)("hello")("world"); // 'helloworld'

  const store = cache(add)("hello");
  store("스토어"); // 'hello스토어'
  store("상점"); // 'hello상점'
  //즉, 값을 바인딩하고 지연 실행하는 것입니다.
  // 이걸 Currying , 커링 이라고 한다. 커링기법이다. 작업을 나눠서 실행하는것이다.
  // 만든 함수는 2개인데 , 함수를 4개처럼 쓸 수 있는거다.