JavaScript

Difference Between var and let in JavaScript

The var and let are keywords used to define or initialize a variable in JavaScript. However, they both have different scopes. In JavaScript, two different variables scoping are available, which are the global scope and the local \ block scope. This article will differentiate the let and var keywords with the help of scopes.

var and Global Scope

Whenever we create a new variable with the help of the var keyword, it defines two properties for the variable. The first one is that the value of this variable can be changed at any time, and the second is that this variable can be accessed from any part of the program, thus making it a globally available variable within that JavaScript file. To demonstrate this, we are going to take the following example:

Example of var Keyword
Simply create a variable with the help of the var keyword with the following line:

var string = "Google";

After that, simply try accessing this variable from within an if the state, a for loop, and from within a function as well with the help of the following lines:

var string = "Google";
console.log(string + " from the JavaScript file");

if (true) {
  console.log(string + " from the if Statement");
}

for (i = 0; i < 1; i++) {
  console.log(string + " from the for Loop");
}

function printString() {
  console.log(string + " from the function");
}

printString();

Upon the execution of the code mentioned above snippet, the following result is displayed onto the terminal:

It is clear from the output that the compiler was able to access the variable string from the JavaScript file outside of any enclosements, from within the if statement, from within the for loop, and last from within a function. This makes this variable a globally available variable throughout this JavaScript file.

let and Block Scope

Whenever a variable is initialized with the let keyword, the scope of that variable is set to block scope. A block scope restricts the accessing or the referencing of the variable from outside the curly bracket {} in which it was initialized. Therefore, we can say that a block scope exists between each pair of curly brackets.

Example of let Keyword
First, create a variable in the JavaScript with the help of the let keyword inside an if statement:

if (true) {
  let x = "Hello";
}

And then, try calling this x variable outside of this if statement with the help of the following lines:

console.log(x);

Executing the program will give the following output onto the terminal:

The output shows a reference error that x is not defined meaning that the scope of the variable x was enclosed inside the if Statement.

But to demonstrate that the block scope exists between a pair of curly brackets regardless of the statement used with it. Simply create the variable x inside curly brackets like:

{
  let x = "Hello";
}

And try accessing the variable x outside of these curly brackets using the console log function:

console.log(x);

The whole code snippet will look like this:

{
  let x = "Hello";
}

console.log(x);

Executing this populates the terminal with the following result:

From the output and the error in the output, it is easily conclusive that the let keyword bounds the scope of the variable at hand within the curly bracket {} in which it is initialized.

Conclusion

The significant difference between the var keyword and the let keyword is that the var keyword binds the variable scope to global while the let keyword bounds the variable scope to block. The global scope needs no explanation. The variable is accessible from any part of that JavaScript file. In contrast, block scope means that the variable is only accessible within the block of code enclosed with curly brackets in which it was created.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.