Understanding Closures in JavaScript.

Step by step guide to understand closures.

Downloaded photo from Unsplash

Many developers find closures intimidating who come from language which does not support them. But there is nothing to be afraid from closures and the effort you put to understand closures will pay you many times over.

To understand the closures you need to understand four things.
1. Function can access variables which are defined outside the current function.
2. Closures have access to variables defined in function which enclosed it even if it is returned.
3. Functions in JavaScript are first class objects
4. Closures store outside variable’s references rather than copying value.

Let’s understand first point with example

function addLastName(fname){
    lname = ' Wick'
    function getFullName(){
        return fname + lname;
    }
    return getFullName();
}
console.log(addLastName('John')) // logs - John Wick

here getFullName which is inner function can use variable lname and fname which are defined in outer function addLastName.

Now understand second fact that with code

function addLastName(fname){
    lname = ' Wick'
    function getFullName(){
        return fname + lname;
    }
    return getFullName;
}
let getName= addLastName('John');
console.log(getName()) // logs: John Wick

Here instead of directly calling getFullName function, it is returned and saved into getName variable. Remember functions in JavaScript are first class objects so you can pass them as a parameter and return as a result just like other objects.

When getName function is called it logs ‘John Wick’ but how getFullName can access the variable lname and fname when the addLatName function in which they are defined has been removed from the stack. The answer is — It saves the variable defined in enclosing function, which it may refer in future. Here addLastName function is closure, So we can define closures as — The function which stores the variable of their enclosing scope are called closures.

But how Clousers can preserve variables value?
Remember functions in JavaScript are object, so it can have properties just like other objects.

Last thing to understand closure is that closures saves variables using refere -nces, it just not copy their values.

Let’s understand this through code

function addLastName(fname){
    lname = ' Wick'
    return {
       setLastName: function(name){lname = name},
       getName: function(){return fname + lname}
    }
}
let obj = addLastName('John')
console.log(obj.getName()) // logs: John Wick
obj.setLastName('BabaYaga')
console.log(obj.getName()) // logs: John BabaYaga

Here addLastName function return object which have two clousers setLastName and getName. Calling obj.getName() will log ‘John Wick’ as expected.
Now change the lname value using obj.setLastName() clouser to ‘BabaYaga’. When we again called the obj.getName() it return updated name ‘John BabaYaga’. So you can see that if one closure change the variable’s value others closures will get the updated value. This example clearly demonstrate that variables are saved using references.

In a nutshell —
1. Function can refer variable defined in outer scope.
2. Functions are first class objects in JavaScript
3. Closure can exist even when function in which they are defined no longer exists.
4. Closure store references of their outer variable.
5. Closure can both access and update the outer variable.

I hope this introduction to closures is helpful and if you like the article please do give a clap or if you want to give some feedback, do leave a comment.

Thanks for your time, Happy Coding.