JavaScript ES6 — Write your code more modern and more readable.

JavaScript ES6 has some new awesome features to write less code and executed more. The greater features like Arrow Function, Multi-Line Strings, Enhance Object, Destructuring Array & Object, Module, Classes & Inheritance, Promise & so on.

Photo by Roman Synkevych on Unsplash

const: Const is a new syntax for declaring variables in ES6. It is so powerful than the ‘var’ keyword. If you used const then the variable can’t be changed again like ‘var’. It is totally immutable variable except when it used with objects.

const x = 10;
x = 21;
console.log(x) // Wrong

In this example, you can’t see the output. Because of the variable x assign with const.

const arr = [];
arr.push(20);
arr.push(11);
console.log(arr); 

Guess, what the output is! Initially, you think it’s an error right. Actually, Array behaves like an Object. When we push something is just insert as property but not create another object. But,

arr = [];

This is wrong cause when we use const variable after that we can’t initialize like this. This is totally wrong.

let:

Let can be changed and take new values like ‘var’ keyword. Tha’s why it creates a mutable variable. Keep in mind, let is the same as const in that bother are blocked-scope. That’s why in the above example, the ‘x’ (25) value is changed in the first block, and the second block it’s unchanged (15). Finally, without block, the value of x is not defined.

Multi-Line String: It’s another name is ‘Template literals’ or ‘Template Strings’. Through these tools, we don’t need to use the plus (+), operator to concatenate strings, or when we want to use a variable inside a string.

This is old syntax example, and the new pretty cool syntax example is,

Arrow Function: Instead of using the syntax of the function the ‘Arrow Function’ is really awesome, and makes the code more readable, more structured. Let’s take a look an old syntax.

And the new syntax is

You can use the Arrow Function with map, filter, and reduce build-in functions. Actually, the arrow function solves the ‘Lexical This’ problem.

In this print() function has an inner function of setTimeout(). This function ‘This’ is called ‘Lexical This’. Without Arrow function, this keyword returns ‘Window Object’. That’s why we need to call the bind method.

Destructuring Object and Array: It makes the assignment of the values of an array or object to the new variable easier. The old syntax.

With ES6 syntax:

Remember that, if you assign a variable that is not the same as the name of a property, then it will return undefined. For example, if the name of the property is ‘age’ and we assign it to a ‘myAge’ variable, it will return undefined. But if you want to rename the variable you need to use ‘:’ operator.

For array, we just have to replace the curly bracket with square brackets.

Promises: Basically, It’s a method to write asynchronous code. It used when we want to fetch data from an API, or when we have a function that takes time to be executed. In that case, Promise to make it easier to solve the problem. So, without further due let’s create our first promise.

Go to your browser console. After ‘run’, it will return a Promise. The promise takes two parameters one is ‘resolve’ another one is ‘reject’ to handle an expected error.

Keep in mind, the function returns a Promise itself. If you run this code in browser console you will return an array of data.

Rest Parameter and Spread Operator: The rest parameters are used to get the argument of an array, and return a new array.

On the other hand, the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.

const arr = [1, 2, 3];
const func = (...otherArray) => {
    return otherArray;
}
console.log(func(arr));
//Output: [1, 2, 3];