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 1const 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.