BlogsDope image BlogsDope

Difference between var and let in JavaScript

June 15, 2020 JAVASCRIPT 240

One of the confusing topics in JavaScript is the way variables are declared. Before ES6 (ECMAScript 6), var was used only. Now, the variables can also be declared using let. Let’s see the differences between them so you can know when to use them.

Let us go through the difference one by one with examples.

Scope


Var uses function scope i.e. its scope is limited to the function in which it is defined. However, let uses block scope i.e. its scope is only limited to the block in which it is defined. Outside that block, it is inaccessible. Let’s understand this through an example.

function test() {
  var score = 100;

  for (let i = 0; i < 2; i++) {
    console.log("i: " + i);

    console.log("score: " + score);
  }

  console.log("score: " + score);

  console.log("i: " + i);

  console.log("score: " + score);
}

test();

Output

i: 0
score: 100
i: 1
score: 100
score: 100
Uncaught ReferenceError: i is not defined

Here, the variable “score” has function scope (it is accessible anywhere in the function in which it is defined) and the variable “i” has block scope (accessible only in the for loop). That’s why, when you try to access “i” outside its block, it gives a reference error. If we change the keyword of “i” from let to var, then we will be able to use it. Let’s see.

function test() {
  var score = 100;

  for (var i = 0; i < 2; i++) {
    console.log("i: " + i);

    console.log("score: " + score);
  }

  console.log("score: " + score);

  console.log("i: " + i);

  console.log("score: " + score);
}

Output

i: 0
score: 100
i: 1
score: 100
score: 100
i: 2
score: 100

 

Global variable


The other difference is concerned with the global variable. When the variables are declared outside the function, the var keyword creates a global variable and it attaches that variable to the window object in the browser. However, the global variable created by the let variable is not attached to the window object. Let’s see an example.

var score1 = 45;

let score2 = 56;

console.log(window.score1);

console.log(window.score2);

Output

45
undefined

“score1” is created by the var variable and therefore window.score1 is equal to 45. However, window.score2 is equal to undefined.

Temporal dead zone


When we declare variables using the var keyword, they are hoisted and assigned an undefined value. Let’s see an example to understand this.

console.log(score);

var score = 100;

console.log(score);

Output

undefined
100

We are trying to access a variable before it is declared, and therefore, we would expect that it would throw an error. However, we see an undefined value. This is because it has been assigned an undefined value. You can assume that variables are declared at the top of their scope for understanding, however, this is not the actual case. i.e.

var score

console.log(score)

score = 100

console.log(score)

If we try to access a variable before it is declared with let, it throws a reference error because the variable is not initialized with any value unlike the variable declared with var. It is said to be in a Temporal Dead Zone (A period between the creation of variable and its initialization). Let’s see.

console.log(score)

let score = 100

console.log(score)

Output

Uncaught ReferenceError: score is not defined

The variables declared using let are cannot be accessed until they are initialized.

Redeclaration


Variables created using var can be redeclared. However, the variables created using let cannot be redeclared. Consider the following example.

var score1 = 56

var score1 = 39 // allowed

let score2 = 56

let score2 = 89 // gives an error

Uncaught SyntaxError: Identifier 'score2' has already been declared


Liked the post?
A computer science student having interest in web development. Well versed in Object Oriented Concepts, and its implementation in various projects. Strong grasp of various data structures and algorithms. Excellent problem solving skills.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).