JS new Function - logging a variable by name dynamically

Question

We are given a code snippet in run time along with a name of a variable used in code. We want to evaluate the given code and log the value of the variable.

Example:

suppose our code is var foo = "Blah"; and the name of the var is foo.

eval('var foo = "Blah"; let varName = "foo"; console.log(this[varName]);');

yields Blah.

yet

new Function('var foo = "Blah"; let varName = "foo"; console.log(this[varName]);')();

yields undefined.

Is there a way to make get this to work with new Function?

Answer 1

With new Function, you're creating a new function. The code that is executed looks something like:

function someFunction() {
  var foo = "Blah"; let varName = "foo"; console.log(this); console.log(this[varName]);
}
someFunction();

There, foo is in local scope of the someFunction. It's not global, so variables declared with var inside the function don't get put onto the global object.

In contrast, eval runs on the top level. Your eval code that is executed looks something like:

var foo = "Blah"; let varName = "foo"; console.log(this[varName]);

which is all on the top level, so the foo variable that was declared gets put onto the global object, the this.