

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do closures work in JavaScript?
In this article, we are going to learn about ‘closure’ and how they actually work in JavaScript. The closure is basically a combination of a function that is enclosed with the references to its surrounding state (Also known as the lexical environment).
In JavaScript, closures are basically created every time a function is created at run time. In other words, a closure is just a fancy name that remembers the external things used inside it.
Let’s understand the JavaScript closures with the help of some examples −
Example 1
In the example below, we will be declaring a closure that would eventually be able to access an outer variable tagLine from the outer function
After using the outer variable in the innermost function, this particular closure will help the user to alert tagLine every time the outer function is called.
#Filename: index.html
<!DOCTYPE html> <html> <head> <title> Closures in Javascript </title> </head> <body> <h1 style="color: green;"> Welcome To Tutorials Point </h1> <button type="button" onclick="init()"> Click here!!! </button> <p id="demo"></p> <script> function init() { var tagLine = "Start your Learning journey now"; function display() { // display() is the inner function, a closure alert(tagLine); // use variable declared in the parent function } display(); } </script> </body> </html>
Output
This will produce the following result.
Example 2
In the below example, we are using the nested closures to call two functions and display the output of the same function.
#Filename: index.html
<!DOCTYPE html> <html> <head> <title> Closures in Javascript </title> </head> <body> <h1 style="color: green;"> Welcome To Tutorials Point </h1> <button type="button" onclick=" Counter()"> Click Me! </button> <p id="demo1"></p> <p id="demo2"></p> <script> function Counter() { var counter = 0; function outerfunction() { counter += 1; document.getElementById("demo1").innerHTML = "Outer Counter called = " + counter +" from Outer Function " ; function innerfunction() { counter += 1; document.getElementById("demo2").innerHTML = "Inner Counter called = " + counter +" from Inner Function "; }; innerfunction(); }; outerfunction(); }; </script> </body> </html>
Output
- Related Questions & Answers
- How do JavaScript closures work?
- What are Closures in JavaScript?
- JavaScript closures vs. anonymous functions
- What are JavaScript Function Closures?
- Practical Uses for Closures in Javascript?
- Implement Private properties using closures in JavaScript
- Using closures to achieve privacy in JavaScript
- How do wind turbines work?
- How do Python modules work?
- How do bitcoin ATMs work?
- How do AC locomotives work?
- How do exceptions work in C++
- How do interfaces work in C#?
- How do arrays work in C#?
- Python Closures?