Front-end/JavaScript

[JavaScript] new Function 문법

Nave 2022. 11. 7. 03:42

함수 표현식과 선언문 이외에 함수를 만들 수 있는 방법이 하나 더 있다. (잘 사용하는 방법은 아님!! 이 방법 외에는 없을 때 사용)

 

1. 문법

let func = new Function ([arg1, arg2, ...argN], functionBody);
// 인수 (arg)와 functionBody로 구성된다.

//예
let SsabalJass = new Function('noHomwork','fine', `return ${noHomwork}하면 ${fine}원`)
console.log(SsabalJass('지각','50000') // 지각하면 50000원

//인수가 없고 본문만 있는 함수
let SsabalJass = new Function('console.log("숙제안하면 오마넌")
SsabalJass() // 숙제안하면 오마넌

기존에 사용하던 방법과 new Function을 사용해 함수를 만드는 방법의 가장 큰 차이는 런타임에 받은 문자열을 사용해 함수를 만들 수 있다는 점이다. (함수 표현식과 함수 선언문은 개발자가 직접 스크립트를 작성해야만 함수를 만들 수 있었음)

-> new Function문법을 사용하면 어떤 문자열도 함수로 바꿀 수 있다는 점! (서버에서 전달받은 문자열을 이용해 새로운 함수를 만들고 이를 실행하는 것도 가능하다.)

 

** 막간상식!! 런타임이 언제냐? -> 컴파일타임이 종료된 후 프로그램이 사용자에 의해 동작되어지는 때. 그럼 컴파일타임이 뭔디? -> 개발자가 작성한 코드가 기게가 읽을 수 있는 (0101)형태로 변환되는 과정

 

2. 클로저

함수는 특별한 프로퍼티[[Environment]]에 저장된 정보를 이용해 자기 자신이 태어난 곳을 기억한다. [[Environment]]는 함수가 만들어진 렉시컬 환경을 참조한다. (자세한 내용은 클로저 단원에)

그런데 new Function을 이용해 함수를 만들면 함수의 [[Environment]] 프로퍼티가 현재 렉시컬 환경이 아닌 전역 렉시컬 환경을 참조하게 된다. 따라서 new Function을 이용해 만든 함수는 외부 변수에 접근할 수 없고, 오직 전역 변수에만 접근할 수 있다.

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

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

  return func;
}

getFunc()(); 
// ReferenceError: value is not defined. value가 전역변수가 아니고 외부 함수에서 선언된 변수이기 때문에 접근할 수 없다.