The concept of closure is one that has been difficult to get a simplified explanation of its functionality and core concept even with advanced developers.
To understand the concept of closure, you should have a fundamental understanding of JavaScript Functions, scopes, and lexical scope.
Your understanding of these concepts will give you a clearer understanding of JavaScript Closure.
In this article, we will simplify JavaScript Closure with a practical approach to its functionality. Additionally, you should be able to understand what closure is and get a practical implementation of it.
What is Scope in JavaScript?
Scope in JavaScript refers to the visibility and accessibility of variables, objects, and functions from different parts of the code.
In other words, scope simply tells us which variable is visible or can be referenced in a given code where it is been declared.
JavaScript has broadly two types of scope:
Global scope
Local scope
Global scope
Variables that are declared outside of a function have a global scope. This simply means they are visible everywhere and can be accessed and changed from anywhere in the codebase.
Let’s look at an example:
js
1: let firstName = "Success" //this is has a global scope
2: let lastName = "Ibekwe" // this has a global scope
3: function welcomeUser() {
4: let message = "Welcome";
5: console.log(message + " " + firstName + " " + lastName);
}
6: welcomeUser()
/*
calling this function will print out " Welcome Success Ibekwe "
*/
From the code snippet above, the firstName and lastName variables have a global scope because they are declared outside of the welcomeUser() function.
The point of the variable declaration determines the accessibility of the variable. If a variable is declared in the global scope, it's accessible within the entire object.
For instance, the two variables firstName and lastName, as you can see in the console.log inside the welcomeUser() we were able to make reference to the firstName and lastName variables.
Local scope
Variables declared within a function have local scope. This simply means that they are only visible and can be referenced within the scope of that function where it is been declared.
This is made possible by the use of the let or const keyword which was introduced in ES6
let’s look at an example using our previous code.
js
1: let firstName = "Success" //this is has a global scope
2: let lastName = "Ibekwe" // this has a global scope
3: function welcomeUser() {
4: let message = "Welcome";
5: console.log(message + " " + firstName + " " + lastName);
}
6: welcomeUser()
/*
calling this function will print out " Welcome Success Ibekwe " in the browser console
*/
7: console.log(message) // this will throw an error in the browser console saying (Uncaught ReferenceError: message is not defined).
You will notice that inside of the welcomeUser() function, we declared a variable message on line 4.
The message variable has a local scope, so it can’t be accessed or changed from outside of the welcomeUser() function. It can only be referenced or changed within the welcomeUser() function where it is declared.
In line 7, we tried to access the message variable from outside of the welcomeUser() function but it will get throw an error. (Uncaught ReferenceError: message is not defined).







