[자바스크립트] First-Class Function, 함수형 프로그래밍의 최소 조건

First-Class Function

밑에 길게길게 적어놨지만 쉽게말하면

함수를 기존의 Object 또는 변수 처럼 사용할 수 있는 특성

입니다.

 - 함수를 변수에 저장할 수 있는가?

 - 함수를 인자로 넘길수 있는가?

 - 함수에서 함수를 return, 반환할 수 있는가?

First-Class Function

- 프로그래밍 언어의 Function이 그 언어의 First-Class Citizen일 때, 그 언어가 First-Class Function 이라고 말합니다.

First-Class Citizen

- Citizen(type, object, value ... )이 다음의 특징들을 만족하는 경우 그 언어는 First-Class Citizen을 가진다고 말할 수 있습니다.

1. 모든 item이 Variable 또는 Data Structure에 저장될 수 있다.

2. 모든 item이 함수의 실제 매개변수가 될 수 있다.

3. 모든 item이 함수의 결과로 반환될 수 있다.

Function이 First-Class Citizen인지 알아보기 전에 위 3가지 특징들을 쉽게 이해하기 위해 문자열을 예를 들어 봅시다. 

다음은 "Hello World"를 출력하는 코드입니다.

아래 코드에서 문자열이 First-Class Citizen의 특징들을 만족하는지 확인해봅시다.

var str = "World";
 
function greet(arg_str) {
    return "Hello "+arg_str;
}
 
str = greet(str);

1. 모든 item이 Variable 또는 Data Structure에 저장될 수 있다.

var str = "World";

2. 모든 item이 함수의 실제 매개변수가 될 수 있다.

function greet(arg_str) {

    return "Hello "+arg_str;

}

3. 모든 item이 함수의 결과로 반환될 수 있다.

function greet(arg_str) {

    return "Hello "+arg_str;

}

이처럼 문자열은 위에서 언급한 조건들을 모두 만족하고 있는 것을 확인할 수 있습니다.

함수의 경우는 어떨까요?

"1. 모든 item이 Variable 또는 Data Structure에 저장될 수 있다."

x를 인자로 받아 x*x 를 반환하는 squeare라는 함수를 변수 f에 저장해본 코드입니다.

f 라는 변수에 square(5) 실행 결과가 아닌 square 함수 자체를 저장하는 것을 볼 수 있습니다.

function square(x) {
    return x*x;
}
 
const f = square;
 
console.log(f);
console.log(f(5));

[실행 결과]

ƒ square(x) {
    return x*x;
}
25

"2. 모든 item이 함수의 실제 매개변수가 될 수 있다."

위의 코드를 좀 더 확장시켜, map이라는 함수를 추가했습니다.

map 함수가 하는 일은 다음과 같습니다.

1. 함수(func)와 배열(arr_list)을 인자로 받는다.

2. result 라는 빈 배열을 생성한다.

3. for loop를 통해 arr_list의 각 요소를 func 함수의 인자로 넘겨 실행된 결과를 result 함수에 추가한다.

4. result 함수를 반환한다.

map이라는 함수의 매개변수로 square 라는 함수를 전달한 것을 볼 수 있습니다.

function square(x) {
    return x*x;
}
 
function map(func, arr_list) {
    let result = [];
    for (var i = 0; i < arr_list.length; i++) {
        result.push( func(arr_list[i]) );
    }
 
    return result;
}
 
console.log( map(square, [1,2,3,4,5]) );

[실행 결과]

[1, 4, 9, 16, 25]

"3. 모든 item이 함수의 결과로 반환될 수 있다."

wrap_text라는 함수를 반환하는 html_tag라는 함수를 작성해 봤습니다.

function html_tag(tag) {
 
    function wrap_text(msg) {
        return "<"+tag+">"+msg+"</"+tag+">";
    }
 
    return wrap_text;
}
 
const div_tag = html_tag("div");
const span_tag = html_tag("span");
 
console.log(div_tag("Hello"));
console.log(span_tag("World"));

[실행 결과]

<div>Hello</div>
<span>World</span>