ES6 Essential You Need To Know

ECMASCRIPT 6 was the 2nd major revision of Javascript.ECMAScript 6 is also known as ES6 and ECMAScript 2015. Let’s deep dive into some ES6 essentials we must need to know.

ES6 introduced two new keywords to the js programmer. That are Const & let.

Const: We declare const instead of using var if the value of the variable is not going to be changed on code.

Let: We declare let if the variable value is going to change in further future. Let’s see an example of using const and let keyword instead of using var.

const name = “rimon”; //not going to change

let age = 22; // is going to change on future

Hoisting:

Hoisting is the default behavior of javascript. Normally Javascript takes our all declarations to the top.

add();
function add(){
   var a = 5;
   var b = 10;
   var sum = a + b;
console.log(sum);

Scopes:

Scopes in javascript refer to the current context of the code. Which decides the accessibility of variables. There are two types of variables, the first one is Local scope and Another is Global Scope. Local scope means the variables have been declared inside a block. And Global scope means the variables have been declared outside of the block that means the variable can be accessed from anywhere in the code.

// Initialize a global variable
var species = "human";

function transform() {
  // Initialize a local, function-scoped variable
  var species = "werewolf";
  console.log(species);
}

// Log the global and local variable
console.log(species);
transform();
console.log(species);

Block:

Block is a compound statement which is having fixed boundaries or limits in pairs of brackets. But there’s a matter of let and var. Example:

let a= 1;
{
  let a= 2;
}
console.log(a); it will return you 2;

The question is we updated the value of variable a but why it is showing us the value of previous one? Here’s the scope comes, we learned earlier that local scopes are scope which are defined in a block and can be accessed inside the block. But they can’t be accessed outside of the block. Outside of block, there’s another variable named a already declared and initialized. So it becomes a global scope and it will be the value of a.

BLOCK IN LOOP:

Normally a variable declares outside the loop, it's an expression. Typically used to initialize a counter variable. This expression may optionally declare new variables with var or let keywords. Example:

let text = '';
for (let i = 0; i < 6; i++) {
  text = text + i;
}
console.log(text);//it will return 012345

Best Practice In Code Writing :

Normally when we write code we must need to keep it clean and human-readable. We must not make our code complex so that others developers can not read our codes. Commenting on the codes is one of the best practice when we writing code. That helps other developers when they try to read our codes.

if (n === 0) {alert('this is an alert function');}

This is not the best practice of code writing. We can code like that,

if (n === 0) {
alert('this is an alert function');
}

Default parameter

The default parameter in the function is passing a parameter value inside the parameter. It initialized with default values if there is no value or undefined is declare.

function add (a, b){
  return a + b;
}
add(10, 5);//it will return 15;

But let consider if we declare the same function without giving the value of b, what will happen? it will return undefined because the parameters don’t find a value to sum up. To fix this issue we can declare a default parameter in our function.

function add (a, b = 3){
  return a + b;
}
add(10, undefined);//it will return 13;

Rest Parameter

Another useful addition to JavaScript’s ES6 is the rest parameter. This allows the undefined amount parameter to be passed through a function. When we define a function with parameters, if it is unknown how many arguments may be passed, we use this rest parameter in that situation or use the arguments object of ES5. This argument object of JavaScript ES5 basically worked the same, but the rest parameter of ES6 is a little too smart. The rest of the dot is used in the same parameter as the seam spread operator. And so by looking at these three dots (…) places you have to understand when they are being used for rest parameters and when they are being used as spread operators.

function team(...player) {
   for(var i = 0; i < player.length; i++) {
      console.log(player[i]);
   }
};
team('Rimon', 'Nazmul', 'Huda');//it will return 
Rimon
Nazmul 
Hudaa

Arrow Function

Another new addition to ES6 is the arrow function. Also known to many as the Fat Arrow function. It’s not really new, just syntactically nice to look at and a lot cleaner. There is a saying in the world of a programming language called Syntactic Sugar. This means it’s about to be the most delusional time of the year, as well. Although the functionality of the Arrow function is much the same as that of the Traditional Javascript, there are some differences.

const name = () => console.log('Im Rimon');
name();//it will return Im Rimon