JavaScript ES6 Block Binding :

shortly describe about es6 block binding

1. Var Declarations and Hoisting

Variable declarations using var are treated as if they are at the top of the function this is called hoisting. For a exapmle of what hoisting does, consider the following function :

function myFun(condition) {
    if (condition) {
        var value = 123;
        return value;
    } else {
        // statement
    }
        // value exists here with a value of undefined
}

2. Block-Level Declarations

Block-level declarations are those that declare variables that are inaccessible outside of a given block scope. Block scopes are created:

1. Inside of a function
2. Inside of a block (indicated by the { and } characters)

The introduction of block-level declarations in ECMAScript 6 is intended to bring that same flexibility (and uniformity) to JavaScript.

3. Let Declarations

ES2015 introduced important new JavaScript keywords: let. let is block level scope. var made conflict when huge line of code written so that avoid this conflict ES1015 introduced let. when we initialize any variable with let keyward we can not access outside of block

function getValue(condition) {
    if (condition) {
        let value = "blue";
        // other code
        return value;
    } else {
        // value doesn't exist here
        return null;
    }
    // value doesn't exist here
}

4. No Redeclaration

If an identifier has already been defined in a scope, then using the identifier in a Let declaration inside that scope causes an error to be thrown. For example:

var count = 30;
// Syntax error
let count = 40;

5. Constant Declarations

You can also define variables in ECMAScript 6 with the const declaration syntax. Variables declared using const are considered constants, meaning their values cannot be changed once set. For this reason, every const variable must be initialized on declaration, as shown in this example:

// Valid constant
const maxItems = 30;
// Syntax error: missing initialization
const name;

6. The Temporal Dead Zone

Unlike var syntax, let and const variables have no hoisting characteristics. A variable declared with either cannot be accessed until after the declaration.

if (condition) {
    console.log(typeof value);  // ReferenceError!
    let value = "blue";
}

Here, the variable value is defined and initialized using let, but that statement is never executed because the previous line throws an error. The issue is that value exists in what the JavaScript community has dubbed the temporal dead zone.

7. Block Binding in Loops

one area where developers most want block level scoping of variables is within for loops, where the variable is meant to be used only inside the loop. Ex:

for (var i=0; i < 10; i++) {
    process(items[i]);
}
// i is still accessible here
console.log(i);                     // 10

8. Functions in Loops

The characteristics of var have long made creating functions inside of loops problematic, because the loop variables are accessible from outside the scope of the loop. Consider the following code:

var funcs = [];
for (var i=0; i < 10; i++) {
    funcs.push(function() { console.log(i); });
}
funcs.forEach(function(func) {
    func();     // outputs the number "10" ten times
});

9. Global Block Bindings

Another way in which let and const are different from var is in their global scope behavior. When var is used in the global scope, it creates a new global variable, which is a property on the global object. That means you can accidentally overwrite an existing global using var , such as:

// in a browser
var RegExp = "Hello!";
console.log(window.RegExp);     // "Hello!"
var ncz = "Hi!";
console.log(window.ncz);        // "Hi!"

10. Emerging Best Practices for Block Bindings

While ECMAScript 6 was in development, there was widespread belief you should use let by default instead of var for variable declarations. For many JavaScript developers, let behaves exactly the way they thought var should have behaved, and so the direct replacement makes logical sense. In this case, you would use const for variables that needed modification protection.