[JavaScript]1급 시민(First Class Citizen)

자바스크립트에서 함수형 기법을 사용하여 코드를 작성해보셨을 겁니다.

그리고 본인이 함수형 기법을 사용했는데, 함수형 기법이 무엇인지 모르는 분들도 계실 겁니다.

이번 포스팅에서는 함수형 프로그래밍의 1급 시민에 대해 설명을 하며, 예제 코드를 통해 확인을 해봅니다.

---

함수형 프로그래밍의 역사

「 1930년대 발견한 람다 계산법(lambda calculs)이 함수형 프로그래밍의 시작이라고 할 수 있습니다. 람다 계산법 발견 후 여러 가지 연구를 진행하여 1950년대 존 맥카시(Jonh McCarthy)는 람다 계산법을 활용한 리스프(Lisp)라는 프로그래밍 언어를 만들었습니다. 리스프는 고차 함수라는 개념과 함수가 1급 시민 또는 1급 멤버라는 개념을 구현했습니다. 」

 

고차 함수

- 다른 함수를 조작하는 함수

 

1급 시민

- 변수에 함수를 대입할 수 있어야 한다.

- 함수를 다른 함수에 인자로 넘길 수 있어야 한다.

- 함수에서 함수를 생성하여 반환할 수 있어야 한다.

 

1급 시민에 대해서는 아래에서 다시 설명합니다.

---

1급 시민

자바스크립트에서는 함수가 1급 시민이므로 함수형 프로그래밍을 지원합니다.

1급 시민이라는 말은 「 함수를 변수처럼 사용할 수 있다 」 는 의미로 해석하시면 됩니다.

그렇다고 함수와 변수를 동일한 개념으로 생각하시면 안 됩니다.

 

변수에 함수를 대입할 수 있어야 한다.

1. 함수 선언과 동시에 변수에 대입하는 방법

var sub = function (a, b) {
  return a - b;
};

2. 함수 선언 후 변수에 대입하는 방법

function addFunc(a, b) {
  return a + b;
}

var add = addFunc;

3. 화살표 함수를 사용하여 변수에 대입하는 방법

var mul = (a, b) => a * b;

함수는 객체와 배열에도 대입이 가능합니다.

1. 객체에 대입하는 방법

var objFunc = {
  kor : 80,
  math : 90,
  average(a, b) {
    return (a + b) / 2;
  }
}

2. 배열에 대입하는 방법

var arrFunc = [
  (add = (a, b) => a + b), 
  (sub = (a, b) => a - b)
];

 

예제 코드

React를 배우지 않았다면, 전체적인 코드를 분석하지 말고 버튼을 클릭했을 때, 콘솔 창의 결과가 어떻게 나오는지만 확인하시면 됩니다.

 

 

함수를 다른 함수에 인자로 넘길 수 있어야 한다.

매개변수 2개를 더한 값을 반환하는 함수를 정의합니다.

var add = function addFunc(a, b) {
  return a + b;
};

매개변수 2개를 뺀 값을 반환하는 함수를 정의합니다.

var sub = function subFunc(a, b) {
  return a - b;
};

2개의 값과 2개의 함수를 전달받는 printConsole() 함수를 정의합니다.

function printConsole(a, b, func1, func2) {
  console.log(`add: ${func1(a, b)}`);
  console.log(`sub: ${func2(a, b)}`);
}

 

예제 코드

 

 

함수에서 함수를 생성하여 반환할 수 있어야 한다.

함수에서 함수를 생성하여 반환한다는 내용은 쉬워 보이지만, 본인이 생각하는 것과는 다르게 동작할 수 있습니다.

 

함수를 생성하는 함수를 InitFunc라는 변수에 대입합니다.

그리고 InitFunc()의 결과를 CalcFunc 변수에 대입합니다.

var InitFunc = function () {
  return function (a, b) {
    return a - b > 0 ? a - b : (a - b) * -1;
  };
};

var CalcFunc = InitFunc();

 

InitFunc()가 반환하는 값은 무엇일까요?

함수에서 생성한 함수를 반환합니다.

아래 그림에서 붉은색 테두리 안의 코드를 반환합니다.

 

즉, 변수는 CalcFunc 아래와 동일합니다.

var CalcFunc = function(a, b) {
  return a - b > 0 ? a - b : (a - b) * -1;
};

 

예제 코드에서 InitFunc(10, 20)을 호출하면, 붉은색 테두리의 코드를 반환하는 것을 확인할 수 있습니다.

console.log(`InitFunc : ${InitFunc(10, 20)}`);

/* 결과
InitFunc : function (a, b) {
    return a - b > 0 ? a - b : (a - b) * -1;
  } 
*/

함수에서 생성된 함수를 접근하기 위해서는 1. 괄호를 한 번 더 사용하거나 2. 함수를 생성한 함수를 변수에 대입해서 대입된 변수를 사용해야 합니다.

 

예제 코드

---

요약

자바스크립트에서는 함수가 1급 시민이므로 함수형 언어라고 할 수 있다.