

- 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
Practical Uses for Closures in Javascript?
A closure is the combination of a function and the lexical environment within which that function was declared.
function outerFunc() { var name = "TutorialsPoint"; // name is a local variable created by outerFunc return function innerFunc() { // innerFunc() is the inner function, a closure console.log(name); // use variable declared in the parent function }; } let f = outerFunc(); f()
outerFunc() creates a local variable called name and a function called innerFunc(). The innerFunc() function is an inner function that is defined inside outerFunc() and is only available within the body of the outerFunc() function.
Note that the innerFunc() function has no local variables of its own. However, since inner functions have access to the variables of outer functions, innerFunc() can access the variable name declared in the parent function, outerFunc().
You can see that name went out of scope when outerFunc completed executing. But if you look closely, innerFunc that was returned and assigned to f still has access to the name variable. Thus inner func formed a closure over the lexical scope of outerFunc.
Practical Uses
Emulating private methods −Languages such as Java provide the ability to declare methods private, meaning that they can only be called by other methods in the same class. JavaScript does not provide a native way of doing this, but it is possible to emulate private methods using closures.
Example
var counter = (() => { var privateCounter = 0; let changeBy = (val) => privateCounter += val; return { increment: () => changeBy(1), decrement: () => changeBy(-1), value: () => privateCounter }; })(); console.log(counter.value()); counter.increment(); counter.increment(); console.log(counter.value()); counter.decrement(); console.log(counter.value());
Output
0 2 1
Use with event handlers
for(let i = 0; i < 4; i++) { button = buttons[i] button.addEventListener("click", alert(i)) }
if you have 4 buttons in a collection buttons and try to add event listeners like this, any click on those buttons will end up giving undefined as the result. This is because when they'll be called, i will no longer be defined. The way to work around this is to introduce a closure over i.
for(let i = 0; i < 4; i++) { button = buttons[i] button.addEventListener("click", () => alert(i)) }
- Related Questions & Answers
- What are Closures in JavaScript?
- JavaScript closures vs. anonymous functions
- How do JavaScript closures work?
- What are JavaScript Function Closures?
- How do closures work in JavaScript?
- Implement Private properties using closures in JavaScript
- Using closures to achieve privacy in JavaScript
- Python Closures?
- Practical Transformer on Load
- Who Uses Financial Analysis and for What Purpose?
- What is a Practical Transformer?
- Practical Transformer on No-Load
- What are Closures in Lua Programming?
- How to use closures in Golang?
- What uses are there for “placement new” in C++?