Benchmark: for loop vs foreach vs map (obj mutation)

Script Preparation code:

   var arr = [];
   for (var i = 0; i < 1000; i++) {
     arr[i] = { x0: 0, x1: i, y0: 0, y1: i, dx: 0, dy:0 };
   }

   var len = arr.length;

Tests:

for loop
for (var i = 0; i < len; i++) { arr[i].dx = arr[i].x1 - arr[i].x0; arr[i].dy = arr[i].y1 - arr[i].y0; arr[i].x0 = arr[i].dx - arr[i].dx / 2; arr[i].x1 = arr[i].dx + arr[i].dx / 2; arr[i].y0 = arr[i].dy - arr[i].dy / 2; arr[i].y1 = arr[i].dy + arr[i].dy / 2; arr[i].dx = arr[i].x1 - arr[i].x0; arr[i].dy = arr[i].y1 - arr[i].y0; }
forEach
arr.forEach(function (it){ it.dx = it.x1 - it.x0; it.dy = it.y1 - it.y0; it.x0 = it.dx - it.dx / 2; it.x1 = it.dx + it.dx / 2; it.y0 = it.dy - it.dy / 2; it.y1 = it.dy + it.dy / 2; it.dx = it.x1 - it.x0; it.dy = it.y1 - it.y0; })
map (same object)
var newArr = arr.map(it => { it.dx = it.x1 - it.x0; it.dy = it.y1 - it.y0; it.x0 = it.dx - it.dx / 2; it.x1 = it.dx + it.dx / 2; it.y0 = it.dy - it.dy / 2; it.y1 = it.dy + it.dy / 2; it.dx = it.x1 - it.x0; it.dy = it.y1 - it.y0; return it; })
map (new obj)
var newArr = arr.map(it => { return { dx: it.x1 - it.x0, dy: it.y1 - it.y0, x0: it.dx - it.dx / 2, x1: it.dx + it.dx / 2, y0: it.dy - it.dy / 2, y1: it.dy + it.dy / 2, dx: it.x1 - it.x0, dy: it.y1 - it.y0, }; });

Rendered benchmark preparation results:

Previous results

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36

Browser/OS: Chrome 89 on Mac OS X 11.2.1

for loop vs foreach vs map (obj mutation) (version: 0)