Question

Javascript closure definition says :

A “closure” is an expression (typically a function) that can have free
variables together with an environment that binds those variables
(that “closes” the expression).

Can some one explain to me the concept of free variables ? Is this concept Javascript specific or applies to other languages also ?

Answer 1

Free variables are simply the variables that are neither locally declared nor passed as parameter.

Source :

In computer programming, the term free variable refers to variables
used in a function that are not local variables nor parameters of that
function.1 The term non-local variable is often a synonym in this
context.

In javascript closures, those are simply the variables that the function takes (read and write) in the enclosing scope where is declared the closure or in a parent scope.

Look at this real world example :

Gol.prototype._ensureInit = function() {
    ...
    var _this = this;
    var setDim = function() {
        _this.w = _this.canvas.clientWidth;
        _this.h = _this.canvas.clientHeight;
        _this.canvas.width = _this.w;
        _this.canvas.height = _this.h;
        _this.dimChanged = true;
        _this.draw();
    };
    setDim();
    window.addEventListener('resize', setDim);
    ...
};

In this example a closure points from the setDim function towards the variable _this declared in the enclosing scope (the _ensureInit function). This variable isn’t declared in setDim nor passed. It’s a “free variable”.

Note that _this doesn’t become a variable of the function setDim : another function declared in the same scope would share the same variable.