고차함수(Higher Order Function)

• 함수를 인자로 받거나 함수를 반환값으로 받는 함수를 가리킨다.
• JavaScript에서의 함수는 Object이다.

  • 이전의 프로토타입 체인 등을 공부했던 내용을 떠올려보면 JavaScript에서의 함수는 객체로 받고 있다는 것을 알 수 있을 것이다.

    • 객체이기 때문에, 함수 표현식을 이용해 함수를 변수에 할당할 수 있다.
    • 또한, 다른 함수의 인자에 함수를 전달할 수도 있다.
    • 아울러 함수의 반환값을 함수로서 전달할 수 있다.

    const message = () => {
    	console.log('함수는 객체라서, 이렇게 변수에 할당할 수 있다.')
    }
    
    function example(message) {
    	console.log('변수에 할당할 수 있다보니, 함수의 인자로도 전달할 수 있다.')
    	return message;
    	// 그리고 함수의 반환값으로 함수를 전달할 수도 있다.
    }
    

    위의 내용을 콘솔창에 입력하면 아래와 같이 결과를 볼 수 있다.

    

    • 이처럼 변수에 할당할 수 있고, 다른 함수의 인자로도 전달할 수 있으며 다른 함수의 결과로서 반환될 수 있는 객체를 ‘일급 객체(First-class Object)’라고 부른다.
      • JavaScript의 함수는 그런 일급 객체의 조건을 갖추고 있다.

콜백 함수(Callback Function)

• 고차 함수의 형태 중에선 ‘다른 함수의 인자’로 전달되는 함수가 있는데, 이를 콜백 함수라고 부른다.

  const button = document.querySelector('#btn');
  
  button.addEventHandler('click', sayHello());
  
  function sayHello() {
  	console.log("안녕하세요!")
  }
  

  위의 코드에서 sayHello()라는 함수는 button이라는 문서 객체 내에 addEventHandler라는 메소드(함수)를 통해 인자로 보내진다.

  이 인자는 버튼을 클릭하기 전까지는 동작하지 않으나, 버튼을 클릭하는 이벤트가 작동될 때, 이벤트 호출을 받아와 인자에 있는 sayHello() 함수를 반환하여 내용을 작동시키게 한다.

  즉, 어떤 이벤트나 작업이 이루어질 때 호출되여 작동한다는 의미로서 답신의 의미인 ‘Callback’을 담아 ‘콜백 함수’라고 불리게 된다.

커리 함수(Curry Function)

• 고차 함수의 형태 중에선 ‘다른 함수를 반환하는 함수’가 있는데, 이를 커리 함수라고 부른다.
• 커리(Curry)라는 이름은 해당 방식을 고안해 낸 논리학자인 하스켈 커리(Haskell Curry)의 이름을 따왔다고 전해진다.

const curryExample = () => {
	return () => {
		console.log("커리 함수입니다!");
	}
};

curryExample;
//  function curryExample() {
//    return () => {
//      console.log("커리 함수입니다!");
//    }
//  }
// 변수의 내용인 함수 내용 자체를 가져온다.

curryExample();
//  () => {
//    return console.log("커리 함수입니다!");
//  }
// 함수를 실행하면 curryExample 함수가 반환하는 함수의 내용을 가져온다.

위와 같은 형태처럼 외부 함수를 실행하면 return값으로 내부의 함수를 반환하는 형태를 가진다. (이러한 형태를 클로저라고 부르는데 해당 내용은 추후에 다룰 것이다.)

이런 경우, 반환 값으로 받고 있는 내부에 있는 함수를 실행하려면 어떻게 해야할까? 바로 아래와 같이 실행하면 된다.

curryExample()();
//  커리 함수입니다!

앞서 변수 curryExample를 받아오면 함수의 내용을 반환한다. 함수 표현식으로 만들었으니, 이 변수를 함수로서 호출하면 그 함수의 실행 결과를 반환한다.

내부 함수의 값을 반환하려면, 결국 함수 curryExample 함수의 실행 결과로서 반환된 함수를 실행해야 하는 건데 이 방식은 위의 내용처럼 이어서 호출하는 것으로 값을 받아올 수 있게 된다.

위의 내용을 응용하면 이런 식으로도 표현할 수 있다.

const curryExample = () => {
	return () => {
		console.log("커리 함수입니다!");
	}
};

const ex1 = curryExample();

console.log(ex1);
console.log(ex1());

JavaScript의 함수는 이런 커리 함수와 콜백 함수를 사용하지 않을 수도 있고, 단독적으로 쓰거나 함께 적용할 수도 있다.

• 즉, 고차 함수 속에 콜백 함수와 커리 함수가 포함되어 있다.

배열의 내장 고차 함수

• JavaScript의 배열은 함수와 동일하게 객체로 취급한다.
• 배열은 여러 개의 내장 메소드들을 prototype 객체에 저장해두고 있는데, 그 중에서는 콜백 함수와 커리 함수를 허용하는 메소드들이 있다.
  • 즉, 함수를 인자로 받거나 함수를 반환하는 배열의 내장 함수들이 존재한다.
  • 이를 배열의 내장 고차 함수라고 말한다.
• 대표적인 배열의 내장 고차 함수, 즉 메소드는 아래와 같은 것들이 있다.
  • map, reduce, filter, sort, forEach, find …