Javascript闭包：变量重用不一致

Question

1) Why is there this inconsistency in JavaScript - I was expecting the fourth line to return 11 as well:

(function(n, m) { n = n + m; return n })(3, 8)                         == 11
(function(n, m) { var n = n + m; return n })(3, 8)                     == 11

(function(n) { return function(m) { n = n + m; return n } })(3)(8)     == 11
(function(n) { return function(m) { var n = n + m; return n } })(3)(8) == NaN

2) I'm writing a compiler of a language to javascript. I use var to avoid polluting the global space with temporary variables. It just happened above that my temporary variable was n and the overriding was fine.
Is there another way so that I can (re)define n such that if n was not defined previously, it still considers that n is local?

The following two variants pollute the namespace with tmp , which I want to avoid:

(function(n, m) { tmp = n + m; return tmp })(3, 8)                     == 11
(function(n) { return function(m) { tmp = n + m; return tmp } })(3)(8) == 11

Answer 1

In your fourth example:

(function(n) { return function(m) { var n = n + m; return n } })(3)(8) // == NaN

...you've shadowed the n parameter of the outer function with a local declaration. Since you haven't given that local variable any initializer, its default value is undefined . undefined plus any number is NaN .

You may be wondering why this is different from your second example:

(function(n, m) { var n = n + m; return n })(3, 8) // == 11

The answer is scope . In the second example, the var n appears in the scope where the n parameter already exists, and so does not shadow it (using var with the same identifier as a parameter in the same scope is a no-op). But in the fourth example, the var n appears in a nested scope under the one where the parameter n exists. And so it shadows the parent n .

Here, the var doesn't do anything, because there's already an n in-scope:

 function foo(n) { var n; console.log(n); } foo(42); // 42 

But here, it does:

 function foo(n) { (function() { var n; console.log(n); })(); } foo(42); // undefined 

...because the parameter and the var are in different scopes.

The following two variants pollute the namespace with tmp, which I want to avoid

No need for tmp (although a local tmp would be fine). If you want a nested function, just don't use var on n :

 console.log( (function(n) { return function(m) { n = n + m; return n } })(3)(8) // == NaN ); 

That said, a local tmp (using var ) would be no bad thing:

 console.log( (function(n) { return function(m) { var tmp = n + m; return tmp; }})(3)(8) // == 11 ); 

...but you have to declare it. Without the var declaring it, the code falls prey to The Horror of Implicit Globals *, which you do indeed want to avoid. :-)

---

* (that's a post on my anemic little blog)

Answer 2

By placing var in front of n in the inner function, you're declaring a new n variable, which at that point is undefined and the reason you're getting NaN (eg undefined + 8 = NaN ).

There's no need to declare a new variable. Just return the value:

(function(n) {
  return function(m) {
    return n + m;
  }
})(3)(8)