Eval: run a code string

The built-in eval function allows to execute a string of code.

The syntax is:

let result = eval(code);

For example:

let code = 'alert("Hello")';
eval(code); // Hello

A string of code may be long, contain line breaks, function declarations, variables and so on.

The result of eval is the result of the last statement.

For example:

let value = eval('1+1');
alert(value); // 2

let value = eval('let i = 0; ++i');
alert(value); // 1

The evaled code is executed in the current lexical environment, so it can see outer variables:

let a = 1;

function f() {
  let a = 2;

  eval('alert(a)'); // 2
}

f();

It can change outer variables as well:

let x = 5;
eval("x = 10");
alert(x); // 10, value modified

In strict mode, eval has its own lexical environment. So functions and variables, declared inside eval, are not visible outside:

// reminder: 'use strict' is enabled in runnable examples by default

eval("let x = 5; function f() {}");

alert(typeof x); // undefined (no such variable)
// function f is also not visible

Without use strict, eval doesnt have its own lexical environment, so we would see x and f outside.

Using eval

In modern programming eval is used very sparingly. Its often said that eval is evil.

The reason is simple: long, long time ago JavaScript was a much weaker language, many things could only be done with eval. But that time passed a decade ago.

Right now, theres almost no reason to use eval. If someone is using it, theres a good chance they can replace it with a modern language construct or a JavaScript Module.

Please note that its ability to access outer variables has side-effects.

Code minifiers (tools used before JS gets to production, to compress it) rename local variables into shorter ones (like a, b etc) to make the code smaller. Thats usually safe, but not if eval is used, as local variables may be accessed from evaled code string. So minifiers dont do that renaming for all variables potentially visible from eval. That negatively affects code compression ratio.

Using outer local variables inside eval is also considered a bad programming practice, as it makes maintaining the code more difficult.

There are two ways how to be totally safe from such problems.

If evaled code doesnt use outer variables, please call eval as window.eval(...):

This way the code is executed in the global scope:

let x = 1;
{
  let x = 5;
  window.eval('alert(x)'); // 1 (global variable)
}

If evaled code needs local variables, change eval to new Function and pass them as arguments:

let f = new Function('a', 'alert(a)');

f(5); // 5

The new Function construct is explained in the chapter The "new Function" syntax. It creates a function from a string, also in the global scope. So it cant see local variables. But its so much clearer to pass them explicitly as arguments, like in the example above.

Summary

A call to eval(code) runs the string of code and returns the result of the last statement.

• Rarely used in modern JavaScript, as theres usually no need.
• Can access outer local variables. Thats considered bad practice.
• Instead, to eval the code in the global scope, use window.eval(code).
• Or, if your code needs some data from the outer scope, use new Function and pass it as arguments.