Block binding: Actually variable means bindings. When we declare a variable, we bind a value to a name inside a scope. There is confusion in binding before ES6. Because block binding was not introduced then. We know that Javascript hoisted everything to the top rather we declare a variable within a block, we can access this from any other block. To remove this confusion/problem, Javascript introduces Block binding in ES6.
Var declaration and hoisting: If we declare any variable with var keyword, it is treated that variable is declared at the top. No matter where the declaration occurs. This is called hoisting. This will be more clear after example:
function getValue (condition) {
if (condition) {
var name = “Jonathan”;
return name;
} else {
return null;
}
}Description: Our expectation from the above code that if the condition is true then a name variable will be created otherwise not. And name variable will not be accessible from anywhere. But the above code will not return our expected result. The will working like the code below:
function getValue (condition) {
var name; // the value of name is undefined here
if (condition) {
name = ”Jonathan”;
return name;
} else {
// as “name” is declared in the top of the function, name is accessible here.
return null;
}
// name is also accessible here.
}If condition is false in if statement. Name variable will return ‘undefined’ value. Because before if-else block name is already declared. This happened for hoisting. Every is hoisted in the top within the block. This behaviour can be causing the bug.
Block-Level Declarations: If we declare anything in block level, this will be inaccessible from the outside the given block. Block scope created in the following places:
- Inside of a function
- Inside of a block ( indicated by {} curly braces )
Let Declarations: Let declaration syntax same as var declaration. Just let will be replaced in place of var. There has a difference between let and var keyword. Let is not hoisted like var. As a result, this is inaccessible from the outside the block. But we want to access the variable from any block, we can declare this from the top level of the block: Ex:
function getValue(condition) {
if (condition) {
// we can declare name here if we want to can access this anywhere within the block.
let name = “Jonathan”;
// other code
return name;
} else {
// name doesn’t exist here
return null;
}
// value doesn’t exist here
}Constant Declarations: We also can declare a variable with const keyword like let, var. Const syntax stands for constant. The feature of this declaration, if we declare once with the const keyword, this is not possible to reassign its value. It prevents modification of the binding. So, it needs value during its declaration. Ex:
const name; // syntax error
const name = “Jonathan”; //valid declaration
name = “Jewel”; // This will throw an error.Block Binding in Loops: var variable is also problematic when it is declared in loops. Because outside the loop block, they are accessible. Because the var declaration gets hoisted. Ex:
for (var i = 0; i < 10; i++) {
process(items[i]);
}
// i is still accessible here
console.log(i); // 10To avoid this problem we can use let in loops while declaring counter. Which is not accessible outside the block.
Global Block Bindings: Let and const keyword is safer instead of var when we declare any variable globally. Because var key overwrites our window variable that is already declared in our global object. But let and const keyword doesn’t overwrite the existing global variable, make a shadow variable of its. So this is best practice to use let or const keyword when we declaring anything globally.
Emerging Best practices for Block Bindings: The use of const is safe when we declaring any variable globally if our variable don’t need any modification in future. Because unexpected value changes are a source of bugs. If we need modification in the declaration, we can use let which is safer than var. Because var has scoping misuse.
Summary: To sum up, let and const block bindings are useful. These declarations are not hoisted and exist there only they are declared. These safe us from many unexpected errors. They also have some side effect that this is not possible to access them before their declaration. But current best practice is that for block bindings is to use const and let if their value need to changes.
Function With Default Parameter value: ECMAScript 6 allows to pass default parameter by providing initializations. If any parameter not passed formally, the default will work automatically. This feature make function more cleaner, because we don’t need to check whether parameter passed or not.
function makeRequest(url, timeout = 2000, callback) {
// the rest of the function
}In the above function if we don’t pass any value for second parameter this won’t generate any error, because it will take its value by default which we passed by default.
Object Destructuring: Destructuring simply implies breaking down a complex structure into simpler parts. Object Destructuring helps us to access values from object easily. It uses object literal. You use an object literal on the left-hand-side of an assignment expression for object destructuring. Ex:
const information = {
firstName: ‘Jonathan’,
lastName: ‘Watson’,
country: ‘France’,
}
const { firstName, lastName, country } = information;
console.log(firstName);Array Destructuring: Array Destructuring almost similar to Object Destructuring. It uses array literal. Example:
const hero = [‘Superman’, ‘Spiderman’, ‘Venom’];
const [hero1, hero2, hero3] = hero;
console.log(hero1);Class Like Structures in ES5: There has no class keyword in ES5 to define a class. This feature is introduced in ES6. But this was not impossible to define a class in ES5. This will be clear after example:
function PersonType(name) {
this.name = name;
}
PersonType.prototype.sayName = function() {
console.log(this.name);
};
let person = new PersonType(“Nicholas”);
person.sayName(); // outputs “Nicholas”
console.log(person instanceof PersonType); // true
console.log(person instanceof Object); // trueClass Declaration: This is very much simple to create a class and make its object in ES6. We can define a class just before using class keyword before the class name. Ex:
class PersonClass {
// equivalent of the PersonType constructor
constructor(name) {
this.name = name;
}
// equivalent of PersonType.prototype.sayName
sayName() {
console.log(this.name);
}
}
let person = new PersonClass(“Nicholas”);
person.sayName(); // outputs “Nicholas”
console.log(person instanceof PersonClass); // true
console.log(person instanceof Object); // trueNB: We have to must be use constructor to make properties.
The Ternary Operator