Modern Javascript - Var, Let & Const - Are all same? Part 1

Modern Javascript - Var, Let & Const - Are all same? Part 1

Most of the Javascript developers are already familiar with var, let, and const keywords. Still, If it is a mystery for you, this article is for you. In this article, We will discuss the usage of these keywords, scope, hoisting, and their differences.

Before discussing these keywords, let us discuss the Scope and Hoisting first in Javascript.

Scope

In Javascript, Scope determines the accessibility/visibility of a variable, there are two kinds of scope

  • Function scope

  • Block scope

Function Scope is the scope where a variable is accessible only within a function.

function fn(){
var a: string = "test";
console.log(a);     // test
}

console.log(a);     // Error: a is not defined

Block Scope is the scope where a variable is accessible within a block of code.

A Block of code is the code between the curly braces.

{
    var a: string = "test a";
    let b: string = "test b";
    const c: string = "test c";
    console.log(a);     // test a
    console.log(b);     // test b
    console.log(c);     // test c
}
    console.log(a);     // test a
    console.log(b);     // Error: b is not defined
    console.log(c);     // Error: c is not defined

Have you noticed something? b and c are accessible only within the block of code but a is accessible outside the block as well. We will discuss this in detail further.

Hoisting

Hoisting is a Javascript mechanism where variables declarations are moved to the top before execution. For Example:

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

Before execution

var a; //declares variable with undefined value
console.log(a); //undefined
a=10;

var


The scope of the variable defined with the var keyword is limited to the 'function' within which it is defined.

function(){
   var a= 10;
   console.log(a);     // 10
}
console.log(a);     // Error: a is not defined

Here a is not defined because it was initialized inside the function, it can only be accessible within that function. If it is defined outside of the function then the scope will be global.

var a= 10;
function(){
   console.log(a); //10
    a=20;
}
console.log(a);     // 20

They can also be redeclared and reassigned, for example:

var a: number = 10;
a=20; //Reassigned
var a: number = 30; //Redeclared
console.log(a);     // 30

var benefits

  1. Function/Global scope variable
  2. Can be Redeclared
  3. Can be Reassigned

var keyword seems perfect, but then why would you choose let and const keywords? We will discuss this in our next blog, meanwhile, can you think what is wrong with the below code block

{

function anyFn(){
  var message = 20;
}

var message = "hello";
anyFn();
console.log(message);  //20

}