What is variable scope and closure in JavaScript? Example Tutorial

Hello guys, if you want to learn about variable scope in JavaScript then you have come to the right place. Earlier, I have shared the best online courses and books to learn JavaScript and in this article, I will explain to you how to declare variables in Javascript and different variable scopes. In JavaScript, variables can be declared using the var, let, or const keywords. It is also possible to declare variables without using any of these keywords. The major difference with different keywords is in the scope of the variables.  Every variable declared in JavaScript has a scope. Understanding variable scope in JavaScript is very important. In this article, we will discuss what is the variable scope and other terms related to it such as closures.

1. What is variable scope?

In simple terms, the variable scope is the availability of the variable in a code. Along with variables, functions also have scope in JavaScript. 

1.1 Types of scope

There are two types of scope in JavaScript - Global and Local (function).

As the name suggests, a variable with global scope will be accessible anywhere in the code while a variable with local scope will only be accessible in a certain space. 

Let’s understand with the help of an example. 

var a = "Outside function";

 

function demoFun() {

  var b = "Inside function";

  console.log(a);

  console.log(b);

}

 

console.log(a);

demoFun();

In the above code, variable “a” has a global scope while variable “b” has a local scope which is limited only to the “demoFun”. When the code is executed, it will work fine because “a” is accessible in the “demoFun” because it has a global scope.

But what if we try to access “b” outside “demoFun”? It will throw an error because “b” has a local scope and it cannot be accessed outside its scope. 

2. Scope of var, let, and const

As mentioned earlier, the major difference between these three keywords is the scope. The variables declared with var have function scope while the variables declared with let or const have block scope. 

The function scope is nothing but local scope. If a variable with var is declared inside a function, it is available throughout the function. This is similar to the variables declared with let and const. But there is a small but major difference. Observe the following code. 

function demoFun() {

  if (true) {

    var a = "Variable with var";

  }

  console.log(a);

}

 

demoFun();

The variable “a” is declared inside an if statement, meaning, it is declared inside a block. Because it is declared with var, “a” is accessible outside the block as well. This happens because of the function scope. But it is different with let. 

function demoFun() {

  if (true) {

    let a = "Variable with let";

  }

  console.log(a);

}

demoFun();

The code is the same but “a” is declared using let. Now, it will throw an error because “a” is accessed outside the block. This happens because the variables declared with the let keyword are only accessible in the block of their declaration. Similar is the case with the variables declared with const. 

3. Closure

A closure is a function that has access to the variables of its outer function even after the execution of the outer function is complete.

Observe the following code. 

function outerFun() {

  let a = 10;

  let b = 20;

  function innerFun() {

    return a + b;

  }

 

  return innerFun;

}

 

let result = outerFun();

 

console.log(result());

“outerFun” has two variables declared inside it - “a” and “b”. Moreover, it has a nested function - “innerFun” which is using “a” and “b”. In the end, “outerFun” is returning the “innerFun”.

Now, when the “outerFun” is called, it returns the “innerFun”. At this moment, the execution of “outerFun” is over and the “innerFun” is stored inside “result”. What happens when “innerFun” stored inside “result” is executed? It will return the sum of “a” and “b” as expected. 

This happens because “innerFun” is a closure and even after the execution of “outerFun” is complete, it has access to its variables. This is the concept of closure in JavaScript.

4. Wrapping it up

For a JavaScript developer, it is very important to understand the variable scope. If not learned properly, this can cause a lot of trouble while working on a real-time project. As discussed in this project, there are two types of scope in JavaScript.

Another important thing to understand is the difference between the scope of variables declared using var, let, and const. The closure is another important concept, especially, when it comes to JavaScript interviews. In this article, we discussed closures along with variable scope in JavaScript.