[JS] 고차 함수

JS강의를 들으면서 어떤 것을 TIL로 적어야 할지 잘 모르겠다는 생각이 드는 요즘이다.
뭘 적어도 되게 사소하고 애매한 것 같은 느낌적인 느낌이랄까??
그래서 그냥 사소한 거라도 내가 몰랐던 것을 알게 되었다면 그게 TIL인 거 같으니까 부담 갖지 말고 편안하게 생각하기로 했다.

---

함수는 호출하면 어떤 값을 반환한다.
(어떤 값은 숫자나 문자열, boolean 값 등으로 제한되어 있지 않고, JS의 모든 자료형이 될 수 있다)

즉, 함수가 함수를 반환할 수도 있다.

const func = () => {
  return () => {
    console.log('hi JS');
  };
};

func 함수를 호출하면 함수를 반환한다. 반환된 함수는 아래처럼 다른 변수에 저장할 수 있고 변수에 저장된 함수를 다시 호출할 수도 있다.

const highFunc = func();
highFunc(); // hi JS

다시 말하자면, highFunc()과 func()는 같고, highFunc()은 func()의 return 값이다.

const highFunc = () => {
  console.log('hi JS');
};
  highFunc(); // hi JS

---

아래의 코드와 같이 함수가 호출된 코드 (함수 이름 뒤에 ()가 붙은 코드)가 있다면, 그 부분을 실제 return값으로 생각.
그러면 highFunc들도 다 함수가 되는 것임. (func함수를 호출할 때마다 반환한 highFunc1, 2, 3 함수가 생성된다.)

const highFunc1 = func();
const highFunc2 = func();
const highFunc3 = func();

🧐 그렇다면 위의 'hi JS' 라는 문자열을 다른 값으로 바꾸고 싶을 때 어떻게 해야 하는가?
=> 반환하는 값을 바꾸고 싶다면 매개변수를 사용하라!

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

그리고, highFunc1, 2, 3에서 func 함수를 호출하면, func 함수에 넣은 매개변수를 console.log 하는 함수가 반환됨.

const highFunc1 = func('hi JS');
const highFunc2 = func('coding');
const highFunc3 = func();
highFunc1(); // hi JS
highFunc2(); // coding
highFunc3(); // undefined

func 함수 호출 부분을 return 값으로 대체해보면 아래와 같이 된다.

const highFunc1 = () => {
  console.log('hi JS');
};
const highFunc2 = () => {
  console.log('coding');
};
const highFunc3 = () => {
  console.log(); // 빈값은 undefined
};

---

✨ 고차 함수 : func처럼 함수를 만드는 함수를 고차 함수라고 한다.

화살표 함수 문법에 따라 함수의 본문에서 바로 반환되는 값이 있으면 { 와 return을 생략할 수 있으므로

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

위의 코드는 다음의 코드로 대체할 수 있다.

// 고차 함수에서 { 와 return을 생략했을 경우

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

 

고차함수의 중복을 제거한 또 다른 예시!

const anotherFunc = (number) => (
  return (event) => {
    console.log('another ex');
  }
};

// 중복을 제거한 고차함수

const anotherFunc = (number) => (event) => {
  console.log('another ex');
};

 

👍 고차 함수를 쓰는 이유 : 함수 간의 중복을 제거하기 위해! 함수들이 비슷한 일을 해서 중복될 때 사용하면 됨.

 

---

※ 참고 : ZeroCho Tv - ES2021 자바스크립트 강좌