var arr = []; for (var i = 0; i < 1000000; i++) { arr[i] = i; } function someFn(i) { return i * 3 * 8; }var newArr = []arr.forEach(function (item){ newArr.push(someFn(item));})var newArr = []for (var i = 0, len = arr.length; i < len; i++) { newArr.push(someFn(arr[i]));}var newArr = arr.map(item => someFn(item))let i = 0, len = arr.length;var newArr = []while (i<len) { newArr.push(someFn(arr[i])); i++;}--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| foreach | |
| for | |
| map | |
| while |
| Test name | Executions per second |
|---|---|
| foreach | 48.8 Ops/sec |
| for | 63.3 Ops/sec |
| map | 57.9 Ops/sec |
| while | 63.5 Ops/sec |
Let's break down the benchmark and its test cases.
Benchmark Definition
The benchmark is designed to compare the performance of different JavaScript loops for creating a new array: Array loop, for loop, forEach loop, and while loop with a new array creation. The script preparation code creates an array of 1 million elements, each with a simple function that multiplies its value by 3 and 8.
Test Cases
There are four test cases:
foreach loop: This test case uses the forEach method to iterate over the array and create a new array with the same number of elements.for loop: This test case uses a traditional for loop to iterate over the array and create a new array with the same number of elements.map method: This test case uses the map method to create a new array by applying the multiplication function to each element in the original array.while loop: This test case uses a while loop to iterate over the array and create a new array with the same number of elements.Library and Special JavaScript Features
None of the test cases use any external libraries or special JavaScript features beyond what's included in the benchmark definition. The only notable aspect is that the map method is used, which is a built-in JavaScript method for creating a new array by applying a transformation function to each element.
Performance Considerations
When it comes to performance, the order of operations and loop structure can significantly impact execution time. Here's a brief overview of the pros and cons of each approach:
foreach loop: This loop is generally slower than others because it involves more overhead due to the iteration and callback function invocation.for loop: A traditional for loop is usually faster than the other loops because it avoids the overhead of callback functions and has direct access to array elements.map method: The map method can be slower than a simple loop, especially for large datasets, due to its creation of an intermediate array and additional function calls.Other Alternatives
If you're looking for alternatives or variations on this benchmark, consider the following:
Set, Queue, or Deque.Benchmarking Insights
The provided benchmark results show that the while loop is currently the fastest, followed by the for loop. The map method and foreach loop are slower due to their additional overhead. Keep in mind that these results may vary depending on the specific browser, version, and system configuration.
In conclusion, this benchmark provides a comprehensive comparison of different JavaScript loops for creating a new array, highlighting the importance of loop structure, callback functions, and data access patterns when optimizing performance.
