var vs let vs const in ES6

August 03, 2019

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 constvariable outside that block.
const value = 5;
{
    const value = 10;
    console.log(value);
}
console.log(value);
Output:
10
5



You Might Also Like

0 comments

Follow by Email