ES6 short overview: Block Bindings and Functions

All the things are changeable for many causes. The causes are may be difficult to use the earlier version, errors occur easily, and many more. Today we are going to discuss the ES6 latest features. Let’s get started.

Block Binding

In my point of view, block binding means defining the scope for something. Sometimes it helps to work error-free in the JavaScript programming language.

1. Var declarations and hoisting

If we declare var variables in a function then var variables go to the top of that function means everywhere we can access those var variables.

function abc ( parameters ) {
if (condition) {
var name = “somebody”;
} else {
//you can access name from here as undefine
}
//you can access name from here as undefine
}

actually, it looks like

function abc (parameters) {
var name;
if (condition) {
name = “somebody”;
} else {
//you can access name from here as undefine
}
//you can access name from here as undefine
}

This type of behavior is called hoisting. To control the scope of a variable ES6 brings let and const.

2. Block-Level Declarations

ES6 let and const are used to remove this difficulty by declaring variables in block level.

function abc (parameters) {
if (condition) {
let name = “somebody”;
} else {
//you can’t access name from here
}
//you can’t access name from here as
}

3. Block Binding in loops

It is very important to keep unbiased loop variables otherwise loop can’t iterate accurately.

for (var i=1; i<10; i++) {
if(i%2){
console.log(i);
}
// i is still accessible here
}

by using the let variable it can be removed.

for (let i=1 ; i<10 ; i++){
if(i%2){
console.log(i);
}
// i is not accessible here
}

ES6 Features

1. Functions with default parameter

Sometimes we declare function with a specific number of parameters but at the time of calling that function, we sometimes don’t pass that number of parameters.

function abc (x , y, z ) {
console.log(z) // undefined
}
const a = abc(1,2);

to remove this difficulty, we can declare parameters with default values.

function abc (x , y, z=3 ) {
console.log(z); // works fine, output 3
}
const a = abc(1,2);

2. Spread operator

The spread operator spreads the things of the object and array.

syntax: …variable

const arr = [1,2,3,4,5];
const arr2= [4,7,9,1];
console.log(…arr, …arr2); // ouput: 1 2 3 4 5 4 7 9 1
const obj = { name :“rohim”, age: 19};
const obj2 = {height: 5.5, weight: 50};
console.log({…obj,…obj2});// output: {name: “rohim”, age: 19, height: 5.5, weight : 50}

3. try-catch

You can see that our programs may fall in error while we run them which causes a crash of the application. To protect from unwanted crashes, we can simply use try-catch that also shows error messages.

syntax: try{

}catch(error){

}

try{
const a=3;
const b=5;
console.log(a+b, c); // c is not declared that causes error
}catch(error){
console.log(error); //ReferenceError: c is not defined
}

4. Arrow function

The Arrow function is like a normal function with a different declaration.

syntax: const x = (p1, p2, p3,…,pn) => { //function body}

p=parameter and returned value is stored in x;

const x= () =>{
 console.log(“arrow function with empty parameter”);}
const y = (name) =>{ 
console.log(“arrow function with single parameter”, name);}
const z= (name1, name2) =>{
 console.log(“arrow function with multiple parameters”, name1, name2);}

5. Block-Level function

The function which is not accessible outside the block or scope is called the block-level function.

{
function display(){
console.log(“hi”);
}}
display(); // display is not defined

6.Cross-browser testing

It is a very essential testing for every web application to run in all browsers without any issues. All the users may not use the latest technology. That causes unwanted issues. For this developers should keep in mind those problems.