[TIL] Higher-order functions (고차함수)

Higher-order functions(HOF, 고차함수)

• 고차함수란
  함수를 리턴하거나 함수를 매개변수로 전달받는 함수
  넘겨받은 함수를 호출하거나 클로저로 리턴하는 역할
  즉, 함수를 인자로 전달받거나, 함수를 반환하는 함수를 의미함

고차함수를 이해하기 위해선 두 가지를 우선 이해해야 한다.

(1) Functional Programming (함수형 프로그래밍)

• 함수를 다른 함수의 파라미터로 넘길 수도 있고, return값으로 함수를 받을 수도 있는 프로그래밍 형태.

(2) First-Class citizien (일급 객체)

• Js에선 함수를 데이터(string, number, boolean, object, array)를 다루듯 다룰 수 있음.
• 이에 따라 변수에 할당할 수 있으며, 다른 함수 인자로 전달될 수도 있고, 다른 함수의 결과로 리턴될 수도 있음
• 또한 Js 함수에도 속성과 메서드가 있어 .length나 .name과 같은 속성 또는 .toString()과 같은 메서드가 있음
  ※ 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

더 자세히 알아보자!

1. Functions as Data

Js 함수는 다른 데이터 유형처럼 함수를 변수에 할당하고, 새 변수에 다시 할당할 수 있다.

예를 들어 함수 이름이

const announceThatIAmDoingImportantWork = () => {
    console.log("I’m doing very important work!");
};

와 같이 너무 길어 가독성이 떨어질 경우, 소스 코드를 해치지 않고 함수이름을 바꾸기 위해, 아래와 같이 짧은 이름의 변수에 함수를 재할당 할 수 있다

const busy = announceThatIAmDoingImportantWork;
busy(); 

🧐 여기서 주목할 점은, busy 변수에 대한 값으로 괄호 없이 announceThatIAmDoingImportantWork을 할당했다는 것이다.
즉 호출될 때 반환되는 값이 아니라 함수 자체의 값을 할당했다는 뜻!
앞서 말했듯이 JS함수는 1급객체로써 속성과 메서드가 존재하며, 호출을 할 수 있기에 다른 유형의 데이터들처럼 처리가 가능하다.!!

⚡ TIP

기존의 함수명이 기억나지 않을 경우, 함수 속성 (.name)을 활용하여 찾을 수 있음

console.log(work.name);

//output : announceThatIAmDoingImportantWork

2.Functions as Parameters

• JS 함수는 다른 유형의 데이터처럼 동작할 수 있기에, 매개변수로 함수를 (다른 함수로) 전달할 수 있다.
• 앞서 말했듯, 고차함수는 함수를 매개변수로 받아들이거나, 함수를 반환(return)하거나, 또는 둘 다 할 수 있다.
• 이때 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.
• 콜백 함수를 전달받은 함수는 이 콜백 함수를 invoke(호출)할 수 있다.

const timeFuncRuntime = funcParameter => {
   let t1 = Date.now();
   funcParameter();
   let t2 = Date.now();
   return t2 - t1;
}
 
const addOneToOne = () => 1 + 1;
 
timeFuncRuntime(addOneToOne);

위의 예시를 보면,
고차함수인 timeFuncRuntime()이 작성되어 있다.

*함수를 인자로 취하고, 시작시간(t1)을 저장하고, 콜백 함수를 호출(funcParameter())하고, 함수가 호출된 후 시간(t2)을 기록하고, 종료시간(t2)에서 시작시간(t1)을 뺀 후 함수 실행에 걸린 시간을 반환(return)*

그 후 addOneToOne() 함수를 이용하여 timeFuncRuntime()을 호출했다.

익명함수도 인자가 될 수 있다.

timeFuncRuntime(() => {
  for (let i = 10; i>0; i--){
    console.log(i);
  }
});

에서 볼 수 있듯이
10부터 거꾸로 세는 익명함수를 사용하여 timeFuncRuntime()를 호출하였다.