Function

Function 생성자는 새 Function 객체를 만듭니다. 이 생성자를 직접적으로 호출하여 동적으로 함수를 생성할 수 있으나 보안 문제와 eval과 비슷한 유사(훨씬 덜 심각한) 성능 문제가 발생할 수 있습니다. 하지만, eval과 달리 Function 생성자를 이용하면 전역 범위(global scope)에서 코드를 실행할 수 있고, 더 나은 프로그래밍 습관을 유도하며 더 효율적으로 코드를 최소화 할  수 있습니다.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

모든 JavaScript 함수는 사실 Function 객체입니다. 이 사실은 (function(){}).constructor === Function 코드가 참을 반환하는 것에서 알 수 있습니다.

구문

new Function ([arg1[, arg2[, ...argN]],] functionBody)

매개변수

arg1, arg2, ... argN

함수에서 형식 인수 이름으로 사용할 이름입니다. 각 이름은 자바스크립트 식별자로 유효한 문자열이거나 쉼표(comma)로 구분된 그러한 문자열의 목록이어야 합니다. 예를 들어, "x", "theValue" 또는 "a,b".

functionBody

함수 정의를 구성하는 자바스크립트 문으로 이루어진 문자열.

설명

Function 생성자로 생성되는 Function 객체는 함수가 생성될 때 구문 분석(parsing)이 이루어집니다. 이는 함수 표현식(function expression)이나 function 문(function statement)으로 함수를 정의하고 코드 내에서 그 함수를 호출하는 것보다 덜 효율적인데, 그 이유는 Function 생성자로 생성된 함수는 호출하는 코드의 나머지 부분과 같이 구문 분석되기 때문입니다.

함수로 전달되는 모든 인수는 생성될 함수의 매개 변수 식별자 이름으로 전달되는 순서대로 처리됩니다.

(new 연산자를 사용하지 않고) 함수로써 Function 생성자를 호출하는 것은 생성자로 호출하는 것과 같습니다. 하지만, new 연산자가 제거됨으로써 코드의 크기를 약간(4 바이트 더 작게) 줄일 수 있으므로 Function에 대해서는 new 연산자를 사용하지 않는 것이 좋습니다.

Function의 속성과 메서드

전역 Function 객체는 자신의 메서드 또는 속성이 없습니다. 그러나, 그 자체로 함수이기에 Function.prototype에서 프로토타입 체인을 통해 일부 메서드 및 속성을 상속받습니다.

Function 프로토타입 객체

속성

메서드

Function 인스턴스

Function 인스턴스는 Function.prototype에서 메서드 및 속성을 상속받습니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 바꿈으로써 모든 Function 인스턴스에 변화를 줄 수 있습니다.

예제

Function 생성자에 인수 지정하기

다음 코드는 인수 두 개를 갖는 Function 객체를 생성합니다.

// 예제는 JavaScript 콘솔에서 직접 실행하실 수 있습니다

// 두 개의 인수를 가지고 그 둘의 합을 반환하는 함수 생성
var adder = new Function('a', 'b', 'return a + b');

// 함수 호출
adder(2, 6);
// > 8

인수 "a" 및 "b"는 함수 몸통(body)의 "return a + b"에 사용되는 형식 인수명입니다.

Function 생성자와 함수 선언의 차이

Function 생성자로 만들어지는 함수는 생성 컨텍스트에 대한 클로저(closure)를 생성하지 않습니다; 이들 함수는 항상 전역 범위에서 생성됩니다. 함수가 실행될 때, 자신의 지역 변수와 전역 변수에만 접근할 수 있으며 Function 생성자가 호출된 그 범위의 변수에는 접근할 수 없습니다. 이 점이 함수 표현식(function expression) 코드에서 eval을 사용하는 것과 다른 점입니다.

var x = 10;

function createFunction1() {
    var x = 20;
    return new Function('return x;'); // 여기서 |x|는 전역 범위에 있는 |x|를 참조함.
}

function createFunction2() {
    var x = 20;
    function f() {
        return x; // 여기서 |x|는 위의 지역에 있는 |x|를 참조함.
    }
    return f;
}

var f1 = createFunction1();
console.log(f1());          // 10
var f2 = createFunction2();
console.log(f2());          // 20

다음은 Function을 이용해 (최대한 간결하게) 외부 코드를 실행하는 "적절한" 방법입니다.

function makeFunction(code){
    return Function('"use strict";return ' + code)();
}
var add = makeFunction(
  "" + function(a, b, c){ return a + b + c } // 실제 코드에서는 이 부분을 별도 파일로 이동할 것.
);
console.log( add(1, 2, 3) ); // will log six

위의 코드 자체로는 완전히 비실용적이라는 점에 유의하시기 바랍니다. 위와 같이 Function을 잘못 사용해서는 절대 안됩니다. 대신, 위의 코드는 기본 스크립트가 존재하고 크기가 크며 선택적으로 로드될 수 백개의 모듈을 가진 모듈 로더와 같은 것을 단순화하는 예제로서만 의미가 있습니다. 사용자가 그 모듈들이 모두 다운로드될 때까지 기다리는 대신, 클라이언트 컴퓨터가 필요한 모듈만 다운로드함으로써 페이지를 초고속으로 로드할 수 있습니다. 또한, 많은 함수를 평가(evaluating)할 때, 함수를 개별적으로 평가하는 대신 한꺼번에 대량으로 평가하는 것이 좋습니다.

function bulkMakeFunctions(){
    var str = "", i = 1, Len = arguments.length;
    if (Len) {
        str = arguments[0];
        while (i !== Len) str += "," + arguments[i], ++i;
    }
    return Function('"use strict";return[' + str + ']')();
}
const [
    add,                        sub,                        mul,                        div
] = bulkMakeFunctions(
    "function(a,b){return a+b}","function(a,b){return a-b}","function(a,b){return a*b}","function(a,b){return a/b}"
);
console.log(sub(add(mul(4,3), div(225,5)), 7))

명세

브라우저 호환성

같이 보기

• Functions and function scope
• function statement
• function expression
• function* statement
• function* expression
• AsyncFunction
• GeneratorFunction