JavaScript/Closures
A Closure is a technique where a function is bundled (enclosed) with its surrounding variables, the lexical environment. Typically, Closures are implemented in functional programming languages like JavaScript where they support Currying.
Lexical environment
editFirst, we show the access of a function to its lexical environment. This alone is not a Closure.
"use strict";
function incrementByCertainValue(param) {
return param + certainValue;
}
let certainValue = 10;
alert(incrementByCertainValue(8)); // 18
certainValue = 100;
alert(incrementByCertainValue(8)); // 108
The function incrementByCertainValue increments its parameter by the value of the variable certainValue. Because incrementByCertainValue as well as certainValue are defined within the same block, the function has access to the variable. Whenever the function is called, it reads the variable and uses it to compute its return value.
Closure
editTo extend the above example to a Closure, we have to combine an (inner) function with access to variables of its lexical environment - typically another function -, and save this state by returning this inner function.
"use strict";
function incrementByCertainValue(param) {
// declare a function that will perform the work. (Only declaration, currently not invoked.)
const add = function (certainValue) {
// access to 'param' from lexical environment and to its parameter 'certainValue'
return param + certainValue;
}
return add;
}
const incrementByFive = incrementByCertainValue(5);
alert(incrementByFive(8)); // 13
const incrementBySix = incrementByCertainValue(6);
alert(incrementBySix(8)); // 14
alert(incrementByFive(10)); // 15
The (outer) function incrementByCertainValue
- contains a parameter
param, - defines an (inner) function
addthat takes another parametercertainValue, - in addition to its parameter, the (inner) function has access - as usual - to its lexical environment where
paramis defined - returns the (inner) function.
So far, there are exclusively declarations and no running code.
When the variable incrementByFive is declared in line 12, it is initialized with the return value of the function incrementByCertainValue(5). This is the crucial point where code runs and the Closure technique acts. Within incrementByCertainValue the 5 is known as the parameter/variable param. Next, the function add is created using param from its lexical environment. This function add accepts one parameter that must be given from the calling routine later on. The return statement of incrementByCertainValue delivers this function add that has bound the value '5' into its body. Please note that the function name add is arbitrary and not seen outside of incrementByCertainValue.
When incrementByCertainValue is called a second time with the argument '6', the '6' is bound to a separate, second function.