replacing for loop with forEach method

Question

I use forEach almost every time that I'm facing a node list or an actual array, but there are times, in which I can't do so, like when I want to create 5 div elements, I'm bound to do this with for loop

for (let i = 0; i < 4; i++) {
   //my code to do some repetitive code ...

   const myDiv = document.createElement('div');
   myDiv.classList.add(`${myDiv}${i}`)
   document.appendChild(myDiv);
}

The question is how can I do the same work with forEach, when there is no actual array or node list that can be used forEach method.

since forEach does the work asynchronously unlike for loop, I think it would be more beneficial move, am I wrong, any idea?

_"since forEach does the work asynchronously"_ - No, it doesn't. — Andreas, Apr 06 '20 at 14:40
[Is forEach asynchronous](https://stackoverflow.com/questions/5050265/javascript-node-js-is-array-foreach-asynchronous)? No, it's not. It doesn't take a callback and doesn't return a Promise. — Jeremy Thille, Apr 06 '20 at 14:41
That's weird I've heard that in some tutorial and he said that is one of the reason using forEach is preferred. — AbeIsWatching, Apr 06 '20 at 14:41
`[0,1,2,3].forEach((i) => {const myDiv = document.createElement('div'); myDiv.classList.add(\`${myDiv}${i}\`) document.appendChild(myDiv);})` is the same thing as your for loop — Ruan Mendes, Apr 06 '20 at 14:41
If you want to add it 100 times, stick with `for(let i = 0 ; i < 100 ; i++)`. There's no reason to make your life harder by absolutely wanting to switch to a more complicated solution. — Jeremy Thille, Apr 06 '20 at 14:44
`Array.from({length: 100}, (_ , i) => { const d = document.createElement("div"); d.className = "[object Object]" + i; return d; })` — Andreas, Apr 06 '20 at 14:45
Also, you can `break` a for loop, and use `await` in it. Two things impossible with `.forEach()`. — Jeremy Thille, Apr 06 '20 at 14:46
Jeremy, you're telling me there is no benefit in using forEach over for loop? — AbeIsWatching, Apr 06 '20 at 14:46
@JeremyThille Just to be 100% accurate, you can also `return` from a `for` loop, which I happen to use more often than `break`. — Ruan Mendes, Apr 06 '20 at 17:32
Exactly, so, `break`, `await` and `return`, plus the absence of need to create an array in memory, are 4 good reasons to use `for` over `.forEach()`. — Jeremy Thille, Apr 07 '20 at 08:58

Ismail Rubad · Accepted Answer · 2020-04-06T14:51:03.957

1

Array(3).fill().forEach((e,i) => {
  const myDiv = document.createElement('div');
  myDiv.classList.add(`${myDiv}${i}`)
  document.appendChild(myDiv);
})

edited Apr 06 '20 at 14:51

answered Apr 06 '20 at 14:46

Ismail Rubad

1,458
2
13
27

To which OP responded (above) by asking, what if I want 100 iterations? – Jeremy Thille Apr 06 '20 at 14:48
1

@AbeIsWatching look at the `forEach` equivalent, it's providing no real benefit, actually creating a useless array in the memory and reducing the code readability. compare it to ur clean old school `for` loop – Mechanic Apr 06 '20 at 14:58
yeah, e represent each member of the array and i the index of that member in that array.Thanks, that is the right answer but almost every one says, stick to for loop for these cases. – AbeIsWatching Apr 06 '20 at 14:58
@Ismail You should add the disclaimer to your answer since though it technically answers the question, you think a for loop is better. Especially considering the OP's original assumption that a `forEach` was asynchronous – Ruan Mendes Apr 06 '20 at 18:05

Mechanic · Answer 2 · 2020-04-06T14:53:34.157

0

There is no problem in using the for loop, and that is exactly the right place to use a for loop (or a while).

edited Apr 06 '20 at 14:53

answered Apr 06 '20 at 14:49

Mechanic

5,015
4
15
38

ha, I always thought there are some benefits in using forEach over for loop even in these cases... – AbeIsWatching Apr 06 '20 at 14:51
or even `do {...} while(++i < 100)` :) – Get Off My Lawn Apr 06 '20 at 14:54

replacing for loop with forEach method

2 Answers2