차이

내부 작동과 유효범위의 차이

• eval() : 자바스크립트 표현식으로 문자열을 자바스크립트 코드로 해석 후 평가 -> 유효범위가 eval() 호출 시점. 즉, 실행 범위 내의 지역변수에 접근할 수 있음
• new Function() : 문자열을 자바스크립트 코드로 파싱하여 호출 가능한 객체에 저장함 -> 별도 함수 영역으로 분리됨. 즉, 지역변수에 접근할 수 없음

eval(`console.log("test")`);
// 결과 : test

new Function(`console.log("test")`)();
// 결과 : test

  function test (){
    var txt = "hello";
    var source = console.log(txt);

    eval(source);
    // 결과 : test

    new Function(source)();
    // 결과 : 에러 (txt is not defined)
  }

문자열을 실행할수 있다는 공통점이 있으나

eval은 실행하는 문자열이 참조하는 범위에 제약이 없음

new Function은 실행하는 문자열에는 기존에 사용하는 변수를 사용할 수 없고, 범위가 제한

eval()

출처

• eval is evil ( 이발 is 야발 )

  eval()은 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수
  => 악의적인 영향을 받았을 수 있는 문자열을 eval()로 실행한다면, 당신의 웹페이지나 확장 프로그램의 권한으로 사용자의 기기에서 악의적인 코드를 수행하는 결과를 초래

  console.log(typeof un); // 'undefined' 가 기록된다.
  console.log(typeof deux); // 'undefined' 가 기록된다.
  console.log(typeof trois); // 'undefined' 가 기록된다.
  
  var jsstring = 'var un = 1; console.log(un);';
  eval(jsstring); // 1 이 기록된다.
  
  jsstring = 'var deux = 2; console.log(deux);';
  new Function(jsstring)(); // 2 가 기록된다
  
  jsstring = 'var trois = 3; console.log(trois);';
  (function () {
  	eval(jsstring);
  })(); // 3 이 기록된다.
  
  // 전역 스코프에서 변수들을 체크해 본다.
  console.log(typeof un); // number 가 기록된다.
  console.log(typeof deux); // undefined 가 기록된다.
  console.log(typeof trois); // undefined 가 기록된다.
  

  eval에서 선언된 변수가 전역에 선언된것을 볼 수 있음

new Function()

eval함수와 비슷하게 문자열을 코드로 인식해 동적 수행
=> 다만,함수 내부 Scope에만 접근과 수정이 가능하기 때문에 유효범위 오염에 대한 문제가 없음

eval 대신 new Fuction()과 같은 함수를 사용하자..