JavaScript let vs var: Complete Guide

by

The let and var, both keywords are used to declare a variable in JavaScript. So now the question arrives what the difference between them is. So before the ES6 release, JavaScript only had the “var” keyword to declare variables. 

JavaScript let vs var

The main difference between let vs var in JavaScript is that the let is block-scoped and var is function-scoped. The let does not allow to redeclare variables whereas var allows redeclaring variables.

ES6 introduced a new type of variable declaration with the keyword “let”. Now let us see if we had var to declare variables; what is the need to introduce the “let” variable declaration keyword.

Variable Scope

If we declare a variable outside a function using the var keyword, then it belongs to the global scope means that any function can access the variable. For example:

var count;

Function func1(){

  // Some code

}

Function func2(){

  // Some code

}

In the code above, we declared a variable globally using the var keyword so that any function can access it as its scope is global. Now, if we declare a variable inside a function using the var keyword, its scope is local, meaning that the function can only access it. So variables created using the var keyword are function scoped variables.

function inc_count(){
  // Increasing the value of counter
  var count=0;
  count++
}

console.log(count); //error: count is not defined

In the example code above, the count variable is local to function inc_count. And hence cannot be accessed by outside functions. Let us understand more by the following example:

Example Code

for (var i = 0; i < 4; i++) {
   console.log("Inside loop:", i);
}

console.log("Outside loop:", i);

Output

Inside loop: 0

Inside loop: 1

Inside loop: 2

Inside loop: 3

Outside loop: 4

Explanation

Since var is globally scoped, it can be accessed outside the loop or function. While in the case of let, it is a blocked scope and will generate an error. See the example below:

Example Code

for (let  i = 0; i < 4; i++) {
   console.log("Inside loop:", i);
}
console.log("Outside loop:", i);

Output

Inside loop: 0

Inside loop: 1

Inside loop: 2

Inside loop: 3

ReferenceError: i is not defined

Explanation

Since we are using let instead of var and let is blocked scope, it will not be accessed by the outside loop block and will generate an error.

Redeclaration

We can redeclare the variable using the Var keyword without any error. See the example below:

var count=13;

var count;

console.log(count); //Print 13

But in the case of defining variables using the let keyword. Redeclaration is not allowed. See the below example:

let count=13;

let count; // Error

console.log(count);

Global Properties Creation

The variable created using the keyword var is added to the global object as properties. On a web browser, the global object is window and global in node.js.

var count = 0;

console.log(window.count); //  Print 0

But, In the case of variables declared by using the let keyword, those are not added to the global object. See the code below:

let count = 0;

console.log(window.count); // undefined

Hoisting of var:

The Hoisting is a mechanism in JavaScript in which functions and variable declaration are transferred to the top of their scope before executing the code. For example, see the code below if we do this in JavaScript:

console.log(count);

var count=10;  //count is undefined

It will be interpreted as:

var count;

console.log(count);

count=10;

Hence var variables are hosted top of their scope with an undefined default value.

Conclusion

So in this article, we understood the ways of let and var variable declaration. The let and var both are used to declare a variable in JavaScript. However, variables declared using the var keyword have to function scope, while variables declared using the let keyword are block scope.

Related posts

JavaScript vs TypeScript

JavaScript import vs require

Leave a Comment