JavaScript - The 'let' keyword behaviour

Declaring variable in modern JavaScript

Introduction

Namaste, In this post I will discuss the below topics

  1. What is the 'let' keyword?

  2. Using the 'let' keyword in the global scope

  3. Using the 'let' keyword in the function scope

  4. Cannot re-declare a variable

  5. Using the 'let' keyword in the block scope

  6. Benefits of 'let' keyword

  7. Complete source code

Video Tutorial

What is the 'let' keyword?

The 'let' keyword is used for declaring variables or objects in Modern Javascript. It was added to Javascript because of various limitations of the 'var' keyword. It is recommended to always use the 'let' keyword over the 'var' keyword. The variables or objects declared using the 'let' keyword are not hoisted.

Using the 'let' keyword in the global scope

Since variables or objects declared using the 'let' keyword are not hoisted they are available only after initialization. Accessing before the initialization yields an error.

// 'let' keyword in global scope
let myval=100;
console.log ("myval", myval); // 100
console.log ("myval2", myval2); // error
let myval2=101;

Using the 'let' keyword in the function scope

// 'let' keyword in function scope
function fx() {
    let myval3=200;
    console.log ("myval3", myval3); // 200
    console.log ("myval4", myval4); // error
    let myval4=201;
}
fx();

Cannot re-declare a variable

Once declared using the 'let' keyword the variable cannot be re-declared.

// cannot re-declare
let myval5=30;
let myval5=40; // error

Block Scope and 'let' keyword

The variables declared using the 'let' keyword have a block scope hence the variable would only be available in the given block after initialization.

// 'let' keyword and block scope
for (let a=10;a<11;a++) {
    let b=12;
}
console.log("a,b:",a,b); // error for both - a or b 

let i=13;
if ( i > 9){
    let c = 13;
}
console.log("c:", c); // error 

// Block scope inside function
function fx2() {
    try {
        let d=20;
    }catch(e) {
        console.log(e,d); // if executed - error here as well
    }
    console.log("d",d); // error
}

fx2();

Benefits of 'let' keyword

In modern Javascript 'let' keyword should always be used over the 'var' keyword.

The benefits are 'let' keyword are as follows

  1. Variables are not re-declared

  2. Variables are not hoisted

  3. Variables have block scope

Complete Source Code

//Objective : Understanding the 'let' keyword behavior
//Author: Mahavir DS Rathore

// 'let' keyword in global scope
let myval=100;
console.log ("myval", myval); // 100
//console.log ("myval2", myval2); // error
let myval2=101;


// 'let' keyword in function scope
function fx() {
    let myval3=200;
    console.log ("myval3", myval3); // 200
    //console.log ("myval4", myval4); // error
    let myval4=201;
}
fx();

// cannot re-declare
let myval5=30;
//let myval5=40; // error 


// 'let' keyword and block scope
for (let a=10;a<11;a++) {
    let b=12;
}
//console.log("a,b:",a,b); // error for both - a or b 
let i=13;
if ( i > 9){
    let c = 13;
}
//console.log("c:", c); // error 

// function scope -- no block scope inside function
function fx2() {
    try {
        let d=20;
    }catch(e) {
        console.log(e,d);
    }
    console.log("d",d); // error
}

fx2();

Video Tutorial

Did you find this article valuable?

Support Programming with Mahavir by becoming a sponsor. Any amount is appreciated!