[JavaScript] new Function 문법

new Function 문법 개요

new Function 문법은 문자열 형태로 함수를 동적으로 생성할 수 있게 해주는 자바스크립트의 기능입니다. 이는 런타임 시점에 코드를 컴파일하여 함수를 생성합니다.

const add = new Function('a', 'b', 'return a + b;');
console.log(add(2, 3)); // 출력: 5

인수를 하나의 문자열로 나열해도 동일하게 동작합니다.

const multiply = new Function('a, b', 'return a * b;');
console.log(multiply(4, 5)); // 출력: 20

new Function과 일반 함수의 차이점

렉시컬 환경의 차이

일반적인 함수 선언이나 함수 표현식은 정의된 위치의 렉시컬 스코프를 기억하여 주변의 변수에 접근할 수 있습니다. 그러나 new Function으로 생성된 함수는 전역 스코프를 참조하므로, 생성된 위치의 외부 변수에 접근할 수 없습니다.

function createFunction() {
  let localVar = '로컬 변수입니다.';
  return new Function('console.log(localVar);');
}

const func = createFunction();
func(); // ReferenceError: localVar is not defined

위 코드에서 new Function으로 생성된 함수는 전역 스코프만 참조하므로 localVar에 접근할 수 없어 에러가 발생합니다.

function createFunction() {
  let localVar = '로컬 변수입니다.';
  return function() {
    console.log(localVar);
  };
}

const func = createFunction();
func(); // 출력: 로컬 변수입니다.

이 경우에는 함수가 생성된 렉시컬 스코프를 기억하므로 localVar에 정상적으로 접근할 수 있습니다.

동적 함수 생성

new Function은 문자열로 전달된 코드를 실행하므로, 외부로부터 입력받은 문자열을 사용할 경우 보안 취약점이 생길 수 있습니다.

// 위험한 예시 - 사용자 입력을 그대로 사용
const userInput = prompt('수식을 입력하세요:'); // 예를 들어, "alert('해킹')" 입력
const calc = new Function('return ' + userInput);
calc(); // 해킹 코드가 실행될 수 있음

코드 압축 도구

코드 압축 도구는 변수 이름을 축약하여 코드 크기를 줄입니다. 그런데 new Function은 문자열로 코드를 전달받으므로, 압축된 변수 이름을 인식하지 못해 의도치 않은 동작을 할 수 있습니다.

function createLogger() {
  let message = '안녕하세요!';
  return new Function('console.log(message);');
}

const logger = createLogger();
logger(); // ReferenceError: message is not defined

압축 도구는 message 변수를 a와 같이 변경할 수 있지만, new Function 내부의 문자열은 그대로 유지되므로 변수 이름 불일치로 에러가 발생합니다.

이를 해결하려면 필요한 데이터를 반드시 매개변수로 전달해야 합니다.

function createLogger(msg) {
  return new Function('msg', 'console.log(msg);');
}

const logger = createLogger();
logger('안녕하세요!'); // 출력: 안녕하세요!