Alternatives to native for() and while() loops in ES6

You must be very familiar with a loop and see it completely understandable because loop is one of the first things when starting to learn programming. That is no reason not to use it. But if I say there are better ways than for() or while() to write. It is likely not to be easy due to we have used loop for a long time. So let's see how we can replace and break up with loops.

As far as being upgraded in the ES2015, javascript's class of Array has fully featured methods of map(), reduce(), filter(), .etc, so we will use them in this article.

Let's take a look at the native loop structures that you usually practice.

forEach() method

If you need to do something with values in the array, this is probably a situation when you most often use for():

const a = [0, 1, 2, 3, 4];

for (let i in a)
    let n = a[i] + 1;

Now we have forEach() as an alternative:

const a = [0, 1, 2, 3, 4];

a.forEach((value, index) => value + 1);

map() method

Another example is nearly same as the above:

const a = [0, 1, 2, 3, 4];
let b = [];

for (let i in a) {
    let value = a[i] + 1;
    b.push(value);
}

By using map(). It creates a new array inherited values in original array and combining with your own adjustments:

const a = [0, 1, 2, 3, 4];

a.map((value, index) => value + 1);

reduce() method

Sometimes, you want to get a new value from values in array:

const a = [0, 1, 2, 3, 4];
let total = 0;

for (let i in a) total += a[i];

In this case, the reduce() can help:

const a = [0, 1, 2, 3, 4];

const b = a.reduce((total, value, index) => total + value, 0);

Actually, your loops are much more complicated and let's continue with a few more examples.

filter() method

Assume that we have a short code as below:

const a = [0, 1, 2, 3, 4];
let total = 0;

for (let value of a)
    if (value > 0) total += value;

The filter() should be applied here, it will return an array with proper results very fast:

const a = [0, 1, 2, 3, 4];

let total = a
    .filter(value => value > 0)
    .reduce((total, value) => total + value, 0);

reverse() method

To look up values in an array from the end to the beginning, usually, you do:

const a = [0, 1, 2, 3, 4];
let b = [];

for (let i = a.length - 1; i >= 0; i--) {
    let value = a[i];
    b.push(value);
}

Now try to reverse the array:

const a = [0, 1, 2, 3, 4];

let b = a
    .reverse()
    .map(value => value);

map() and reduce() methods

To make sense, we use a single if() in a loop:

const a = [0, 1, 2, 3, 4];
let total = 0;

for (let value of a) {
    if (value > 0) total += value;
    else total += value * -1;
}

And then make a change in the code:

const a = [0, 1, 2, 3, 4];

let total = a
    .map(value => value > 0 ? value : value * -1)
    .reduce((total, value) => total + value, 0);

find() or findIndex() methods

If you have heard goto statement before, then you have probably known how bad it is, and should not use it again. But if you remember old lessons, break and continue statements are also similar to goto, are they not? Try this:

const a = [0, 1, 2, 3, 4];

for (let value of a)
    if (value > 1) break;

I find it not so bad either. But we have another way to do:

const a = [0, 1, 2, 3, 4];

const number = a.find(value => value > 1);

Note that you should use the find() and findIndex() to find an array element that matches a condition rather than a value. In case you want to find a value, indexOf() and lastIndexOf() are the better choice.