# Difference between var and let in JavaScript

June 15, 2020 789

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.

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