What are closures in JavaScript?
JavaScript, a versatile and widely used programming language, has several features that contribute to its popularity and effectiveness. Among these features, closures are a powerful and fundamental concept that plays a central role in creating efficient and modular code. In this comprehensive guide, we’ll delve into the intricacies of JavaScript closures, exploring their definition, anatomy, practical applications, and potential pitfalls.
How does a JavaScript compiler work?
One of the basic programming paradigms is to store and retrieve values as variables. This paradigm gives the program its state. It also asks the questions: Where do these variables live? How long do they live? and How does the program find them?
These questions make it clear that we need a clearly defined set of rules to store variables in a specific location and to find these variables again later. We call this set of rules: scope
Basic components
Javascript is a compiled language. The compiler compiles the source code in three steps:
Lexing/Tokenizing: Lexing splits the string of the program into parts, the so-called tokens, which are important for the language. For example, the expression var a = 2; is broken down into var, a, =, 2,;.
Parsing: During parsing, a stream of tokens is converted into a tree, which is called an Abstract Syntax Tree(AST).
Code generation: The parsed AST is now converted into executable code called machine language code.
How does the JS Engine compile and execute a line of code?
Firstly, the compiler declares a variable (if it has not already been declared) in the current scope, and secondly, the engine searches for the variable in the scope during execution and assigns it if it is found.
Hoisting in JavaScript
When you see var a = 2;, you probably think it’s a single statement. But JavaScript sees it as two statements: var a; and a = 2;. The first statement, the declaration, is processed during the compilation phase. The second statement, the assignment, remains in the execution phase.
Our first snippet should therefore be handled as follows:
var a;
a=2;
console.log( a );where the first part is the compilation and the second part is the execution.
Similarly, our second snippet is actually processed as follows:
var a;
console.log( a );
a=2;So you can think of this process metaphorically as “moving” variable and function declarations “from where they appear in the code flow to the beginning of the code. This is where the name “hoisting” comes from.
Only the declarations themselves are moved, while all assignments or other executable logic remain in place. If hoisting were to rearrange the executable logic of our code, it could have disastrous consequences.
What is lexical scoping in JavaScript?
There are three components to explain scoping:
“Engine” – It is responsible for compiling and executing the code.
compiler – It is responsible for converting the code into machine-readable code.
scope – manages a javascript array of variables and controls when the variables are accessible to the executing program.
Firstly, the compiler declares a variable in the current scope (if it has not already been declared), and secondly, the engine searches for the variable in the scope during execution and assigns it if it is found.
Just as a block or function is nested in another block or function, scopes are also nested in other scopes. So if a variable is not found in the immediate scope, the engine consults the next higher scope and continues until it is found or until the outermost (also global) scope is reached.
Lexical scope means that the scope is defined by the author’s decision where the functions are declared. The lexing phase of compilation is essentially able to know where and how all identifiers are declared and can therefore predict how they will be looked up during execution.
What are closures?
At its core, a closure in JavaScript is a function that is bundled with its lexical environment. This definition may sound abstract, but it becomes clearer when you consider the concept of lexical scoping.
Definition
A closure is a function that still has access to variables in the outer scope when the outer function returns.
Example demonstrating a basic closure.
function foo()
{
var a=2;
function bar() {
console.log( a );
}
return bar;
}
var baz = foo();
baz();The function bar() has lexical scope access to the inner scope of foo(). But then, we take bar(), the function itself, and pass it as a value. In this case, we return the function object itself that bar references.
After we execute foo(), we assign the value it returned (our inner bar() function) to a variable called baz, and then we actually invoke baz(), which of course is invoking our inner function bar(), just by a different identifier reference. bar() is executed, for sure. But in this case, it’s executed outside of its declared lexical scope. After foo() is executed, normally we would expect that the entirety of the inner scope of foo() would go away because we know that the engine employs a garbage collector that comes along and frees up memory once it’s no longer in use. Since it would appear that the contents of foo() are no longer in use, it would seem natural that they should be considered gone. But the “magic” of javascript closures does not let this happen. That inner scope is in fact still in use and thus does not go away. Who’s using it? The function bar() itself. By virtue of where it was declared, bar() has a lexical scope closure over that inner scope of foo(), which keeps that scope alive for bar() to reference at any later time. bar() still has a reference to that scope, and that reference is called closure.
Use cases
Closures for data protection and encapsulation.
One of the main advantages of closures is the ability to create private variables and thus improve data protection. By encapsulating variables within a closure, they are no longer accessible from outside the functional area. This encapsulation protects sensitive data from unintentional manipulation or tampering, reduces the risk of accidental changes to variables and increases the overall security of the code.
Implementing the module pattern with closures.
function createCounter() {
let count = 0;
return function() {
count++;
console.log(count);
};
}
const counter = createCounter();
counter(); // Outputs: 1
counter(); // Outputs: 2In this example, the variable Count is encapsulated in the closure, which is created by the createCounter function. External code cannot directly access or modify the Count variable to ensure data protection.
Encapsulation in practice:
Encapsulation combines the data (variables) and the methods (functions) that work with that data into a single unit, often referred to as an object. Closures are a natural mechanism to achieve encapsulation in JavaScript.
Imagine a scenario where an object needs to maintain an internal state and only certain functions should have access to change that state:
function createPerson(name, age) {
let _name = name;
let _age = age;
return {
getName: function() {
return _name;
},
getAge: function() {
return _age;
},
setAge: function(newAge) {
if (newAge >= 0) {
_age = newAge;
}
},
};
}
const person = createPerson('John', 30);
console.log(person.getName()); // Outputs: John
console.log(person.getAge()); // Outputs: 30
person.setAge(31);
console.log(person.getAge()); // Outputs: 31In this example, the function createPerson encapsulates the variables _name and _age within the closure. The returned object provides controlled access to these variables via the getter and setter functions, which ensures that changes are only made under certain conditions.
Callback functions and event handling using closures.
function wait(message) {
setTimeout( function timer(){ console.log( message );
}, 1000 );
}
wait( "Hello, closure!" );We take an inner function (called timer) and pass it to setTime out(..). But the timer closes the scope of wait(..) and keeps and uses a reference to the variable message. A thousand milliseconds after we run wait(..) and its inner function scope should otherwise be long gone, this anonymous function still has a closure over that function scope.
Deep in the bowels of the engine, the built-in utility setTime out(..) has a reference to a parameter that is probably called fn or func or something like that. The engine calls this function, which calls our inner timer function, and the lexical scope is still intact.
Closures and Asynchronous JavaScript
Closures provide a natural and elegant solution for managing the complexity introduced by asynchronous tasks. Consider the following example:
function fetchData(url) {
return new Promise((resolve, reject) => {
fetch(url)
.then(response => response.json())
.then(data => {
// Accessing variables outside the Promise scope
let processedData = process(data);
resolve(processedData);
})
.catch(error => {
reject(error);
});
});
}In this example, the javascript closure within the promise constructor captures the lexical scope and allows access to variables and functions defined outside the promise. This encapsulation allows the asynchronous code to refer to and process external states without exposing them globally.
Performance considerations
Although javascript closures provide powerful functionality, developers should consider their impact on performance. Over-creating closures or maintaining unnecessary references can lead to increased memory consumption and slower execution. When optimizing code with closures, a balance must be struck between leveraging their benefits and considering the potential performance impact.
