What is Closure? Difference between Global and Block Scope


In this article, we will understand what is closure is all about. we will also take a look at global and block scope. we will differentiate global and block scope. But first, we need to understand what is closure in javascript.

What is Closure?

The closure is the combination of function bundled together With references to its surrounding state. This definition is more complicated right. Now let’s read this in simple words.

closure

In other words, the closure gives you an access to an outer function scope from an inner function. It means closure is simply a function inside another function to expose it. Now here you can say we use expose word for the function.  to expose the function you can use return keyword or you can pass it to another function.

Now let’s take an example and understand how closer look.

When you execute this example you will get 0 1 2 on the console. now in this example, we created to function inner and Outer.  we named counter to the outer function and we create an anonymous function in the counter as an inner function.

Now you can see to expose the variable we use closure and return outer function variable. As you know you can’t access the function variable outside of that function.  but using closure you can access them. with just return keyword and using the function you can return variables to its caller.

Now let’s take one more example of closer.

Example 2

so here we just define A standalone block and access the inner block variable. So when you execute this statement you will get an error message on the console.

Well, you know that you can’t access the variable outside of the block scope. But using the closure you can do that just like this.

now when you execute this statement you will get a character on the console. So using closer you can access the inner block variable.  

Right.

Let’s take one more example with an object. So in this example, we are using arrow function as a closure.

example with object

Now when you execute this you have a reference of the object in the if a variable. Now if you just create a reference for this function. then you can access the object properties.

so when you execute this statement you will get the character on the console.  now using the reference you can access the object. as you can see you can access the block scope variable outside of the block using closure.

Global Vs Block Scope

You know that when you declare a variable it has a specific scope.  you can only access that variable in that specific scope. But now we will understand what is global scoping. So when the JavaScript program starts, Before any function called. It is a global scope. Anything which you declare in the Global scope will available all over the program.

Anything which you declare in the Global scope is called Global scope. Frankly speaking, The Global scope has a bad reputation. Because of Global scope available in all over the program.  and it causes the error if you declare the same identifier.

I personally suggest you don’t rely on the go Global scope. Now consider the following example and understand what is disadvantages when you using global scoping

Now in this example, we are using Global variables.  so here name and subscriber is the group Global variable which you can access anywhere in the program. You can see Both functions are highly dependent on the Global variable. Accidentally or intentionally if we change the name or value of the Global variable then this will affect the function.

Because Both functions rely on the Global variable. Now the better approach to use Global variable is this.

With object

So in this example, we just put Global variables in the single object. Doing this I will reduce global variable name conflict. Suppose if you wanted to declare more than two variables then you can’t use Global scoping because it causes the error of a name conflict.

In that situation when you use more than two variables specified the name in the object. Using this approach definitely help you to reduce name conflict.

Block Scope

Now you know that what is global scoping. Now we will move to the next topic and understand what is block scoping. Block scoping is opposite from the Global scope. In the block scoping which specify a specific area to access the specific variable value.  outside of that scope, you can’t access that variable value. using block scoping you can specify boundary to the variable preventing access from outside function.

Block scoping is the statements Surrounded by curly braces. Now let’s take an example and understand what is block scoping.

example

So here we have a standalone block. Usually, A block is a part of control flow statements such as if and for a loop. But it is valid Syntax to have a block of its own. Now when you execute this statement you get a few messages on the console.  so here you can say JavaScript first start to block then print the message inside the block and after that, it will print X value on the console.

when JavaScript exit from the scope and print block and just after that we wanted to access the X value which is specified in the block. So when you do that you will get an error message X is not undefined.

Here you can see we cannot access the X variable outside of the block. Right.

I hope you understand this article. We will see you in the next one.