Difference between var, let and const keywords in JavaScript

In JavaScript, users can declare a variable using three keywords that are var, let, and const. The behavior and the scope of a variable are also based on the keyword used to define it.

JavaScript var keyword

The var is the oldest keyword to declare a variable in JavaScript. It has the Global scoped or function scoped which means variables defined outside the function can be accessed globally, and variables defined inside a particular function can be accessed within the function. 

Example 1: The below code example explains the use of the var keyword to declare the variables in JavaScript.

Javascript

var a = 10
function f() {
    var b = 20
    console.log(a, b)
}
f();
console.log(a);

Output

10 20
10

Example 2: The below example explains the behaviour of var variables when declared inside a function and accessed outside of it.

Javascript

function f() {

    // It can be accessible any
    // where within this function
    var a = 10;
    console.log(a)
}
f();

// A cannot be accessible
// outside of function
console.log(a);

Output:

10
ReferenceError: a is not defined

Example 3: The below code re-declare a variable with same name in the same scope using the var keyword, which gives no error in the case of var keyword.

Javascript

var a = 10

// User can re-declare
// variable using var
var a = 8

// User can update var variable
a = 7
console.log(a);

Output

7

Example 4: The below code explains the hoisting concept with the var keyword variables.

Javascript

console.log(a);
var a = 10;

Output

undefined

JavaScript let keyword

The let keyword is an improved version of the var keyword. It is introduced in the ES6 or EcmaScript 2015. These variables has the block scope. It can’t be accessible outside the particular code block ({block}).

Example 1: The below code declares the variable using the let keyword.

Javascript

let a = 10;
function f() {
    let b = 9
    console.log(b);
    console.log(a);
}
f();

Output

9
10

Example 2: The below code explains the block scope of the variables declared using the let keyword.

Javascript

let a = 10;
function f() {
    if (true) {
        let b = 9

        // It prints 9
        console.log(b);
    }

    // It gives error as it
    // defined in if block
    console.log(b);
}
f()

// It prints 10
console.log(a)

Output:

9
ReferenceError: b is not defined

Example 3: The below code explains the behaviour of let variables when they are re-declared in the same scope.

Javascript

let a = 10

// It is not allowed
let a = 10

// It is allowed
a = 10

Output:

Uncaught SyntaxError: Identifier 'a' has already been declared

Example 4: The below code explains the behaviour of let variables when they are re-declared in the different scopes.

Javascript

let a = 10
if (true) {
    let a = 9
    console.log(a) // It prints 9
}
console.log(a) // It prints 10

Output

9
10

Example 5: This code explains the hoisting concept with the let variables.

Javascript

console.log(a);
let a = 10;

Output:

Uncaught ReferenceError: Cannot access 'a' before initialization

JavaScript const

The const keyword has all the properties that are the same as the let keyword, except the user cannot update it and have to assign it with a value at the time of declaration. These variables also have the block scope. It is mainly used to create constant variables whose values can not be changed once they are initialized with a value.

Example 1: This code tries to change the value of the const variable.

Javascript

const a = 10;
function f() {
    a = 9
    console.log(a)
}
f();

Output:

TypeError:Assignment to constant variable.

Example 2: This code explains the use of the const keyword to declare the JavaScript objects.

Javascript

const a = {
    prop1: 10,
    prop2: 9
}

// It is allowed
a.prop1 = 3

// It is not allowed
a = {
    b: 10,
    prop2: 9
}

Output:

Uncaught SyntaxError: Unexpected identifier

Differences between var, let, and const

var	let	const
The scope of a var variable is functional or global scope.	The scope of a let variable is block scope.	The scope of a const variable is block scope.
It can be updated and re-declared in the same scope.	It can be updated but cannot be re-declared in the same scope.	It can neither be updated or re-declared in any scope.
It can be declared without initialization.	It can be declared without initialization.	It cannot be declared without initialization.
It can be accessed without initialization as its default value is “undefined”.	It cannot be accessed without initialization otherwise it will give ‘referenceError’.	It cannot be accessed without initialization, as it cannot be declared without initialization.
These variables are hoisted.	These variables are hoisted but stay in the temporal dead zone untill the initialization.	These variables are hoisted but stays in the temporal dead zone until the initialization.

Note: Sometimes, users face problems while working with the var variable as they change its value of it in a particular block. So, users should use the let and const keywords to declare a variable in JavaScript.