JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more. Let’s take a look.



<h2>Basic ES6 Features are</h2>



<ul><li>The let &amp; const keyword</li><li>Arrow Functions</li><li>The For/Of Loop</li><li>Classes</li><li>Promises</li><li>Template Literals</li><li>Default Parameters</li><li>Array and object destructing</li><li>Rest parameter and Spread operator</li><li>Import and export</li></ul>



<h2>The let &amp; const keyword</h2>



The <code>let</code> keyword allows you to declare a variable with block scope.



<pre class="wp-block-code"><code>var x = 10; // Here x is 10
{
 let x = 2; // Here x is 2
}
// Here x is 10</code></pre>



The <code>const</code> keyword allows you to declare a constant (a JavaScript variable with a constant value). <code>Const</code> variables must be assigned a value when they are declared:



Constants are similar to <code>let</code> variables, except that the value cannot be changed.



<pre class="wp-block-code"><code>const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error</code></pre>



<h2>Arrow Functions</h2>



Arrow functions allows a short syntax for writing function expressions.



You don't need the <code>function</code> keyword, the <code>return</code> keyword, and the curly <code>brackets</code>.



<pre class="wp-block-code"><code>// ES5
var x = function(x, y) {
 return x * y;
}
// ES6
const x = (x, y) =&gt; x * y;</code></pre>



<ul><li>Arrow functions do not have their own <code>this</code>. They are not well suited for defining <code>object</code> methods.</li><li>Arrow functions are not <code>hoisted</code>. They must be defined before they are used.</li><li>Using <code>const</code> is safer than using <code>var</code>, because a function expression is always a constant value.</li><li>You can only omit the <code>return</code> keyword and the curly <code>brackets</code> if the function is a single statement. Because of this, it might be a good habit to always keep them:</li></ul>



<pre class="wp-block-code"><code>const x = (x, y) =&gt; { return x * y };
OR
const x = (x, y) =&gt; x * y; // no need of return keyword in case of single statement</code></pre>



<h2>The For/Of Loop</h2>



The JavaScript <code>for/of</code> statement loops through the values of an iterable objects. 



<code>for/of</code> lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.



The <code>for/of</code> loop has the following syntax:



<pre class="wp-block-code"><code>for (variable of iterable) {
 // code block to be executed
}

Example:
var cars = &#91;"BMW", "Volvo", "Mini"];
for (var x of cars) {
 document.write(x + "&lt;br &gt;");
}</code></pre>



variable - For every iteration the value of the next property is assigned to the variable. Variable can be declared with <code>const</code>, <code>let</code>, or <code>var</code>. iterable - An <code>object</code> that has iterable properties.



<h2>Classes</h2>



Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.



JavaScript <code>Classes</code> are templates for JavaScript Objects.



<pre class="wp-block-code"><code>class ClassName {
 constructor() { … }
}</code></pre>



To create a <code>class</code>, use the class keyword followed by the name of the class with two curly brackets.



<pre class="wp-block-code"><code>class Car {
 constructor(name, year) {
 this.name = name;
 this.year = year;
 }
}</code></pre>



<h2>Promises</h2>



Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!



