JavaScript의 eval() 및 Function()

안녕하세요, 오늘 블로그에서는 JavaScript에서 eval()와 Function()에 대해 간략하게 논의하겠습니다.

시작합시다.

짧은

eval() 및 Function()는 둘 중 하나에 문자열로 전달된 모든 JavaScript 표현식을 평가할 수 있는 JavaScript의 두 가지 강력한 도구입니다. 표현을 처리하는 방식은 다르지만 둘 다 같은 용도로 사용됩니다.
eval()부터 시작하겠습니다.

평가()

eval()는 JavaScript 표현식을 문자열로 받아 실행하는 전역 함수입니다. undefined 외에는 아무 것도 반환하지 않습니다. HTML에 일부 스크립트를 작성하고 eval() 를 사용하면 노드와 같은 환경에서 console.log() 를 사용하는 동안 출력이 콘솔에 인쇄되는 것을 알 수 있습니다. 예를 들어 식의 결과를 표준 출력이나 이에 상응하는 출력으로 파이프하는 경향이 있기 때문입니다.

예를 들어 보겠습니다. 사용자가 어떤 값을 입력하고 그 결과를 콘솔에 출력해야 하는 앱을 작성한다고 가정해 보겠습니다. 까다롭죠? eval() 시간을 절약할 수 있습니다. 사용자가 eval에 입력한 내용을 전달하고 마법을 사용하세요.

let userInput = "2+4";
eval(userInput); // output : 6

기능()

eval의 대안은 Function() 입니다. eval()과 마찬가지로 결과를 직접 출력하는 대신 호출할 수 있는 익명 함수를 반환한다는 점을 제외하면 실행을 위해 일부 표현식을 문자열로 취합니다. eval()보다 빠르고 안전한 대안입니다. Function() 를 사용하여 위와 동일한 예를 시도해 보겠습니다.

let userInput = "2+4";
let result = Function(userInput);

위의 결과를 기록하려고 하면

function anonymous() {
        2+4
}

왜 그렇습니까? 이는 Function()가 익명 함수를 반환하기 때문입니다. 자세히 살펴보면 문자열에 전달한 표현식이 함수 본문에 있음을 알 수 있습니다.
문자열에 return 문을 추가하면 어떻게 될까요?

let userInput = "2+4";
let result = Function("return " + userInput); // which is same as "return 2+4"

로깅 결과를 한 번 더 시도하십시오. 우리는 이것을 얻는다

function anonymous() {
        return 2+4
}

이제 산술 연산의 결과를 반환하고 있음을 알 수 있습니다. 그러나 이제 우리는 실제 값을 원합니다. 함수를 실행하여 얻을 수 있습니다.

let userInput = "2+4";
let result = Function("return " + userInput)(); // which is same as "return 2+4"

이제 결과를 기록하고 콘솔을 조회하면 예상한 결과인 6이 표시됩니다.

메모

큰 힘에는 큰 책임이 따른다
eval() 및 Function()는 JavaScript에서 사용할 수 있는 매우 강력한 도구입니다. 그러나 그 힘에는 대가가 따른다. 임의의 코드는 충분히 기술적인 사용자 또는 악의적인 개인에 의해 실행될 수 있습니다.
eval()는 특히 위험합니다. eval() 의 호출자와 동일한 권한으로 코드를 실행할 수 있기 때문입니다. 브라우저에서 FileApi를 사용하여 일부 코드를 평가하고 결과를 사용자 컴퓨터에 저장하는 앱을 만든다고 가정해 보겠습니다. 사용자는 앱에 대해 eval()를 사용하고 FileAPI에 액세스하여 악의적인 작업을 수행할 수도 있습니다.
다시 말하지만 eval() 는 Function() 보다 훨씬 느립니다.
여기에서 인용하십시오

eval() is also slower than the alternatives, since it has to invoke the JavaScript interpreter, while many other constructs are optimized by modern JS engines.

Additionally, modern javascript interpreters convert javascript to machine code. This means that any concept of variable naming gets obliterated. Thus, any use of eval() will force the browser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value. Additionally, new things can be introduced to that variable through eval() such as changing the type of that variable, forcing the browser to re-evaluate all of the generated machine code to compensate.

eval 및 Function에 대해 자세히 알아보기

비디오를 선호하십니까?