[JavaScript] First class and Higher-Order Function

First class function - 함수가 값으로 취급된다.

자바스크립트는 first class function입니다. 이것의 뜻은 함수가 단순히 값으로 취급된다는 것을 의미합니다. 이것은 굉장히 중요한 자바스크립트의 특징인데 왜 이렇게 동작할까요? 

그 이유는 함수는 자바스크립트의 또 다른 객체이기 떄문입니다. 객체는 값이기 때문에, 함수도 값입니다. 이 특징을 활용해서, 우리는 변수 또는 객체의 property 들을 아래와 같이 저장할 수 있습니다.

const add = (a,b) => a + b;
const counter = {
	value: 22,
    inc: function(){ this.value++ ; }
}

첫번째는 함수를 생성했고, 두번째는 객체 메서드를 만들었습니다. 이 두 개의 예시는 각각 함수의 값을 갖게되고, 개발자 마음대로 저장할 수 있게 됩니다. 

 

또한, 우리는 함수를 매개변수의 값으로서 다른 함수에 전달할 수 있게 되었습니다.

const greet = () => console.log('Hey!');
btnClose.addEventListener('click', greet); // greet 함수 값을 인자로써 넘길 수 있다.

 

자바스크립트에서의 함수가 객체라는 것은 중요한 특징입니다. 또한 자바스크립트에서 많은 객체들은 method를 가지고 있습니다. 

counter.inc.bind(someOtherObject);

우리는 또한 위의 예시처럼 inc 내부에 있는 bind() 메서드를 함수로 부를 수도 있습니다.

 

찾아보니, 일급 객체가 되는 조건은 4가지가 있다고 합니다.

1. 무명의 리터럴로 표현이 가능하다.
2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 반환값으로 사용할 수 있다.

// 1. 무명의 리터럴로 표현이 가능하다.
// 2. 변수나 자료 구조에 저장할 수 있다.
var increase = function (num) {
  return ++num;
};

var decrease = function (num) {
  return --num;
};

var predicates = { increase, decrease };

// 3. 함수의 매개변수에 전달할 수 있다.
// 4. 반환값으로 사용할 수 있다.
function makeCounter(predicate) {
  var num = 0;

  return function () {
    num = predicate(num);
    return num;
  };
}

var increaser = makeCounter(predicates.increase);
console.log(increaser()); // 1
console.log(increaser()); // 2

var decreaser = makeCounter(predicates.decrease);
console.log(decreaser()); // -1
console.log(decreaser()); // -2

Javascript의 함수는 위의 조건을 모두 만족하므로 Javascript의 함수는 일급객체이다. 따라서 Javascript의 함수는 흡사 변수와 같이 사용할 수 있으며 코드의 어디에서든지 정의할 수 있다.

함수와 다른 객체를 구분짓는 특징은 호출할 수 있다는 것이다.

 

자바스크립트는 first-class functions 특징은 고차 함수(Higher-Order Function)를 사용하고 작성할 수 있게 해줍니다. 

고차 함수(Higher-Order Function)

고차 함수(Higher-Order Function) : 다른 함수를 인수로 받거나 새 함수를 반환하거나 둘 다 반환하는 함수

 

고차함수의 특징

1) 함수는 다른 함수를 받습니다. 

여기서 addEventListener 함수는 고차 함수(Higher-Order Function)인데 그 이유는 greet라는 함수를 input으로 받기 떄문입니다. 여기서 greet 함수는 call back 함수인데, 이벤트가 발생했을 때 호출하라고 알려준다. 

 

2) 함수가 새로운 함수를 return 해줍니다.

 

참고

• 일급 객체: poiemaweb.com/es6-class