DEV Community

Cover image for Closures in Javascript
git@Utkarsh_repos
git@Utkarsh_repos

Posted on

Closures in Javascript

Welcome to this blog on Closures which makes many of the JS developers scratch their heads in understanding this cool concept.
I am going to show you-

  1. what are closures?

2.What are advantages of using closures?

What are closures?

A closure is a combination of function bundled together with it's lexical environment . By lexical environment it means that the function is enclosed or bundled with references to the surrounding state.
Long story short is that closure gives access to the outer function's scope from an inner function.

1.Snippet-

function outer() {
    let a = 100;
    function inner() {
        console.log(a)
    }
    inner()
}
outer()
Enter fullscreen mode Exit fullscreen mode

This will output 100 because inner() has formed a closure with outer() and it retains the reference to its outer function's scope.

2.Snippet-

function outer() {
    var a = 100;
    return function inner() {
        console.log(a)
    }

}
var closure=outer()()
Enter fullscreen mode Exit fullscreen mode

This will output 100 because on calling outer function it returns inner function to where it was invoked that is last line of this snippet. There once it is called it will still return 100 as it retains references of its surrounding function.

3.Snippet-

function outer() {
    let a = 100;
    return function inner() {
        console.log(a)
    }

}
var closure=outer()()
Enter fullscreen mode Exit fullscreen mode

The beauty of closures is it even works with 'let' variables .
As we know let has a block scope so it should return undefined outside the block but just because of closures it still prints 100

4.Snippet-

function grandparent(){
    let b=200;
    function parent() {
        let a = 100;
        return function child() {
            console.log(a,b)
        }

    }
   return parent()
}

var closure=grandparent()()
Enter fullscreen mode Exit fullscreen mode

The output of this code snippet will be 100,200 because child forms a closure with its surrounding functions which are parent and grandparent functions and hence when grandparent() is executed outside then child() forms a closure with both of these functions.

By now ,i guess you must gotten the feel of closures.
Basically closures help us in many ways.Let's see its advantages.

Advantages?

Closures provide a way to achieve data hiding and encapsulation so that the scope which forms a closure cannot be accessed outside and remains private

1.Snippet-

function maths(a,b){
  return  function add(){
        console.log(a*b)
    }
}
maths(10,30)()
console.log(a,b)
Enter fullscreen mode Exit fullscreen mode

The output of this code piece will be 300 at maths(10,30)() since add() forms closure with maths(a,b) and its arguments.
But console.log(a,b) returns Reference Error because closure scope is hidden outside and is accessible only by calling add().
Thus,helps in keeping data hidden and private.

Top comments (0)