Why can I only declare variables in the first instance of a chain of nested closures?

Question

I'm trying to hack together a Read-Eval-Print-Loop in Javascript. (It's for a web-based "teach yourself Javascript" platform.) I have something that mostly works, but I'm encountering a weird bug with closures.

Here's a simplified version of the core of the loop. I wrote it this way because I want to use closures and continuations to maintain any state created in the eval:

// listing 1

var repl = function(result) {
  return {
    result:
      result,
    then:
      function (expression, continuation) {
        return continuation(eval(expression));
      },
  };
}

And it almost works. For instance, it correctly evaluates the sequence of expressions var x = 1, x++, x:

// listing 2

repl(eval('var x = 1')).then('x++', repl)
                       .then('x', repl)
                       .result

// evaluates to 2

So expressions can access and modify local variables that were declared earlier without polluting the global scope, which is great. But the variable declaration (i.e. var ...) only works in for the first expression in the chain. For instance, the sequence of expressions var x = 1, var y = 2, y throws a y is not defined error:

// listing 3

repl(eval('var x = 1')).then('var y = 2', repl)
                       .then('y', repl)
                       .result;

// throws "y is not defined"

I've found that I can avoid this error if I replace each instance of repl with its definition, like this:

//listing 4
//
// same as listing 3, but repl is replaced with its
// definition from listing 1

function (result) {
    return {
      result:
        result,
      then:
        function (expression, continuation) {
          return continuation(eval(expression));
        }
    },
  })(eval('var x = 1')).then(
    'var y = 2',
    function (result) {
      return {
        result:
          result,
        then:
          function (expression, continuation) {
            return continuation(eval(expression));
          },
      };
    }
  ).then(
    'y',
    function (result) {
      return {
        result:
          result,
        then:
          function (expression, continuation) {
            return continuation(eval(expression));
          },
      };
    }
  ).result

// evaluates to 2

This evaluates to 2. So I guess I could solve my problem just by evaling the definition of repl for each iteration. But surely there's a better solution ... isn't there?

---

Edit: I experimented with replacing each instance of repl with eval('('+repl+')'), but it didn't solve the problem. What am I missing?

Answer 1

Since RobG already explained the cause of the problem, I'll limit this answer to a possible workaround.

If you do not mind polluting the global scope (maybe that's even desired here?), you can use an indirect eval call to force all the expressions to be evaluated globally:

var repl = function(result) {
  return {
    result:
      result,
    then:
      function (expression, continuation) {
        return continuation((1,eval)(expression));
      },
  };
}

http://jsfiddle.net/y37Pj/

You could also call repl instead of continuation, so you don't need to pass it to then every time:

var repl = function(result) {
  return {
    result:
      result,
    then:
      function (expression) {
        return repl((1,eval)(expression));
      },
  };
}

repl(eval('var x = 1')).then('var y = 2')
                       .then('y')
                       .result

http://jsfiddle.net/y37Pj/1/

---

The solution Pitarou accepted was hidden in a jsFiddle in a comment to this answer. For reference, here's a slightly modified version of the "ugly hack" solution (which evals the source code of the function to create a closure):

function make_repl() {
  return {
    result: undefined,
    then: function (expression) {
      return {
        result: eval(expression),
        then: eval('('+this.then.toString()+')'),
      };
    },
  };
};

var repl = make_repl();

repl = repl.then('var x = 1').then('var y = 2').then('x + " " + y');

console.log(repl.result); // prints "1 2"

console.log(typeof(x), typeof(y));
// prints "undefined undefined", so we know the global scope was not touched

Answer 2

Variables created by eval are created in the calling execution context. Therefore they are only available to other execution contexts created later on the same scope chain.

If you do:

eval( 'var x = 3' );

as global code, then a variable x with a value of 3 is created as a variable in the global context when the expression is evaluated. If eval is called from a function context, then any variable declarations are local to that context:

function doEval()
  eval( 'var x = 3' );
}

When doEval() is called, x will be created in the execution context of the function and will only be available inside the function.

E.g.:

function doEval() {

  // Create local variable x
  eval( 'var x = 3' );

  // x is available on this function's scope chain
  var foo = function(){alert(x)};

  foo();
}

doEval()   // shows 3

alert(x) // Refernce error, x is not defined

In your code, each function call creates a new execution context and variable environment that doesn't have access to the previous one. You can't get a reference to the local context or to the variable object so you can't pass it to some other function.

To evaluate multiple strings as code, you could use sequential calls to eval like:

function evaluateExpressions() {
  for (var i=0, iLen=arguments.length; i<iLen; i++) {
    eval(arguments[i]);
  }
}

and call the function like:

evaluateExpressions(expr1, expr2, expr3, ...)

but then you might as well do:

eval(expr1 + expr2 + expr3 + ...)

or

eval([expr1, expr1, expr3, ...].join(';'))

At least calling it from inside a function means variables don't become global accidentally.

Oh, almost forgot, eval is evil. ;-)