Why is this JavaScript map NOT an Infinite Loop?

Question

I'm learning JavaScript. I wrote this code to learn the map function. But then I got confused as to why is this not mapping over it continuously as with each map sequence a new element is pushed to the array. Shouldn't it continue to push new elements as it is mapping over ? Why does the map function only run for the original three elements and not for the new pushed ones?

I tried to debug it in the node environment and the arr variable goes in a closure. I know what a closure but I'm not able to understand what is going on here.

let array = [1, 2, 3];

array.map((element) => {
  array.push(10);
  console.log(element);
});

I expect that the output should be 1,2,3,10,10,10,10,10,10,10,10......10

But the actual output is only 1,2,3.

Answer 1

To quote from MDN:

The range of elements processed by map is set before the first invocation of callback. Elements which are appended to the array after the call to map begins will not be visited by callback. If existing elements of the array are changed, their value as passed to callback will be the value at the time map visits them.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map#Description

So, it behaves like that because that is how it is designed. And it is designed that way, amongst other reasons, to prevent infinite loops!

map is a function from the Functional Programming world, where immutability is an important principle. According to this principle, if you call map on an input (and other variables don't change) you will always get exactly the same result. Allowing modification of the input breaks immutability.