Cool new ES6 features that every JavaScript Developer must know.

Hi guys. We’ll be talking about some of the cool new features that have been introduced with ECMAScript 6 or ES6. So let’s dive directly into the fun stuff.

Code Reduction is easier with ES6 arrow functions! and it’s so much fun.

ES5

function folioWorld(name) {
    return 'hello ' + name
}

ES6

const folioWorld = (name) => {
    return 'hello ' + name
}

Or

const folioWorld = (name) => {
    return `hello ${name}`;
}

And further more

const folioWorld = name => `hello ${name}`;

Isn’t it cool!

I was working on my angular project and was amazed to see that, with ES6, one can reduce bunch of lines into single statement.

Let me share my stuff with you here!

Starting from very basic piece.

Code#1 (old fashion):

switchTabById(id) {
    this.tabId = id;
}

After Refactoring:

switchTabById = (id) => this.tabId = id;

Code#2 (old fashion):

onIssueTypeChange(event) {
    if (event.id === 5) {
      this.showLots = true;
    }
    else {
      this.showLots = false;
    }
}

Level 1 Refactoring:

onIssueTypeChange(event) {
    this.showLots = (event.id === 5) ? true : false;
}

Level 2 Refactoring:

onIssueTypeChange(event) {
    this.showLots = (event.id === 5);
}

Level 3 Refactoring:

onIssueTypeChange = (event) => this.showLots = (event.id === 5);

Cool 🙂 this looks better.

Now check the difference!!

Before:

onIssueTypeChange(event) {
    if (event.id === 5) {
     this.showLots = true;
    }
    else {
     this.showLots = false;
    }
}

After:

onIssueTypeChange = (event) => this.showLots = (event.id === 5);

In this manner you can refactor your code to make it more readable, smarter, and shorter. These new cool features of ES6 are great for JavaScript developers.

It can speed up your coding and help you in structuring your code to looks smoother and fancy.

Wait!! It’s not over yet

I have extracted something very interesting from ES6 to you.

It’s JavaScript ES6 Reduce. So let’s start

Here is an array:

let myArray = [1, 2, 3, 4];

You need to iterate through an array using for loop to calculate the sum of myArray

let sum = 0;
for (let i = 0; i < myArray.length; i++) {
    sum += myArray[i];
}

Now take a look how the reduce method works its magic here!

let sum = myArray.reduce( (acc, val) => acc + val );

here acc is the accumulated result and val is each element of array.

Another Example:

Assume the following array of countries, where we need to calculate the sum of the populations of all the countries in the array.

let data = [
    {
      country: 'China',
      pop: 1409517397,
    },
    {
      country: 'Pakistan',
      pop: 339180127,
    },
    {
      country: 'USA',
      pop: 324459463,
    },
    {
      country: 'Indonesia',
      pop: 263991379,
    }
]

With reduce method you can do it at a glance!

let totalPopulation = data.reduce((acc, val) => acc + val.pop, 0);

Note: here 0 is initial value we need to put here to set initial value of sum, if you put 100 instead of 0 the net will be 100 + actual sum.

Hope this tutorial helps you in making more awesome apps!