Minimum viable JavaScript closure

Question

The top answer on Stack Overflow regarding JavaScript closures defines them as (paraphrase):

A function that simply accesses variables outside of your immediate lexical scope that are not deallocated after the function returns.

Based strictly on this definition it seems like we can reduce the minimum viable closure (that does something useful) to a function containing no local variables that alters something in the global scope:

var x = 0;
function foo() {
    x = x + 1;
    return x;
}
foo(); // returns 1
foo(); // returns 2, et cetera

However, usual examples contain nested functions and variables that are "enclosed". Is this example a closure (or perhaps the global scope is now the closure)? Or is the definition incomplete?

Thanks!

Closure examples include an outer function (and thus nested function) because *the outer function creates the scope bound by the inner functions*. A new scope "execution context" is created when the outer function is executed - and the closure effect is created when the the inner functions, that *"enclose"* the [new] outer scope, are returned or otherwise exposed. — user2864740, Feb 26 '14 at 19:47

Denys Séguret · Answer 1 · 2014-02-26T19:59:54.517

3

No, because you simply don't use a closure here, there's only one scope, the global one, you're just using a global variable.

The definition you cite is ambiguous there :

after the function returns

In this definition, the "function" which "returns" is the one whose scope holds the variable, that is the external one. As there's no outer function, and the global scope never ends, there's no closure.

A closure would be like this :

var foo = (function(){
    var x = 0;
    return function() {
      x = x + 1;
      return x;
    }
})(); // the function returns but x keeps being usable by the inner function

foo(); // returns 1
foo(); // returns 2, et cetera

And a less useless closure would be like this :

function makeFoo(){
    var x = 0;
    return function() {
      x = x + 1;
      return x;
    }
}
var foo1 = makeFoo(), foo2 = makeFoo();
foo1(); // returns 1
foo2(); // returns 1
foo1(); // returns 2, et cetera

edited Feb 26 '14 at 19:59

answered Feb 26 '14 at 19:43

Denys Séguret

372,613
87
782
758

So how would we amend the definition? Do we need to say something about creating a new execution scope withing the global scope? – edj Feb 26 '14 at 19:47
@edj I think I spotted your confusion. I edited. Does that make it clear ? – Denys Séguret Feb 26 '14 at 19:54
thanks for adding this. I thought my recent closure understanding was wrong when I read above, but then I read your answer and all was good again. – kpierce8 Oct 03 '16 at 15:53

score 0 · Accepted Answer · edited May 23 '17 at 10:30

Yes, it is a closure. In the top answer, it actually provides a simplest closure example:

var a = 10;
function test() {
  console.log(a); // will output 10
  console.log(b); // will output 6
}
var b = 6;
test();

This is basically identical to your example, the scope of the function definition just happens to be the same as the parent of execution context.

When a Javascript function is invoked, a new execution context is created. Together with the function arguments and the parent object, this execution context also receives all the variables declared outside of it (in the above example, both 'a' and 'b').

You can actually use a new scope to replace the global scope in your example:

(function(){ 
  var x = 0; 
  function foo(){ 
    x = x + 1; 
    console.log(x);
  } 
  foo(); // output 1
  foo(); // output 2 
})();

Minimum viable JavaScript closure

2 Answers2