[프로그래밍 팁] 자바스크립트 함수 생성자(Function Constructor) 활용법

 

업무에서 자바스크립트로 프로토타입 애플리케이션을 많이 만들어보긴 했지만 '함수 생성자'에 대해서는 전혀 들어보지 못했었습니다. 그런데 이번 주말에 Udacity에서 강좌를 들으며 알게 되어서 포스팅을 통해 소개하고자 합니다.

 

함수 생성자  (Function Constructor)

모질라 웹페이지에 나와있는 함수 생성자에 대한 설명은 아래와 같습니다:

 

The Function constructor creates a new Function object. Calling the constructor directly can create functions dynamically, but suffers from security and performance issues similar to eval.

함수 생성자는 새로운 함수 객체를 생성한다. 생성자를 직접 이용하면 함수를 동적으로 생성할 수 있으나, eval과 유사한 보안 및 성능 이슈가 발생할 수 있다.

 

즉, 여타 객체지향형 프로그래밍(OOP) 언어의 Class와 같이, 자바스크립트 함수 생성자는 함수 객체를 만드는 것으로 보입니다. 자바스크립트는 Function(), Object(), Array() 등의 함수 생성자가 있으나, function(), object(), array()와 같은 객체 리터럴(Object Literal)과 비교했을 때 성능상 별다른 장점이 없어 사용이 추천되진 않는다고 합니다. 생성자에 의해 정의된 객체는 호출이 됐을 때 parse 되는데 반해(동적), 객체 리터럴로 정의된 객체는 여타 다른 코드들이 parse 될 때 함께 parse 되기 때문입니다. 다른 말로 말하면, 함수 생성자로 만든 객체는 런타임 중 호출이 됐을 때 생성이 될 수 있다는 뜻입니다.

 

 

이게 무슨 뜻일까요? 예제로 한번 알아보겠습니다.

 

자바스크립트 함수는 일반적으로 함수 생성자 없이 아래와 같이 정의됩니다:

 

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

그리고 위의 함수는 함수 생성자를 이용해 아래와 같이 표현될 수 있습니다:

 

var exampleFunction = Function('a', 'b', 'return a + b');

 

함수 생성자를 이용한 예시 코드에서 Function() 괄호 안에 들어 있는 'return a+b'가 실제 함수 정의에 해당하고, a와 b는 독립변수에 해당합니다. 

 

var exampleFunction = function(a){
    return new Function('b', "return '" + a + "'+ b;");
}
console.log(exampleFunction(10)(20));

 

만약 위의 코드를 node.js에서 실행하면 결과값은 30이 나옵니다. 신기하죠?

 

그렇다면 굳이 함수 리터럴로 정의하면 되는 것을 굳이 함수 생성자를 이용해 스트링(string)으로 정의한 후 런타임에서 호출 시에만 따로 객체를 생성할 필요가 있을까요? 스택 오버플로우(stackoverflow)에 누군가가 한 질문과 답변에 힌트가 있습니다.

 

정리하면, JSON과 같은 정적 데이터 포맷에 함수를 정의하고 사용하고자 할 때 활용할 수 있는 것입니다. 정적으로 정의해둔 함수를 객체를 불러온 후 필요할 때 생성해서 활용할 수 있는 것이지요. 비록 성능은 함수 리터럴보다 떨어진다 할지라도 특정 객체의 속성과 행동(behavior)을 정적 데이터 포맷에 함께 정의해두고 활용할 수 있다는 점은 매우 매력적입니다.

 

JSON과 같은 정적 데이터 포맷에 함수를 정의하고 사용하고자 할 때 함수 생성자를 활용하면 효과적이다.