Some Important Things for JavaScript Es6 Block Binding and Function Hacks

Block Binding in ES6

Generally, bindings occur whenever we declare or set a value in a variable. For example, we use var, let, and const to assign a variable.

Now I will explain how var and hoisting occur and how to use ES6 for block bindings using var, let, and const

Var Declarations and Hoisting

When variables declared with var they are hosted to the top of the function or global scope if declared outside a function. var declarations are treated as if they are hoisted to the top of the function as enclosing block or to the global scope if they are declared outside a function. Consider the following function:

Block-Level Declarations

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

  • Inside a function or function block
  • Inside a block (wrapped with curly { } braces)

Variable declarations using let or const are not hoisted to the top of the enclosing block which can limit the variable’s scope to only the current code block. But if you want the variables are available to the entire block then you can declare the variable using let or const first in the block. consider the same example but with let:

so if let and const are used in block scope then hoisting will not occur but if var is used then hoisting will occur or variable will be accessible outside the block scope.

Block Binding in Loops

In Javascript, Block-level is very useful when dealing with loops. It is best practice to use let instead of var because var is being hosted. Follow the two examples below:

Global Block Bindings

Generally, var is different than let and const fin Global scope Behavior. For example, when var is used in the global scope, a new global variable is created, which is a property on the global object, but if you use let or const in the global scope, a new binding is created in the global scope but no property added to the global object. That means for var you can accidentally overwrite an existing global, but if you use let or const you cannot overwrite. Here’s the example:

for var variable,

for let variable,

Functions in ES6

In Javascript, ES6 offers a number of incremental improvements on top of ES5 functions that make javascript less prone to error and more powerful.

Functions with Default Parameter Values

In normal Javascript and earlier requires lots of extra code to simulate default parameter value. but Modern Javascript ES6 make it easier to pass default parameter values when the parameter is not formally passed when calling the function. For example:

Function with Unnamed Parameters

In JavaScript function parameters that are passed without defining are inspect through argument object. Though inspecting arguments works fine in most cases, this object can be a little cumbersome to work with. 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.

The Spread Operator

Spread Operator takes in an iterable (array) and expands it to a list of arguments. The … spread operator is useful for many different tasks including the following:

Copying an existing array, Merge or combine arrays, Call function without apply, Use in Math Functions, Use in restructuring, Use an array as arguments, adding to state in React, Convert arguments or NodeList to Array

some of the code example:

Block-Level Functions

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

Arrow Functions

In Javascript, ES6 allows an alternative way to write shorter syntax named arrow function compared to traditional function expression. For example: