JavaScript 탐색: eval()은 '악마'입니다

현재 코드에서 eval()을 사용하는 경우 "eval()은 악마입니다"라는 진언을 기억하세요. 이 메서드는 모든 문자열을 받아들이고 이를 JavaScript 코드로 처리합니다. 문제의 코드가 미리 알려진 경우(런타임에 결정되지 않음) eval()을 사용할 이유가 없습니다. 코드가 런타임 시 동적으로 생성되는 경우 eval을 사용하지 않고 동일한 목표를 달성하는 더 좋은 방법이 있습니다. 예를 들어 동적 속성에 액세스하려면 대괄호 표기법을 사용하는 것이 더 좋고 간단합니다.

// 反面示例
var property = "name";
alert(eval("obj." + property));
 
// 更好的
var property = "name";
alert(obj[property]);

eval()을 사용하면 실행되는 코드(예: 네트워크에서)가 발생하므로 보안 위험도 발생합니다. 조작되었을 수도 있습니다. 이는 Ajax 요청의 JSON 응답을 처리할 때 매우 흔히 발생하는 부정적인 교훈입니다. 이러한 경우 안전과 효율성을 보장하기 위해 JavaScript 내장 메서드를 사용하여 JSON 응답을 구문 분석하는 것이 가장 좋습니다. 브라우저가 JSON.parse()를 지원하지 않는 경우 JSON.org의 라이브러리를 사용할 수 있습니다.

setInterval(), setTimeout() 및 Function() 생성자에 문자열을 전달하는 것은 대부분의 경우 eval()을 사용하는 것과 유사하므로 피해야 한다는 점을 기억하는 것도 중요합니다. 뒤에서 JavaScript는 프로그램에 전달한 문자열을 평가하고 실행해야 합니다.

// 反面示例
setTimeout("myFunc()", 1000);
setTimeout("myFunc(1, 2, 3)", 1000);
 
// 更好的
setTimeout(myFunc, 1000);
setTimeout(function () {
   myFunc(1, 2, 3);
}, 1000);

new Function() 구문을 사용하는 것은 eval()과 유사하므로 주의해서 접근해야 합니다. 이는 강력한 구조일 수 있지만 종종 오용됩니다. 반드시 eval()을 사용해야 한다면 대신 new Function()을 사용하는 것을 고려해 볼 수 있습니다. new Function()의 코드 평가는 로컬 함수 범위에서 작동하므로 코드에서 평가되는 var로 정의된 모든 변수는 자동으로 전역 변수가 되지 않으므로 작은 잠재적 이점이 있습니다. 자동 전역 변수를 방지하는 또 다른 방법은 eval() 호출을 즉시 함수로 래핑하는 것입니다.

un만이 네임스페이스를 전역 변수로 오염시키는 다음 예를 고려해보세요.

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);             // logs "1"
 
jsstring = "var deux = 2; console.log(deux);";
new Function(jsstring)();   // logs "2"
 
jsstring = "var trois = 3; console.log(trois);";
(function () {
   eval(jsstring);
}()); // logs "3"
 
console.log(typeof un);     // number
console.log(typeof deux);   // "undefined"
console.log(typeof trois);  // "undefined"

eval()과 Function 구문의 또 다른 차이점은 eval()이 범위 체인을 방해할 수 있는 반면 Function()이 더 안전하다는 것입니다. Function()을 어디에서 실행하든 전역 범위만 표시됩니다. 따라서 지역변수 오염을 효과적으로 방지할 수 있다. 다음 예에서 eval()은 Function이 수행할 수 없는 외부 범위의 변수에 액세스하고 수정할 수 있습니다(Function과 new Function을 사용하는 것은 동일합니다).

(function () {
   var local = 1;
   eval("local = 3; console.log(local)"); // logs "3"
   console.log(local); // logs "3"
}());
 
(function () {
   var local = 1;
   Function("console.log(typeof local);")(); // logs undefined
}());