자바스크립트의 First-Class Function(일급함수) 정리

일급함수

프로그래밍 언어에서 다른 변수들처럼 다루어지는 함수를 일급함수라고 합니다. 예를 들어, 다른함수의 인자로 전달되기도하고, 함수에서 반환이 되기도 하며, 변수에 대입(assign)이 될 수 있습니다.

---

일급함수의 조건

다음은 일급함수의 조건입니다.

• 변수나 데이터 구조안에 담을수 있다.
• 파라미터로 전달 할 수 있다.
• 반환값으로 사용할 수 있다.
• 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다
• 동적으로 프로퍼티 할당이 가능하다.

---

JavaScript 일급함수 예제

변수에 대입

//익명함수를 변수에 대입 가능합니다.
const foo = function() {
  console.log("foobar");
};

// 변수끝에 ()를 붙여 함수를 실행할 수 있습니다.
foo();

---

함수를 인자로 전달

function sayHello() {
  return "Hello, ";
}
function greeting(helloMessage, name) {
  
  //인자로 전달받은 함수를 실행할 수 있습니다.
  console.log(helloMessage() + name);
}

//함수를 인자로 전달할 수 있습니다.
greeting(sayHello, "JavaScript!");

• value로서 함수를 다루는 방법입니다.
• 함수의 인자로서 전달되는 함수를 "콜백함수" 라고 불립니다.

---

함수 반환(Return a function)

const sayHello = function() {
  //자바스크립트에서 `Value`로 다루어지기때문에 함수를 반환 할 수 있습니다.
  return function() {
    console.log("Hello!");
  }
}

//사용법1
const myFunc = sayHello();
myFunc(); //반환된 함수를 실행

//사용법2
sayHello()(); //반환된함수를 바로 실행

• 함수를 인자로 받아 사용하거나 함수를 반환하는 함수를 Higher-Order Function 라고 합니다.

JavaScript 일급함수 장점(예)

List.prototype.filter

javascript 내에 filter(),map(),reduce() 예제로 볼 수 있습니다.

filter()는 유지해야하는 값들을 결정하는 함수를 이용하여 List를 반환합니다.

let numbers = [1,2,3,4,5,6];

//필터되는 조건을 직접 구현
function isEven(x) {
  return x % 2 === 0;
}

function isOdd(x) {
  return x % 2 === 1;
}

let evenNum = numbers.filter(isEven); // [2,4,6]
let oddNum = numbers.filter(isOdd);   // [1,3,5]

함수를 인자로 사용하지 않고 구현한다면.

let numbers = [1,2,3,4,5,6];

//각각의 목적에 맞는 필터를 구현
Array.prototype.evenFilter = function() {
  let result = [];
  for(let v of this) {
    if(v % 2 === 0) result.push(v);
  }
  return result;
};

//각각의 목적에 맞는 필터를 구현
Array.prototype.oddFilter = function() {
  let result = [];
  for(let v of this) {
    if(v % 2 === 1) result.push(v);
  }
  return result;
};

let evenNum = numbers.evenFilter(); //[2,4,6]
let oddNum = numbers.oddFilter();   //[1,3,5]

물론. 인자로 함수를 사용하지 못한다고해서 같은 기능을 구현 못하는것은 아니지만
인자로 사용함으로서 더 읽기 좋은 코드가 될 것입니다.

---

클로저

createGenerator() 함수는 private 상태를 가지는 generateNewID() 함수는 만든다.
매번 이함수를 사용할때마다 초기 prefix와 index를 가지고 생성된 ID를 반환한다.

function createGenerator (prefix) {
  let index =0;
  return function generateNewID() {
    index++;
    return prefix + index.toString();
  }
}

let generateNewID = createGenerator("btn");
console.log(generateNewID()); //btn1
console.log(generateNewID()); //btn3
console.log(generateNewID()); //btn3

클로저를 사용하여, 우리는 private 상태를 만들수 있습니다. 이 또한 함수가 함수를 반환할수 있는 Higher-order function의 특징을 활요한 것입니다.

---

Decorator

간단한 decorator는 underscore.js 나 lodash.js에서 제공하는 once()가 있습니다.
이 함수는 한번만 실행할수 있는 함수를 생성합니다.

function once(fn) {
  let returnValue;
  let canRun = true;
  return function runOnce() {
    if(canRun) {
      returnValue = fn.apply(this, arguments);
      canRun = false;
    }
    return returnValue;
  }
}

function process() {
  console.log('process');
}


const processonce = once(process);
processonce(); //process
processonce(); 

Function decorator들은 원본함수를 수정하지 않고 존재하는 함수를 가지고
다향한 함수를 제작하는 강력한 툴입니다.

결론

일급함수를 이용하여 행동단위를 쉽게 전달하여 다른 값들과 같이 활용할 수 있습니다.
자바스크립에서 일급함수는 유연하게 코드를 만들수 있고 가독성을 좋게 만들 수 있습니다.

---

참고

• https://en.wikipedia.org/wiki/First-class_function
• https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function
• https://medium.freecodecamp.org/discover-the-power-of-first-class-functions-fd0d7b599b69