15x perf difference

1.js

var arr = new Array(100).fill(0).map((e, i) => i);
var res = 0

function myFor(arr) {
  for (let j = 0; j < 10_000_000; j++) {
    for (let index = 0; index < arr.length; index++) {
      res += arr[index];
    }
  }
}

for (let c = 0; c < 5; c++) {
  console.time('for')
  myFor(arr)
  console.timeEnd('for') // ~12600ms
}

console.log(res);

2.js

var arr = new Array(100).fill(0).map((e, i) => i);
var res = 0

function myFor(arr) {
  var tempSum = 0
  for (let j = 0; j < 10_000_000; j++) {
    for (let index = 0; index < arr.length; index++) {
      tempSum += arr[index];
    }
  }
    res += tempSum;
}

for (let c = 0; c < 5; c++) {
  console.time('for')
  myFor(arr)
  console.timeEnd('for') // ~750ms
}

console.log(res);

5-reduce.js

'use strict';
var arr = new Array(100).fill(0).map((e, i) => i);
var res = 0

function myFor(arr) {
  for (let j = 0; j < 10_000_000; j++) {
    res += arr.reduce((acc, n) => acc + n, 0);
    // for (let index = 0; index < arr.length; index++) {
    //   res += arr[index];
    // }
  }
}

for (let c = 0; c < 5; c++) {
  console.time('for')
  myFor(arr)
  console.timeEnd('for') // ~840ms
}

console.log(res);

6-local-reduce.js

'use strict'
var arr = new Array(100).fill(0).map((e, i) => i)
var res = 0

function myFor (arr) {
  let sum = 0
  for (let j = 0; j < 10_000_000; j++) {
    sum += arr.reduce((acc, n) => acc + n, 0)
  }
  res += sum
}

for (let c = 0; c < 5; c++) {
  console.time('for')
  myFor(arr)
  console.timeEnd('for') // ~730ms
}

console.log(res)