var vs let vs const in ES6 cover image

var vs let vs const in ES6

With the release of ES6, there comes the keywords let and const for declaring a variable. Prior to ES6, we had var to declare variables in JavaScript.

The var keyword

We can declare the variable with the var keyword with the syntax:

var value = 10;

Properties of declaring a variable with var keyword:
1. The variable declared with var keyword is declared as a global variable. The variable can be accessed from outside the block in which the variable is declared.

{
    var value = 10;
    console.log("Inside Block: " + value);
}
console.log("Outside Block: " + value);

JSFiddle here
Output:

Inside Block: 10
Outside Block: 10

2. The variable declared with var gets hoisted.

value = 10;
console.log(value);

var value;

Output:

10

3. Declaring a var inside a block affects the global variable with the same name.

var value = 5;
{
    var value = 10;
    console.log(value);
}
console.log(value);

Output:

10
10

The let keyword

The let keyword was introduced in ES6 and sooner it became a widely used concept in JavaScript. We declare a variable with the let keyword using the following syntax:

let value = 10;

Properties of declaring a variable with let:

1. The variable declared with let keyword is a local variable. The variable is not accessible from outside the block in which it is declared.

{
    let value = 10;
    console.log("Inside Block: " + value);
}
console.log("Outside Block: " + value);

JSFiddle here

Output:

10
Uncaught ReferenceError: value is not defined

2. The variable declared with let does not get hoisted. It will give an undefined value for using a variable before actually declaring it.

value = 10;
console.log(value);

let value;

Output:

Uncaught ReferenceError: value is not defined

3. The variable declared with let inside a block does not modify the variable with the same name outside the block.

let value = 5;
{
    let value = 10;
    console.log(value);
}
console.log(value);

Output:

10
5

The const keyword

With the let keyword, there comes const in ES6. As the name suggests, const allows you to create constants. A const must be initialized at the time of declaration and once declared, it cannot be modified.

We can initialize a const keyword using the following syntax:

const value = 10;

Properties of a constant variable:

1. A const variable is a local variable. Creating a const variable inside a block limits it’s access within the block. It cannot be accessed outside the block.

{
    const value = 10;
    console.log("Inside Block: " + value);
}
console.log("Outside Block: " + value);

JSFiddle here

Output:

Inside Block: 10
Uncaught ReferenceError: value is not defined

2. A constant variable cannot be hoisted as it needs to be initialized with┬áit’s declaration.

3. Declaring a const variable inside a block does not affect the const variable outside that block.

const value = 5;
{
    const value = 10;
    console.log(value);
}
console.log(value);

Output:

10
5

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.