<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div><label for="arraySize">Array Size: </label><input id="arraySize" type="number" value="1000" /></div>
    <div><label for="iterations">Iterations: </label><input id="iterations" type="number" value="20000" /></div>
    <button onclick="testArrays()">Fill arrays with integers</button>
  </body>

</html>
function buildDynamicArray(n) {
  const arr = [];
  for (let i = 0; i < n; i++) {
    arr.push(i);
  }
}

function buildPreAllocatedArray(n) {
  const arr = new Array(n).fill(0);
  for (let i = 0; i < n; i++) {
    arr[i] = i;
  }
}

function test(cb, n, name) {
  console.time(name);
  for (let i = 0; i < n; i++) {
    cb();
  }
  console.timeEnd(name);
}

function testArrays() {
  const arraySize = Number(document.getElementById("arraySize").value);
  const iterations = Number(document.getElementById("iterations").value);
  setTimeout(() => {
    test(() => buildDynamicArray(arraySize), iterations, "dynamicArr");
    setTimeout(() => {
      test(() => buildPreAllocatedArray(arraySize), iterations, "preAllocArr");
    }, 1000);
  }, 1000);
}