Take a glance of ES6 Block Bindings

ES6 stands for ECMAScript 6.ES6 is a significant update to the JavaScript programming language.

Block Bindings

Variable declare is an important factor in javascript. ES6 provides a new way to declare variables, so that you can more easily control the scope of variables.

Var Declarations and Hoisting

Variables declaration will apposite if the variable is hoisted on the top of the function or it will be treated global scope if they are declared outside a function. Example-

function getColor(condition) {
if (condition) {
var value = "orange";
return value;
} else {
// value doesn’t exist here
return null;
}
// value doesn’t exist here
}

Block-Level Declarations

Block-level declarations means the declare variable are not accessible outside the block scope Block scopes are created:

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

Let Declarations

The let and var declaration syntax are same. You can use let instead of declaring var. And if you do this you have to remember that the scope of the variable will remain into the current block because var is hoisted on the top of the function but let is not hoisted. Example-

function getColor(condition) {
if (condition) {
let value = "red";
return value;
} else {
// value doesn’t exist here
return null;
}
// value doesn’t exist here
}

Const Declarations

If we declared a variable with const ,we can’t change this value that means this value is never been changed as it is constant value.

const name = “aourbo”;
maxItems = “tuni”; // throws error

Block Binding in Loops:

In JavaScript, most often case developers want block level scoping of variables is within for loops. For for this we have to use let not var, cause var is being hoisted. Follow the two examples below:

//First example-

for (var x = 0 ; x < 10 ; x++) {
process(items[x]);
}

// x is still accessible here
console.log(x); // 10

//Second example-

for (let i=0; i < 10; i++) {
process(items[i]);
}

// i is not accessible here - throws an error
console.log(i);

Global Block Bindings

We know, let and const are different from var. When var is used in the global scope, a new property is added to the global object (window in browsers). That means you can overwrite an existing global using var, such as:

// in a browser
var greeting = ‘Hello, viewer’;
console.log(window.greeting); // Hello, viewer

var person = ‘Hello there’;
console.log(window.person); // Hello there

If you use let or const in the global scope, a new binding is created in the global scope but no property is added to the global object. So, here also you can not overwrite a global variable using let or const. Example:

// in a browser
var greeting = ‘Hello, viewer’;
console.log(window.greeting === greeting); // false var person = ‘Hello there’;
console.log(window.person); // Hello there
console.log(person in window); // false

Default function parameters

In ES5 and earliar version, we have to set functions all parameter value formally. If we somehow forget to set any parameter value, the function immediately stopped and showing error. This problem solved in ES6 version. Here, we can set a default value in a parameter. In this case, if we not set on that parameter value, the function execute the default value as its parameter. Example-

function add(x, y = 6) {
//here, 0 is default parameter value
return x+ y;
}
console.log(add(10, 7)); // 17
console.log(add(20)); // 26

Working with Unnamed Parameters

Earlier version , there was no possibility to use unnamed parameter into the function, but ES6 introduces the rest parameter to make it easier to work with unnamed parameters.
The rest parameter allows any number of arguments as an array.

function add(…args) {
// args is the name for the array
return args.reduce((accumulator, current) => accumulator + current, 0);
}console.log(add(60)); // 60
console.log(add(30, 3)); // 33
console.log(add(6, 4, 10)); // 20

Block-Level Functions

ES6 allows block-level functions which are hoisted on top of the function or hoisted into the global scope.. For example:

if (true) {
console.log(typeof doWork); // “function”function doWork() {
// some code
}doWork();
}console.log(typeof doWork); // function

The Spread Operator

The spread operator allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.

Here are some of the code example:

//In function
function myFunction(x, y, z) { }
let args = [0, 1, 2];
myFunction(...args);//In array
let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];
// ["head", "shoulders", "knees", "and", "toes"]

Arrow Functions

In ES6 we can write funtion in sorter way that is named arrow function . It is also more easier to read and write rather than normal function calling. For example:

//have no parameter
const number= () => 7;//have single parameter
const doubleIt = num => num * 2;// have multiple parameter
const add = (x, y) => x + y;
console.log(add(40, 5)); // 45