- Trending Categories
- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is JavaScript closure? Explain with examples.
Closures in JavaScript allow us to access outer function scope from inner function even after the outer function has executed and returned. This means that the inner function will always have access to the outer function variable.
Following is the code for closures in JavaScript −
Example
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>JavaScript Closures</h1> <div style="color: green;" class="result"></div> <button class="Btn">CLICK HERE</button> <h3> Click on the above button to add two numbers using closure </h3> <script> let sampleEle = document.querySelector(".sample"); let resEle = document.querySelector(".result"); function add(num) { return function add1(num1) { resEle.innerHTML += `${num}+${num1} = ${num + num1}`; }; } document.querySelector(".Btn").addEventListener("click", () => { let storeadd = add(99); storeadd(44); }); </script> </body> </html>
Output
The above code will produce the following output −
On clicking the ‘CLICK HERE’ button −
Advertisements