In this tutorial, we will a learn a part of javascript i.e. Understanding JavaScript Closure
Closures allow JavaScript programmers to write better code. Creative, expressive, and concise. We frequently use closures in JavaScript, and, no matter your JavaScript experience, you will undoubtedly encounter them time and again. Sure, closures might appear complex and beyond your scope, but after you read this article, closures will be much more easily understood and thus more appealing for your everyday JavaScript programming tasks.
What is a JavaScript closure?
A JavaScript Closure is when an inner function has access to members of the outer function (lexical scope) even when executing outside the scope of the outer function.
Therefore, we cannot afford to talk about closure while leaving out functions and scope.
JavaScript variables can belong to the local or global scope.
Global variables can be made local (private) with closures.
Scope in JavaScript
Scope refers to the extent the visibility of a variable defined in a program.There are different Ways to create scope in JavaScript like try-catch blocks, functions, the let keyword with curly braces among others. We mainly have two variations of scope: the global scope and local scope.
-
Local Scope
A javascript function can access all the variable assigned inside a particular function
for e.g :
function multiply_local() {
var a = 3; // Local Scope
return a * a;
}
-
Global Scope
A javascript function can also have access to variables which are defined outside the function.
for e.g :
var a = 8;
function multiply_global() {
return a * a;
}
Lexical Scope
JavaScript’s Lexical Scope is determined during the compile phase. It sets the scope of a variable so that it may only be called/referenced from within the block of code in which it is defined.
A function declared inside a surrounding function block has access to variables in the surrounding function’s lexical scope.
var AvailableBalance = 1000 // Global Scope
function withdraw (amount) {
var balance = parseInt(AvailableBalance) - parseInt(amount);
const actualBalance = (function () {
const TAX = 15.2
return balance - TAX
/*
* Accesses balance variable from the lexical scope
*/
})() // Immediately Invoked Function expression
// console.log(TAX) // Err: Can't find variable: TAX
return actualBalance
}
alert("Available Balance : " + withdraw(300));
Invoking an inner function outside of its enclosing function and yet maintain access to variables in its enclosing function (lexical scope) creates a JavaScript Closure.
function book () {
var name = 'Javascript - closure'; // Local variable
var actions = {
lang: function () {
// new function scope
alert('Selected Book : ' + name); /**
* Accessing the name variable from the outer function scope (lexical scope)
*/
}
} // actions object with a function
return actions; /**
* We return the actions object
* We then can invoke the speak function outside this scope
*/
}
alert(book().lang());
The closure allows exposing a public interface while at the same time it hides and preserving execution the context from the outside scope.
Some of the Javascript design patterns make use of closures.
Get More Articles On – JavaScript