[Week3-2] JS/Node 고차함수

## 고차 함수(higher order function) 이해하기

### 목표

• 일급 객체(first-class citizen)의 세 가지 특징을 설명할 수 있다.
• 고차 함수(higher-order function)에 대해 설명할 수 있다.
• 고차 함수를 자바스크립트로 작성할 수 있다.

 

자바스크립트에서 함수는 다음과 같이 특별한 취급을 받는다.

• 변수에 할당(assignment) 할 수 있다.
• 다른 함수의 인자(argument)로 전달될 수 있다.
• 다른 함수의 결과로써 리턴될 수 있다.

함수를 변수에 할당할 수 있기 때문에 이는 함수를 데이터(string, number, boolean, array, object)를 다루듯이 다룰 수 있다는 걸 의미한다.

 

1. 변수에 함수를 할당하는 경우

/*
 * 아래는 변수 square에 함수를 할당하는 함수 표현식입니다.
 * 자바스크립트에서 함수는 일급 객체이기 때문에 변수에 저장할 수 있습니다.
 *
 * 함수 표현식은 할당 전에 사용할 수 없습니다.
 * square(7); // --> ReferenceError: Can't find variable: square
 */

const square = function (num) {
  return num * num;
};

// square에는 함수가 저장되어 있으므로 (일급 객체), 함수 호출 연산자 '()'를 사용할 수 있습니다.
output = square(7);
console.log(output); // --> 49

상기의 함수 표현식은 함수 선언식과 다르게 호이스팅(Hoisting)이 적용되지 않는다.

 

• 호이 스팅은 선언된 위치에 관계없이 어디서든 함수를 사용할 수 있도록 한다.
• 코드가 실행되는 과정에서 함수 선언부를 코드의 최상단으로 끌어올리는 것처럼 보이게 한다.

함수 선언식의 호이 스팅에 지나치게 의존하게 되다면, 코드의 유지보수가 쉽지 않다. 코드 위치를 상단 하단 아무 곳이나 상관없기 때문에 함수 실행 위치가 중요하지 않게 된다. 반면 함수 표현식은 함수의 할당과 실행 위치에 따라서 결과가 달라지기 때문에 코드의 위치를 어느 정도 예측할 수 있게 된다.

그리고 함수는 변수에 저장된 데이터를 인자로 받거나, 리턴 값으로 사용할 수 있다. 함수도 변수로 저장할 수 있기 때문에 마찬가지로 인자로 받거나 리턴 값으로 사용할 수 있다.

 

고차 함수란?

함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수이다.

여기서 다른 함수(caller)의 인자(argument)로 전달되는 함수를 콜백 함수(callback function)라고 한다.

 

1. 다른 함수를 인자로 받는 경우

function double(num) {
  return num * 2;
}

function doubleNum(func, num) {
  return func(num);
}

/*
 * 함수 doubleNum은 다른 함수를 인자로 받는 고차 함수입니다.
 * 함수 doubleNum의 첫 번째 인자 func에 함수가 들어올 경우
 * 함수 func는 함수 doubleNum의 콜백 함수입니다.
 * 아래와 같은 경우, 함수 double은 함수 doubleNum의 콜백 함수입니다.
 */
let output = doubleNum(double, 4);
console.log(output); // -> 8

2. 함수를 리턴하는 경우

function adder(added) {
  return function (num) {
    return num + added;
  };
}

/*
 * 함수 adder는 다른 함수를 리턴하는 고차 함수입니다.
 * adder는 인자 한 개를 입력받아서 함수(익명 함수)를 리턴합니다.
 * 리턴되는 익명 함수는 인자 한 개를 받아서 added와 더한 값을 리턴합니다.
 */

// adder(5)는 함수이므로 함수 호출 연산자 '()'를 사용할 수 있습니다.
let output = adder(5)(3); // -> 8
console.log(output); // -> 8

// adder가 리턴하는 함수를 변수에 저장할 수 있습니다.
// javascript에서 함수는 일급 객체이기 때문입니다.
const add3 = adder(3);
output = add3(2);
console.log(output); // -> 5

3. 함수를 인자로 받고, 함수를 리턴하는 경우

function double(num) {
  return num * 2;
}

function doubleAdder(added, func) {
  const doubled = func(added);
  return function (num) {
    return num + doubled;
  };
}

/*
 * 함수 doubleAdder는 고차 함수입니다.
 * 함수 doubleAdder의 인자 func는 함수 doubleAdder의 콜백 함수입니다.
 * 함수 double은 함수 doubleAdder의 콜백으로 전달되었습니다.
 */

// doubleAdder(5, double)는 함수이므로 함수 호출 기호 '()'를 사용할 수 있습니다.
doubleAdder(5, double)(3); // -> 13

// doubleAdder가 리턴하는 함수를 변수에 저장할 수 있습니다. (일급 객체)
const addTwice3 = doubleAdder(3, double);
addTwice3(2); // --> 8

 

 

## 내장된 고차 함수 이해하기

### 목표

• 배열 내장 고차함수 filter에 대해서 이해할 수 있다.
• filter에 대한 이해를 기반으로, 나머지 고차함수를 스스로 학습할 수 있다.
  • forEach, find, filter, map, reduce, sort, some, every
• 추상화(abstraction)에 대해 설명할 수 있다.
• 추상화의 관점에서 고차 함수가 갖는 이점에 대해 설명할 수 있다.
• 고차 함수를 활용하여 프로그램을 작성할 수 있다.

+

• MapReduce 학습하기 (MapReduce Model)
• 자바스크립트에서 커링(currying)과 클로저(closure)의 차이 이해하기 (js closure vs curry)
• 선언형 프로그래밍(declarative programming)과 절차형 프로그래밍(imperative programming)의 차이를 배열 메소드를 통해 이해하기 (js imperative vs declarative)
• 함수의 조합(function composition)에 대해 학습하기 (javascript function composition)

해당 파트는 고차함수 관련 문제들과 함께 정리하도록 함.