The results don't surpreise me, because you card stacked the demo by using the slow push method, and for..off which browser makers still haven't put much optimization into.

On paper map should be hte slower method, and the only reason it isn't is they've put massive amounts of effort into optimizing it whilst leaving for loops to rot.

Why should map be slower? And why would it actually use more memory and/or cause memory thrashing?

You're putting the overhead of a function inside the loop! Remember, optimizing inside a loop is not premature optimization, it's good practice. In that way the Array methods should be inefficient and are bad practice.

Though at least Array.map does something, unlike the mind-numbingly idiotic Array.foreach.

But seriosuly, you card stacked things in Array.map's favor.

const arr = [];
for (let i = 0; i < 1e8; i++) arr[i] = i;
console.time('Array.map');
const mapped = arr.map(n => n * 2);
console.timeEnd('Array.map');
console.time('Normal Loop');
const transformed = [];
for (let i = 0; i < arr.length; i++) transformed[i] = arr[i] * 2;
console.timeEnd('Normal Loop');

You test that you'll find the two trade blows every time you run it under v8. Though you also card stacked it in terms of execution order. If you flip which test is done first, whichever one is second is faster.

For example:

Chrome, Map first:

Array.map: 909.671142578125 ms
Normal Loop: 653.677001953125 ms

Chrome, Array First

Normal Loop: 766.843994140625 ms
Array.map: 764.68212890625 ms

So your conclusions don’t line up with reality. In fact it reeks of you coming to a conclusion and then manufacturing loaded tests for the sole purpose of supporting your conclusion.