Functions and Closures in JavaScript

Functions and Closures in JavaScript

In this article we will talk about functions in JavaScript , how functions invocation works and Closures.

What is function

A function is a set of statements that take inputs, do some specific calculations, and produces output. Basically, a function is a set of statements that performs some tasks or does some computations and then return the result to the user.

What is the need of a function

If we want to do some calculations. Let's say that if we want to add two numbers

var input1=10;
var input2=20;

var sum=input1+input2;

console.log(sum);

output

30

From the above code we calculate the sum of two numbers. But if we want to add again two numbers then we have to write the same code again and again and by writing same code again and again it basically increases our code length or increases the complexity also. To avoid this we can use functions.

With the help of functions we can write the code at once and use it many a times we want.

Syntax of writing the function

function function-name(){

// statements

}

We can write the above code by using functions also.

function add(a,b){

var add= a+b;

console.log(add);

}

add(2,2);

Output

4

From the above code we can use it as many times as we want .

How the function execution works in JavaScript

Lets write a code:


var a=100;

first();

second();

console.log(a);

function first{

var a=10;
console.log(a);

}

function second(){

var a=20;
console.log(a);

}

Output

10

20

100

Let's understand what happen behind this .

As we know a global execution context is created and it will put inside the call stack and inside the global execution context we have two blocks first is a memory execution other one is code execution.

As we know JavaScript assign memory to variables and functions during the 1st phase it gives undefined to variables and in case of functions it will take the whole function. So from the above code when it calls first() so one more execution context is created for that function. Now same things happen for this also like during the 1st phase JavaScript allocate memory to variables and functions and then code execution phase started now it finds the value of a in local memory and prints the value of a as 10. After doing all this execution context is deleted .

Now it move forward and again see a function call now again it will do all the things for second() describe above and prints the value of a as 20. After that the execution context is deleted and again move forward to the next line.

In the end it will print the value of a as 100 it will print the output to the console.

What is Closure

Before understanding closure do you know about lexical scope. If you know then ok if you don't then checkout my article on lexical scope.

Now let's understand what is closure .

Closure is a combination of function bundled together along with its lexical environment.

Didn't understand the above line don't worry .

Lets understand with the help of an example


function outer(){

var a=10;

function inner(){

console.log(a);

}

inner();

}

outer();

As we know the above code gives the output as 10 why because as we studied previously if a is not present in their local scope then it goes to the parent now read the above definition again.

In this case we can say inner() is a function which is bundled or we can say combine together with their lexical environment of their parent.

In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Now let's see what happens when we return the value of inner function let's understand.

function outer(){

var a=10;

function inner(){

console.log(a);

}

return inner;

}

var store=outer();
console.log(store);

Output

function inner(){

console.log(a);

}

As we can see it prints the whole function .What happen if we call the variable in which we store that function.

function outer(){

var a=10;

function inner(){

console.log(a);

}

return inner;

}

var store=outer();
store();

Output

10

How ?? Why ??

As we know that after executing the outer function it will pop out or deleted from the call stack so how it prints the value of a which is present inside the outer function.

Their comes closure into picture.

The inner function always remember its lexical scope it knows where it was present in this case it is inside the outer function and inside the outer function the value of a is 10 so that's why it will be able to give the value as 10.

In the above code when we return inner not just the function return but also the closure was return that closure involve function including with the lexical environment of the Parent.

Closure scope chain

Every closure has three scopes:

Local scope (Own scope)

Function scope

Global scope

In some cases it will also happen that our Outer function is itself a nested function then it will also access the outer function scope and from this way it will create a chain of function scopes.

Let's understand by writing the code.


// global scope

const e = 10; 

function sum(a) {

  return function sum2(b) {

    return function sum3(c) {

      // outer functions scope

      return function sum4(d) {

        // local scope

        return a + b + c + d + e;

      };

    };

  };

}

const sum2 = sum(1);

const sum3 = sum2(2);

const sum4 = sum3(3);

const result = sum4(4);

console.log(result);

Output

20

Lets understand what happen in the above code.

First sum will be executed and we will pass 1 to it. when it goes forward then it encounter a return statement.

Sum2 will store

sum2= return function sum2(b) {

return function sum3(c) {

return function sum4(d) {

return a + b + c + d + e;

Now sum2 will be executed and we will pass 2 to it.

Sum3 will store :

sum3=return function sum3(c) {

return function sum4(d) {

return a + b + c + d + e;

Now sum3 will be executed and we will pass 3 to it.

Sum4 will store:

sum4=return function sum4(d){

return function sum4(d) {

return a + b + c + d + e;

Now sum4 will be executed and we will pass 4 to it.

result will store

result=return a + b + c + d + e;

Now it will add all the value which we passed (1+2+3+4+10 =20)

10 here comes from the global variable which we defined at the top of our code.

console.log(result);

SO that's why it gives us the value as 20;

In the example above, there's a series of nested functions, all of which have access to the outer functions' scope. In this context, we can say that closures have access to all outer function scopes.

Closure is an important concept in JavaScript and little bit hard if you try to get in first time and you didn't get try code it by yourself and try to visualize it then it may be helpful for you.

That's it from now If you like it please give me a like and comment below the topic which you want me to cover.

Thank you

Did you find this article valuable?

Support jitender singh by becoming a sponsor. Any amount is appreciated!