Higher-order Function 이해하기

자바스크립트에서 함수는 (자바스크립트가 나온 시점을 고려하였을 때) 아래와 같이 특별하게 취급된다.

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

  함수를 데이터(Sting, 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

함수 선언식의 호이스팅에 지나치게 의존하는 것은 코드의 유지보수 측면에서 좋지 않다.
코드 review나 debugging을 할 때 코드를 위 아래로 왔다 갔다 할 수 있기 때문이다.
함수 선언식은 어느 위치에나 선언할 수 있고 실행 위치도 중요하지 않지만, 함수 표현식은 함수의 할당과 실행의 위치가 중요하기 때문에 코드의 위치가 어느정도 예측 가능하다.

호이스팅을 제외하면 함수 선언식과 함수 표현식의 차이는 크게 없어 보인다.
다만 함수 표현식의 경우, 함수가 변수에 저장될 수 있다는 사실을 좀 더 분명하게 드러낼 수 있다.

한편, 변수에 저장된 데이터는 함수의 인자로 전달되거나 함수 내에서 리턴값으로 사용될 수 있다.
앞서 함수가 변수에 저장될 수 있다는 사실로부터 함수 역시 다른 함수의 인자로 전달되거나 다른 함수 내에서 리턴될 수 있다는 것을 알 수 있다.