ES6 let keyword

JavaScript ES6: the let keyword. let enables a new form of scoping. var is scoped to the nearest function block and let is scoped to the nearest enclosing block (both are global if outside any block), which can be smaller than a function block. Also, variables declared with let are not visible before they are declared in their enclosing block unlike var type in which case the variables get hoisted at the top of the function. For hoisting refer previous blogs if required. In its most basic form, let is a sibling to var. But declarations made with let are scoped to the blocks in which they occur, rather than being “hoisted” to the enclosing function’s scope as vars do

The let statement declares a block scope local variable, optionally initializing it to a value.

let allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

Scoping rules

Variables declared by let have as their scope the block in which they are defined, as well as in any contained sub-blocks . In this way, let works very much like var. The main difference is that the scope of a var variable is the entire enclosing function:

function oldES5varTest() {
    var x = 100;
    if (true) {
        var x = 200;  // same variable!
        console.log(x);  // 200
    }
    console.log(x);  // 200
}

function newES6letTest() {
    let x = 100;
    if (true) {
        let x = 200;  // different variable
        console.log(x);  // 200
    }
    console.log(x);  // 100
}

 

It makes inner function code much cleaner

var list = document.getElementById("list");

for (let i = 1; i <= 5; i++) {
    let item = document.createElement("li");
    item.appendChild(document.createTextNode("Item " + i));

    item.onclick = function (ev) {
        console.log("Item " + i + " is clicked.");
    };
    list.appendChild(item);
}

The example above works as intended because the five instances of the (anonymous) inner function refer to five different instances of the variable i. Note that it does not work as intended if you replace let with var, since all of the inner functions would then return the same final value of i: 6. Also, we can keep the scope around the loop cleaner by moving the code that creates the new elements into the scope of each loop.

At the top level of programs and functions, let, unlike var, does not create a property on the global object. For example:

var x = 'globalX';
let y = 'globalY';
console.log(this.x); // "globalX"
console.log(this.y); // undefined

 

Block scoping simply says, I want to be able to treat a { .. } block as a scope, without having to make a new function to encapsulate that scope.Other languages (e.g., Java, C++) have true block scoping, where you can declare a variable to belong to a specific block instead of to the surrounding scope/function.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s