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
[edit | edit source]First, 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
[edit | edit source]To 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
add
that takes another parametercertainValue
, - in addition to its parameter, the (inner) function has access - as usual - to its lexical environment where
param
is 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.