Select Page
JavaScript ES6+ : var, let and const in short
Jayman Pandya
Feb 3, 2018

var are function scoped and can be re-declared without triggering exceptions or warnings. let & const are block scoped and cannot be re-declared in the same scope.

    var name = "jayman";

    function  userdetails() {

        let fullname = "jayman pandya";
        let location = "mumbai";

        console.log(name); //Will print "jayman" in console
        console.log(fullname); //Will print "jayman pandya" in console
        console.log(location); //Will print "mumbai" in console

        let fullname = "john doe"; //Will not run the script at all and throw a Syntax Error
    
    }

    userdetails();

    console.log(name); //Will print "jayman" in console

    var name = "john doe";

    console.log(name); //Will print "john doe" in console
    console.log(fullname); //Will throw a Reference Error
    console.log(location); //Won't come to this due to previous Reference Error

var and let can be re-assigned values. Properties of const object can be re-assigned values.

    var name = "jayman";
    console.log(name); //Will print "jayman" in console
    name = "John Doe";
    console.log(name); //Will print "John Doe" in console

    let fullname = "jayman pandya";
    console.log(fullname); //Will print "jayman pandya" in console
    fullname = "john doe"; //Will print "john doe" in console
    console.log(fullname);

   const person = {
       firstname : "jayman",
       lastname : "pandya",
        age : 32,
        location : "mumbai"
    } // Declaring a const object

    console.log(person) //Will print person object in console

    person.age = 33; // Properties of Const object can be re-assigned a new value.
    console.log(person) //Will print person object with updated "age" in console

    person = "john doe"; // Const object cannot be re-assigned to a new value

Variables declared by var bleed out of conditionals and loops. This is not the case with variables declared by let & const.

     var cost_of_items = 800;
     if (cost_of_items < 1000) {
         var discount = 10;
             // Will be executed
             console.log(`You are eligible for ${discount}% discount.`); 
         } else {
             // Will not be executed
             console.log("You have more than 20% discount."); 
         }
             console.log(discount); // Will bleed and print "10" in console

    var cost_of_items = 800;
    if (cost_of_items < 1000) {
        let discount = 10;
        // Will be executed
        console.log(`You are eligible for ${discount}% discount.`); 
    } else {
        // Will not be executed
        console.log("You have more than 20% discount."); 
    }
    console.log(discount); // Will not bleed and will throw a Reference error

In the world of JavaScript it is advised to use IIFE (Immediately Invoked Function Expresssion) to obfuscate the values of variables outside the scope. There is a slight difference in writing the IIFE when using var, let & const.

    function() {
         var name = "jayman";
     } //IIFE ends

    {
         let name = "jayman"

        const person = {
             name: "jayman",
             age: 32,
             location: "mumbai"
         } //Const person ends

    } //IIFE ends

When I first understood this about JavaScript variables, I was confused what should be used and what shoudn’t. then I stumbled upon this article by Mathias and strongly agree to what he says at the end of it.

use const by default
only use let if rebinding is needed
(var shouldn’t be used in ES6)

Peace ✌️

Let's Talk

If you liked what you have seen, then let’s connect and make something amazing together.

Email me at converse@jaymanpandya.com or send a DM on my twitter @jaymanpandya