DEV Community

Don’t use for loop for JavaScript Arrays

Kushal sharma on April 24, 2020

Lets first Talk about the Array in the Programming world I assume that if you belong from the programming world then you must playing with this stu...

Read full post

Gustavo da Silva • Apr 24 '20

I was using map to handle loops, but I found out that it struggles when handling asynchronous requests. Map doesn't wait till the previous request end to start a new one, even when you use:

array.map(async data => {
  // Promise
});

For this specific reason, I come back to for loops.

Amin • Apr 25 '20 • Edited

This is because you are returning an array of pending promises. If you want to fulfill these promises, you can use Promise.all. And if you want the result, you must await the resolution of Promise.all. Or you can also use .then.

function sleep(seconds: number) {
    return new Promise(function(resolve) {
        setTimeout(resolve, 1000 * seconds);
    });
}

function increment(input: number) {
    return input + 1;
}

async function main() {
    const nums = await Promise.all([1, 2, 3, 4, 5].map(async (num) => {
        await sleep(1);

        return increment(num);
    }));

    console.log(nums);
    // [ 2, 3, 4, 5, 6 ]
}

main();

dsbarnes • Apr 25 '20

In considering this comment I discovered one can use .reduce() to return promises in sequence (which I also thought cool enough to share):

function runPromiseInSequence(arr, input) {
  return arr.reduce(
    (promiseChain, currentFunction) => promiseChain.then(currentFunction),
    Promise.resolve(input)
  )
}

// promise function 1
function p1(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 5)
  })
}

// promise function 2
function p2(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 2)
  })
}

// function 3  - will be wrapped in a resolved promise by .then()
function f3(a) {
 return a * 3
}

// promise function 4
function p4(a) {
  return new Promise((resolve, reject) => {
    resolve(a * 4)
  })
}

const promiseArr = [p1, p2, f3, p4]
runPromiseInSequence(promiseArr, 10)
  .then(console.log)   // 1200

Good thoughts, that's for leading me to that find.

Kushal sharma • Apr 24 '20

yes for loop is the fastest among all the other methods. yes everything has the pro and cons we have to choose wisely what to use in which situation

Gustavo da Silva • Apr 24 '20

absolutely!

but that was a very helpful post!
I really like using map. It syntax combined with the fact that it doesn't change the original array it's very handy. If they improve async I'll definitely switch back to map (:

Kushal sharma • Apr 24 '20

thanks, buddy, I am also the map syntax lover. I can't imagine the React without the map

Shreyas Jejurkar • Apr 25 '20

Hopefully, JS will add something like IAsyncEnumrable like C#, sometime soon.

Stephen Belovarich • Apr 25 '20 • Edited

Did you compare the performance of either in addition to considering the interface? Just because map can be more human readable doesn’t necessarily mean you shouldn’t use a for loop. for could be more performant for the end user.

Kushal sharma • Apr 25 '20 • Edited

Yes, sir totally agreed with you that the for loop is much faster than the other javascript array functions. Everything has pros and cons. so we have to choose wisely what to use in which situation

Himanshu Mishra • Apr 25 '20

This is a very weak argument. I don't like the thinking that write whatever you wanna write because your pc's hardware can take it. Software is not in good place today because of that, especially web.
For and map have there own use cases. Use them wherever they suits the best.

Maximilian Burszley • Apr 25 '20 • Edited

He's hiding any comments pointing out his weak arguments, so it makes sense. Terrible feature to be able to hide legitimate criticisms on DEV.

Himanshu Mishra • Apr 26 '20

Ohh! I didn't know you can that.
This is sad 😔
I wonder why dev would make this feature 🤔

Kushal sharma • Apr 26 '20

I made it hidden by mistake. I am new at this platform so just testing some features, if you know how I can revert it, then plz tell about the procedure

Stephen Belovarich • Apr 25 '20

Do you have actual data to back that up?

Kushal sharma • Apr 25 '20

You can easily get the performace metic on online b/w for and other functions . And every thing has pro and cons . I also has used for loop insted of the map in many situations

Stephen Belovarich • Apr 25 '20

Like this...

github.com/dg92/Performance-Analys...

SavagePixie • Apr 25 '20 • Edited

Oh, you mean those tests in which if you place forEach before for then forEach becomes faster? The same tests in which if you actually use the result of the operation afterwards map becomes faster than for?

"Because performance" doesn't seem a particularly good argument to choose one option over another. How fast a for, map, etc will run depends on more than its name, like optimisations that the runtime can do. So just choosr whichever fits your needs and if you run into performance issues profile and see what's causing the bottleneck (which probably won't be that map that you chose to use instead of a for loop).

Stephen Belovarich • Apr 25 '20

Yes! This is what I mean. Engineers should consider performance when deciding which method to use.

Joe Attardi • Apr 25 '20

There are still perfectly valid use cases for the for loop. For example, if you want to break out of the loop early there’s the break keyword.

Or if you want to not iterate over the items of an array, but rather just repeat something a certain number of times, a for loop is useful there too.

A for loop also lets you have more complex logic for when you should continue looping. Remember that for loops are not only used for iterating over an array.

Kushal sharma • Apr 25 '20

Aggred

Shubham Sharma • Apr 25 '20

Many comments about speed and performance here, but I believe in doing max-optimisations only when they make a noticeable difference for the end-user/service, thus I would endorse using Map if possible.

Kushal sharma • Apr 25 '20

Yes shubham. While making the simple or small web app the map function doesn't make any impact on performance

Vikas Rai • Apr 25 '20

Hey Kushal, Thanks for your post. I read your post and what made me more indulged into this topic was that you mentioned my home town "LUDHIANA" in your first example.

Kushal sharma • Apr 25 '20

hehe, thanks buddy. I think why not to use the Punjab cities name, for example, let's also make them famous in dev.to

Adam Crockett 🌀 • Apr 25 '20 • Edited

How are you going to use iterators then. Do use for loops, do use array functional methods too.

Kushal sharma • Apr 25 '20

It depends upon what is the situation , if i had to just loop over then i will use foreach , else if i had to do asynchorons work inside loop i swith back to the for loop , as for each doesnot support asynchonous

pris stratton • Apr 25 '20

What is map built on - is it a for loop underneath or is it a recursive function, or does that depend on the implementation of JS you are using? Not sure why it is slower than a for loop.