Closures in JavaScript

Closures in JavaScript

Introduction

In this article, we will learn the important concept of javascript i.e closures.

So, let's dive in

dive in

What is Closure?

CLOSURE = FUNCTION + LEXICAL ENVIRONMENT or A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)...🤔 🤔 🤔

confused

Let me give you an example,

function outerFunction() {
    var x = 10
    function innerFunction() {
        console.log(x, "I am inside inner function") ; 
       // here, variable x can accessed... through lexical environment
    }
    innerFunction()
}

outerFunction()

Lexical environment: Here, innerFunction has access to variable x which is defined in its parent function i.e outerFunction. This is what lexical environment.

Now,

var y = 9
function outerFunction() {
    var x = 7
    function innerFunction() {
        console.log(x, y, "I am inside innerfunction")
    }
    return innerFunction   
   //so here function is not returned whereas whole closure is returned
}

const output = outerFunction()  
console.dir(outerFunction)

You would have thought that how the innerFunction was able to access x.

But javascript makes it possible. when function outerFunction is called, both variable x and function innerFunction will be created inside the local memory of outerFunction that shares the same lexical environment.

Due to which when innerFunction is returned from the outerFunction it will have access to the surrounding variables during the time of its declaration. Whereas variable y is accessed via Global scope.

Alt Text

A Closure is a combination of function bundled together with its surrounding references (Lexical environment). In simple terms, it means, closure gives you access to an outer function’s scope from an inner function.

Gotchas in Closures

  • Re-assign the variable

    For example,

  function outerFunction() {
     var x = 9
       return function innerFunction() {
          console.log(x)
       }
     x = 80
 }
 var output = outerFunction()()

Here, x is re-assigned to a new value i.e 80.

What do you think will be its output?

think

Yes, we will get the value of variable x as 80 not 9 because remember we look for reference!😅

  • Nesting in functions

    For example,

function outermost() {
    var x = 10
    function middle() {
        var y = 8
        function innermost() {
            console.log(x, y)
        }
        return innermost
    }
    return middle
}
const output = outermost()()()

So, In the above example, innermost forms a closure with parent middle and grandparent outermost

Advantages of closures

  1. Module design pattern

  2. Currying in Javascript

  3. Memoize

  4. Maintaining state in async world

  5. Data hiding And encapsulation

  6. Iterators

  7. set timeout

Disadvantages of Closures

  1. Memory in closure cannot be garbage collected

  2. It slows down the performance because a function within another function creates a duplicate in memory.

Congratulations!

We are done, I hope you have learned something new and enjoyed the blog!

Please share your feedback.

References