<pre class="wp-block-code"><code>let myPromise = new Promise(function(resolve, reject) {
 resolve(); // when successful
 reject(); // when error
});
// Must wait for a fulfilled Promise.
myPromise.then(
 function(value) { // code if successful },
 function(error) { // code if some error }
);</code></pre>



If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: <code>resolve</code> and <code>reject</code> to handle an expected error.



<pre class="wp-block-code"><code>let&nbsp;myPromise =&nbsp;new&nbsp;Promise(function(resolve, reject) {
&nbsp; setTimeout(function() { resolve("Hello World!!"); },&nbsp;3000);
});
myPromise.then(function(value) {
&nbsp; console.log('Success', value);
}, function(error) {
 console.log('Error', error);
});</code></pre>



<h2>Template Literals</h2>



Template literals or template strings are pretty cool. We don’t have to use the plus (+) operator to concatenate strings, or when we want to use a variable inside a string.



<pre class="wp-block-code"><code>The old syntax: ES5
function myFunct(name, age) {
 return 'Hi, My name is: '+ name + ' and i am '+ age + ' years old';
}
console.log(myFunct("TCM", 26));
Output: Hi, My name is: TCM and i am 26 years old

The New syntax: ES6
const myFunct = (name, age) =&gt; `Hi, My name is: NULL and i am NULL years old`;
console.log(myFunct("TCM", 26));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



So simple! It’s a really huge difference between the old syntax and ES6. When playing with strings, the literal string in ES6 looks more organized and well structured than ES5.



<h2>Default parameters</h2>



When I work in PHP, I usually use default parameters. These allow you to define a parameter in advance.



So, when you forget to write the parameter, it won’t return an <code>undefined</code> error because the parameter is already defined in the default. So when you run your function with a missed parameter, it will take the value of the default parameter and it will not return an error. 



Look at this example:



<pre class="wp-block-code"><code>const myFunct = (name, age) =&gt; Hi, My name is: NULL and i am NULL years old;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am undefined years old</code></pre>



The function above returns undefined, because we forgot to give it the second parameter <code>age</code>.



But if we used the default parameter, it won’t return undefined, and it will use its value when we forget to assign a parameter.



 Look at this example:



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<h2>Array and Object Destructing</h2>



Destruction makes the assignment of the values of an array or object to the new variable easier.



The old syntax:



<pre class="wp-block-code"><code>const user = {
 id: 12345,
 name: "TCM",
 age: 26
};

let id = user.id;
let name = user.name;
let age = user.age;
console.log(id, name, age);
Output: 12345 TCM 26</code></pre>



With ES6 syntax:



<pre class="wp-block-code"><code>const user = {
 id: 12345,
 name: "TCM",
 age: 26
};

let { id, name, age } = user;
console.log(id, name, age);
Output: 12345 TCM 26</code></pre>



With ES5, we have to assign each value to each variable. With ES6, we just put our values within curly brackets to get any property of the object.



Note: if you assign a variable that is not identical to the name of property, it will return <code>undefined</code>. For example, if the name of the property is <code>name</code> and we assign it to a <code>username</code> <code>variable</code>, it will return <code>undefined</code>.



<h2>Rest Parameter and Spread Operator</h2>



The Rest Parameters syntax allows a function to accept an indefinite number of arguments as an <code>array</code>.



<pre class="wp-block-code"><code>const sum = (…args) =&gt; args.reduce((total, num) =&gt; total + num, 0);
console.log(sum(1, 2, 3));
Output: 6</code></pre>



The Spread Operator has the same syntax as the rest parameter, but 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.



<pre class="wp-block-code"><code>const arr=&#91;'said', 20, 'Hi', 'How are you?'];

const Func = array =&gt; &#91;...array, "hello world"];
console.log(Func(arr));
Output: &#91;"said", 20, "Hi", "How are you?", "hello world"]</code></pre>



<h2>Import and Export</h2>



Using&nbsp;<code>import</code>&nbsp;and<code>&nbsp;export</code>&nbsp;in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.



If you are familiar with any JavaScript MVC framework, you will see that they use&nbsp;<code>import</code>&nbsp;and&nbsp;<code>export</code>&nbsp;to handle the components most of the time. So how do they really work?



It is simple!&nbsp;<code>export</code>&nbsp;allows you to export a module to be used in another JavaScript component. We use&nbsp;<code>import</code>&nbsp;to import that module to use it in our component.



For example, we have two files. The first is named&nbsp;<code>detailComponent.js</code> and the second is named <code>homeComponent.js</code>.



In&nbsp;<code>detailComponent.js</code> we are going to export the&nbsp;<code>detail</code>&nbsp;function.



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
export default myFunct;</code></pre>



And if we want to use this function in&nbsp;<code>homeComponent.js</code>, we will just use&nbsp;<code>import</code>.



<pre class="wp-block-code"><code>import myFunct from './detailComponent.js';
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



If we want to import more than one module, we just put them within curly brackets.



<pre class="wp-block-code"><code>import {myFunct, user, profile} from './detailComponent.js';
console.log(myFunct("TCM"));
console.log(user);
console.log(profile);</code></pre>



So cool, isn’t it?! Feel free to leave a comment below.

JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write ...

Overview of ES6 Features in JavaScript