Anshul Jain
DevNuisance

DevNuisance

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

Anshul Jain's photo
Anshul Jain
Β·Jun 6, 2021Β·

2 min read

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

Subscribe to my newsletter and never miss my upcoming articles

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

}
Β 
Share this

Impressum

Please do share your views and suggestions.

If you found my blog useful, Hit the πŸ™‚ button to show how much you liked it!

Also β˜• Buy me a coffee