So, you want to learn the fundamental concepts about ES6, right? Have a safe journey throughout this read!

Block Binding:

Wait, what is binding in programming, anyway? Simply binding is Variable. While initializing a variable, you actually store or bind something (value) in a named variable, isn’t it? And of course by creating a scope of this stored data. You only can get the initialized data from the initialized variable.

In the era of the ‘var’ keyword, that means in the es5 version and before, it was hard to set a variable into a certain block. Wherever you declare a variable, you can get direct access to it. It creates vulnerability and error friendly circumstance in javascript.

To give it a better solution the idea of Block Binding came on the floor in the version of ES6 and further. Now you can create a scope or access and working area for your declared variable into a certain block of code.

Var Declarations and Hoisting:

So, what is the relation between the var declaration and hoisting? Hoisting is a concept of var declarations that occurs into a child block, but behind the scene, javascript takes the ‘var’ to the top or global scope instead of its own declared scope.

Get cleared by this Example:

function getName(condition) {
if (condition) {
var name = “Robert”;
// other code
return name;
} else {
// name exists here with a value of undefined
return null;
}
// name exists here with a value of undefined
}

Here we can see the variable ‘name’ initialized into the true conditional block. And we may think that it should be created while the condition is ‘true’, right? But behind the scene, Javascript play a different game, like-

function getName(condition) {
var name;
if (condition) {
name = "Robert";
// other code
return name;
} else {
return null;
}
}

While running the above code, javascript takes up to top the variable, that’s we call hoisting in Javascript.

It creates confusion and really a drawback to working with a large project in Javascript. To solve this confusion, ES6 come up with two keywords to handle Block binding easily.

Block-Level Declarations:

To make a variable inaccessible outside of the given block scope, Block-Level Declarations is the solution. You can create a block within:-

• a function

• a block (indicated by the { and } characters)

Let Declarations:

‘let’ syntax or keyword is a substitute for ‘var’. But the major difference is ‘let’ variable’s scope to only the current code block. Example:

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

No Redeclaration:

You can’t re-declare a variable with ‘let’ after initializing it once with ‘var’ if both declarations occur in the same scope. Example:

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

And into other scopes:

var count = 30;
// Does not throw an error
if (condition) {
let count = 40;
// more code
}

Constant Declarations:

Like with ‘let’, you can declare a variable with ‘const’ as well. Both are working as the same but ‘const’ are considered constants, meaning their values cannot be changed once set. And that’s why you have to initialize it with a minimum value while declaring it. Example:

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

That’s all for the Block binding fundamental concepts. In the following read, we will go deep dive into ES6. Take care!