new Function 문법

[kgneng2]

'new Function' 문법

• 기본적으로 함수를 만들때는 함수표현식, 함수선언문 아래와 같이 만들지만, 이 방법외에 대안이 없을때 사용하는 문법이다.

let sayHi = function() {
  alert( "Hello" );
};

function sayHi() {
  alert( "Hello" );
}

문법

let func = new Function ([arg1, arg2, ...argN], functionBody);

새로 만들어지는 함수는 인수 arg1...argN과 함수 본문 functionBody로 구성됩니다.

example

let sum = new Function('a', 'b', 'return a + b');

alert( sum(1, 2) ); // 3

• new Function을 이용하면 런타임에 발생한 문자열을 이용해서 함수를 만들 수 있다는 장점이 있다.

클로저

• 함수는 [[Environment]]는 함수가 만들어진 지난 시간에 배운 렉시컬 환경을 참조합니다. #
• 하지만 new Function은 렉시컬 환경이 아니고 전역 렉시컬 환경을 참조합니다.
• 그러므로 new Function을 이용해 만든 함수는 외부 변수에 접근할 수 없고, 오직 전역 변수에만 접근 가능합니다.

example

let value ="hello";
function getFunc() {

  let func = new Function( 'alert(value)' );

  return func;
}
getFunc() //'hello' alert

function getFunc() {
  let value = "test";

  let func = new Function('alert(value)');

  return func;
}

getFunc(); // ReferenceError: value is not defined

• 왜??
  • 압축기에 의해서 let userName 변수같은경우 let a 로 전부 대체하게 되는데, userName은 지역변수이고, 함수 외부에선 함수 내부에 있는 변수에 접근할 수 없기 때문에 문제가 없는데, new Function에서는 함수 내부에서 외부 변수에 접근하려고 헀을 때,(근데 이건 아키텍처 관점에서 좋지 않고, 에러에도 취약함) userName은 이미 없기 때문에, 문제가 된다.

minify

• https://esprima.org/demo/minify.html

function getFunc() {
  let value = "test";

  let func = new Function('alert(value)');

  return func;
}
getFunc();

// minify 
function getFunc(){let b='test';let a=new Function('alert(value)');return a;}

번외 eval

• eval도 new Function과 같이 런타임에 동적으로 함수를 수행한다. eval은 new Function과 다르게 변수 접근이 자유롭다.
• 속도가 new Function에 비해 매우 느리고, 변수 scope 오염이 발생하므로 사용은 유저 몫.