[Small-Tip] JavaScript eval()이란, 그리고 이를 대체할 new Function()

The eval() Function

MDN에서 eval()은 문자로 표현 된 JavaScript 코드를 실행하는 함수라고 정의되어있습니다.
즉, 문자열(String)을 코드로 인식해 실행할 수 있게 해주는 함수라고 보시면 됩니다.

eval()을 사용하면 아래와 같은 코드를 사용할 수 있습니다.

let a = 3;
let b = 5;
eval('a += ' + b + ' + 2');
console.log(a); // 10

예시를 잘 못들겠지만 이런식으로 코드를 작성할 수 있게 된다면 은근히 사용할 일이 많습니다;;;

하지만 eval()에는 보안 이슈가 존재합니다.

eval()은 인자로 받은 코드를 caller의 권한으로 수행하는 함수로, 악영향을 줄 수 있는 문자열을 eval() 로 실행하면 악의적인 코드를 수행하는 결과를 초래할 수 있습니다.

또한 제 3자가 eval()이 호출된 위치의 스코프를 볼 수 있으며, Function으로 실행할 수 없는 공격이 가능하다고 합니다. (더 자세한 사항은 여기를 참고하세요.)

다행히 eval()은 new Function()으로 대체할 수 있습니다.

---

new Function()

new Function()는 문자열을 코드로 인식해 실행한다는 점에서 eval 함수와 유사합니다.

하지만 new Function()은 별도의 함수 영역으로 분리되어 함수 내부 Scope에만 접근과 수정이 가능하며, 내부에서 선언된 변수 등은 해당 Function 안에서만 유효하기 때문에 eval과 같은 보안 이슈가 없습니다.

• new Function() 의 기본 문법

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

• eval()과 new Function()의 Scope 비교

function Myfunc1() {
  let a = 123;
  eval('console.log(a); a = 456;');
  console.debug(a);
}
Myfunc1(); // 123, 456

function Myfunc2() {
  let b = 123;
  new Function('console.log(b);')(); // ReferenceError: b is not defined
}
Myfunc2();

---

참고사이트 :
MDN
모던 JavaScript 튜토리얼