# of looping cycles after adding new elements during iteration. forEach vs for/of-CodePudding

Did some notice how loop constructs forEach and for/of behave on "added during iteration" items? ForEach ignores the fact that there are newly added items in the array, and for/of alters iterator on the fly and keeps going until no elements are left in the array. What is the reason for this phenomenon, using smart words? 1-st post on the stackoverflow so no judge if explanation is simple.... Thanks

let my_array1 = [1,2,3]
let my_array2 = ["a", "b", "c"]

//extra iteration cycles were not dynamically added. Loop ends after pre-defined # of cycles.
my_array1.forEach((value, index, the_array) => {
  if (value == 3){
    // my_array1.push(3)
    the_array.push(3)  // works like so as well
  }
})

console.log(`my_array1 after iteration ${my_array1}`)

//extra iteration cycles WERE dynamically added. Infinite loop!!!
for (let value of my_array2){
  if (value == "c"){
    my_array2.push("c")
  }
}

console.log(`my_array2 after iteration ${my_array2}`)

CodePudding user response：

When you call the .forEach method on an array object it sets the end of the loop to the current value of array.length. It would be the same as this:

const arr = [1,2,3,4]
const end = arr.length
for(let i = 0; i < end; i  ) {
    '''code'''
}

However when you are using the syntax for for...of it is the same as this:

const arr = [1,2,3,4]
for(let i = 0; i < arr.length; i  ) {
    '''code'''
}

So at every iteration it is checking the length of the array, which will change if you push into the array

CodePudding user response：

You have to look at the specification (or, for non-native methods, at the documentation for whatever you're using) to see what the behavior is. For example, with Array.prototype.forEach, you can see:

1. Let O be ? ToObject(this value).
2. Let len be ? LengthOfArrayLike(O).
3. If IsCallable(callbackfn) is false, throw a TypeError exception.
4. Let k be 0.
5. Repeat, while k < len,
  a. Let Pk be ! ToString(