javascript - first-class function vs higher-order function

first-class function (일급함수) 란?

자바스크립트는 함수를 First-class citizen 으로 취급합니다.

함수는 객체의 다른 유형입니다.

객체가 value이기 때문에, 따라서 함수 또한 value 라는 것이 일급 함수의 정의라고 할 수 있습니다.

 

함수가 value이기 때문에 여러가지가 가능합니다.

 

const counter = {
    value: 23,
    inc: function() { this.value++ }
}

이렇게 함수를 객체에 대입할 수 있으며

const greet = () => console.log('Hello')

helloBtn.addEventListener('click', greet)

eventlistener의 값으로 greet 함수를 대입할 수 있습니다.

 

higher-order function (고위함수) 란?

다른 함수를 받는 함수, 또는 새로운 함수를 리턴하는 함수

이렇게 정의할 수 있습니다.

 

const greet = () => console.log('Hello')

helloBtn.addEventListener('click', greet)

여기서 addEventListener 함수는 다른 함수 greet 를 받기 때문에 고위함수입니다.

 

function count() {
  let counter = 0;
  
  return function() {
    counter++;
  }
}

count 함수는 새로운 함수를 리턴하기 때문에 고위함수입니다.

 

 

이렇게 보면 두 개념이 같다고 느껴질 수 있지만, 미묘하게 다릅니다.

일급 함수는 그저 함수가 value가 된다는 "개념" 이라면,

고위 함수는 자바스크립트가 함수는 value 라는 개념을 지원하기 때문에 사용 가능한 것입니다.

 

 

여러가지 예시

callback 함수 사용하여 문자열 만들기

const oneWord = function(str) {
    return str.replace(/ /g, '').toLowerCase();
}

const upperFirstWord = function(str) {
    const [first, ...other] = str.split(' ');
    return [first.toUpperCase(), ...other].join(' ');
}

// higher-order function
// callback 함수 사용
const transformer = function(str, fn) {
    console.log(`original string: ${str}`)
    console.log(`Transformed string: ${fn(str)}`)

    console.log(`Transformed by: ${fn.name}`)
}

transformer('over action tistory', upperFirstWord);

transformer('over action tistory', oneWord);

 

이렇게 transfomer 라는 higher-order function 에서 callback 함수로 oneWord 함수, upperFirstWord 함수를 사용하여 원하는 문자열을 만들었습니다.

 

return new function

const greet = function(greeting) {
    return function(name) {
        console.log(`${greeting} ${name}`);
    }
}

// 나눠서 사용
const result = greet('Hello!');
result('overaction');

// 연쇄해서 사용
greet('Hello')('overaction')

 

위의 greet 함수에서 보이듯이 새로운 함수를 return해줄 수 있습니다.

이것이 가능한 이유는 closure 때문입니다. 나중에 관련 포스팅을 하겠습니다.