JavaScript Tutorialprovides basic and advanced concepts of C# for beginners and professionals.

  1. Home
  2. JavaScript Tutorial

closures in JavaScript

Back to: JavaScript Tutorial

A closure in JavaScript is a feature where a function "remembers" the environment in which it was created, even after the outer function has finished executing. In simpler terms, a closure allows a function to access variables from its outer (enclosing) function even after that outer function has returned.

How Closures Work

  1. Inner Function Access: An inner function can access variables from its outer function, even if the outer function has already returned.
  2. Function Scope: A closure is created when a function is defined within another function. The inner function "captures" the variables from the outer function.
  3. Lexical Scoping: This means that the scope of a variable is determined by where it is defined, not where it is called.

Example of a Closure:






javascript















function outerFunction() { let outerVariable = "I am from the outer function"; // outerVariable is local to outerFunction function innerFunction() { console.log(outerVariable); // innerFunction can access outerVariable } return innerFunction; // Returns the inner function, creating a closure } const closureFunction = outerFunction();
// outerFunction executes, returning innerFunction closureFunction(); // innerFunction still has access to outerVariable from outerFunction 







Explanation:


    
    
  1. When outerFunction() is called, it defines the variable outerVariable and the inner function innerFunction.
    2. 
    
  2. outerFunction() returns innerFunction, which creates a closure because it keeps access to outerVariable.
    3. 
    
  3. Even though outerFunction() has finished executing, innerFunction still has access to outerVariable because of the closure.
    4. 



Practical Use Cases for Closures:


    
    
  1. 
    
    
    Data Encapsulation: Closures can help you create private variables and methods.
    
    
    
    
    
    
    
    javascript
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    function counter() { let count = 0; return { increment: function() { count++; console.log(count); }, decrement: function() { count--; console.log(count); } }; } const myCounter = counter(); myCounter.increment(); // 1
    myCounter.increment(); // 2 myCounter.decrement(); // 1 
    
    
    
    
    
    
    
    
    Here, count is private to the counter function but accessible via increment and decrement methods.
    
    
    2. 
    
  2. 
    
    
    Callback Functions: Closures are commonly used in asynchronous operations like setTimeout, event handlers, or other callbacks.
    
    
    
    
    
    
    
    javascript
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    function createTimeoutMessage(message, delay) { return function() { console.log(message); }; } const showMessage = createTimeoutMessage("Hello after 3 seconds!", 3000); setTimeout(showMessage, 3000); // "Hello after 3 seconds!" after 3 seconds 
    
    
    
    
    
    
    
    3. 




Closures are a powerful tool in JavaScript, allowing for private data, maintaining state, and handling asynchronous operations effectively.






                        

                               
                                                    


                    



                

            

        

    






        
        
Scroll to Top