10 important ES6 things that every JS programmer should know.

Are you a JavaScript programmer? If the answer is yes then I assume that you must familiar with ES6. Today I’m gonna share with you 10 important ES6 things that will develop your JS skill. So let get start it!

Block Bindings

We all use var, let and const to declare or assign a variable. Actually, block binding occurs when we declare or assign a value in a variable. In other programming language variable declaration is not a big deal because you can declare a variable anywhere but In JS you can’t do that because its depend on how to you declare a variable.

1. Var declarations and Hoisting

When we declare a variable outside a function using var then it hoisted as a global scope or if we declare inside a function then it hoisted to the top of the function. Consider the following program:

function getFruit(condition) {
if(condition){
   var fruit = 'apple'
   return fruit;
  } 
else{
   return 'no fruit found here';
  }
}

What do you think dude? If you are not familiar with this then you must think that if the condition is true then the fruit variable is created. But it work not like that. The hoisting nature of var keywords hoisted it on top of the function. Inside the JS engine its work like that:

function getFruit(condition) {
var fruit;
if(condition){
   fruit = 'apple'
   return fruit;
  } 
else{
   return 'no fruit found here';
  }
}

From the above program, I think you can understand why it’s happened. It because of hoisting top of the function that’s why the output is shown undefined.

2. Block-level Declarations

The block-level declaration is, we declare a variable that is outside of the given block scope. We declare variables using var, let, and const. Naturally one is different from another. Block scope can create inside a function or inside a block.

You can replace let instead of var because let declaration syntax is the same as var. But let works only the current block code where you declare it. let or const doesn’t hoist top of the function unlike var

function getFruit(condition) {
if(condition){
   letfruit = 'apple'
   return fruit;
  } 
else{
   return 'no fruit found here';
  }
}
let result = getFruit(true);
console.log(result)

so if we use let or const instead of var inside a function or block then hoisting in the top is not occur.

3. Block Binding in Loops

It is an efficient way that block binding is used with loops. You can use it for the encapsulation of your code that’s why its only works in a specific area. Consider the following program that you can understand easily.

for(var i=0; i < 10; i++) {
   //code
}
console.log(i) 
//i is accessible here because we use var and var hoisted on the top and thats why it works outside of a block
//let see what happend when we use let keyword insead of var
for(let i=0; i< 10; i++) {
  //code
}
console.log(i) 
//i is not accessible here because let is not work inside a block

4. Global Block binding

Global block binding behavior is not the same as when we use var or when use let and const. When var is used in the global scope then a new global variable is created and it's also added in the global object property. But when we use let or const instead of var then a new global variable is also created but this variable is not a property of a global object. We all know that window is an example of a global object.

//If you write the following code in browser console then
var intro = 'Hey dude. I am JS Programmer';
console.log(window.intro)
//Expected Output: Hey dude. I am JS Programmer

When let is used instead of var then see what is happened.

let intro = 'Hey dude. I am JS Programmer';
console.log(intro)
//Expected output: Hey dude. I am JS Programmer
console.log(window.intro)
//Output: undifined
console.log(intro === window.intro)
//Output: false

5. Emerging Best practice for block bindings

When ES6 was under development, the developer use let instead of uses var, and when the assigned value need to declare like as a constant then declare const. But now developers often use const and when need to change the assigned value of a variable only this condition developers use let.

Function In ES6

After releasing ES6, JavaScript turns into a new way. ES6 makes JavaScript more reusable and powerful. Especially the JavaScript function chapter added many new things that made JavaScript function less prone to error.

6. Function With Default Parameter values

Before ES6, passing default parameter in function need to write more code. But in ES6 passing a default parameter in more easy and cool.

function add(num1,num2=0){
   return num1+num2
}
const sum1 = add(30,50);
const sum2 = add(30);
console.log('sum1 = ',sum1)
//output:sum1 = 80
console.log('sum2 = ',sum2)
//output: sum2 = 30

7. Working With unnamed parameter

After ES6 coming, handling unnamed parameters is easier. The rest parameter allows any number of arguments as it needs.

function Number(...args) => console.log(args);
Number(10);       //output: 10
Number(20,30);    //output: 20,30
Number(30,40,50); //output: 30,40,50

8. Spread Operator

The Spread operator is one of the important things in ES6. There are many useful sides of ES6 such that copying existing array, marge two array, use in destructuring, etc.

const num = [10,20,30];
console.log(Math.min(...num)) //10
//another program
const arr1 = [30,40,50]
const arr2 = [60,70,80]
const allNumbers = (20, ...arr1, ...arr2, 90);
console.log(allNumbers)
//20,30,40,50,60,70,80,90

9. Block level Function

A block-level function is a function that is hoisted in the global scope. ES6 allows block-level function.

if(true) {
   console.log(typeof getFruit) // function
function getFruit(){
   //code
  }
getFruit()
}
console.log(typeof getFruit)   //function

10. Arrow Function

Arrow function is a new version of declaring a function in ES6. It is the coolest and easiest way than normal function declaration. Consider the following example that you can easily understand the difference between normal function and arrow function

//normal function
function add(num1, num2) {
   const sum = num1 + num2;
   return sum;
}
add(10,20);
//arrow function 
const add(num1, num2) => {
   const sum = num1 + num2;
   return sum;
}
add(10,20);

So this is for today. Hope you can understand. Keep Learning!

Thank You