Benchmark: Map vs For Loop vs For of vs For of entries

Script Preparation code:

var a = [];
for (var i = 0; i < 1e6; i++) {
  a[i] = Math.random();
}

Tests:

Map
var b = a.map(n => n * 2);
For Loop
var b = []; for (var i = 0; i < a.length; i++) { b[i] = a[i] * 2; }
foreach
var b = a.forEach(n => n * 2);
pre-allocated for loop
var b = new Array(a.length); for (var i = 0; i < a.length; i++) { b[i] = a[i] * 2; }
pre-allocated unrolled for loop
var b = new Array(a.length); for (var i = 0; i < a.length/4; i++) { b[i*4] = a[i*4] * 2; b[i*4+1] = a[i*4+1] * 2; b[i*4+2] = a[i*4+2] * 2; b[i*4+3] = a[i*4+3] * 2; }
For of
var b = [] for (var v of a) { b.push(v * 2) }
For of entries
var b = [] for (var [i, v] of a.entries()) { b[i] = v * 2 }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map
For Loop
foreach
pre-allocated for loop
pre-allocated unrolled for loop
For of
For of entries

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

**What is being tested in the benchmark?**

In this JavaScript microbenchmark, six different approaches are compared to perform an array operation on a large array (`a`):

1.  `map()`: Creates a new array with the results of applying a provided function to each element in the original array.
2.  `for...loop`: Iterates over the elements of the array using a traditional loop, performing the desired operations directly on the elements.
3.  `forEach()` (also known as "callback" or " iterator" method): Similar to `map()`, but it calls the provided function once for each element in the array without creating a new array.
4.  Pre-allocated `for...loop`: Creates a pre-allocated array and fills it with elements from the original array, performing the desired operations directly on the elements.
5.  Unrolled `pre-allocated for loop`: Similar to the previous approach, but it performs multiple operations (four) in each iteration of the loop.

**Options compared**

The benchmark tests four different approaches:

1.  Traditional map function (`map()`).
2.  Traditional for...loop with direct element manipulation.
3.  foreach() method without creating a new array.
4.  Pre-allocated for loop and unrolled pre-allocated for loop, which optimize the iteration process by allocating an array beforehand and then filling it.

**Pros and Cons of each approach**

1.  `map()`:

*   Pros: concise code, efficient execution, less memory usage (since no new array is created).
    *   Cons: can be slower due to the overhead of creating a new array.
2.  Traditional for...loop:

*   Pros: direct element manipulation, flexibility in operations, simple implementation.
    *   Cons: may require more code, slower execution compared to optimized approaches.
3.  foreach():

*   Pros: concise code, efficient execution (since it doesn't create a new array).
    *   Cons: less control over the iteration process and direct element manipulation.
4.  Pre-allocated for loop:

*   Pros: optimized execution with pre-allocation of the array, reduces memory allocation overhead.
    *   Cons: requires more code setup and has higher constant factor compared to traditional for...loop or map().
5.  Unrolled pre-allocated for loop:

*   Pros: further optimization by performing multiple operations in each iteration, potentially reducing execution time.

**Other considerations**

The benchmark may also depend on factors such as:

*   The size of the array (`a`).
*   The specific operations performed on the elements (e.g., simple arithmetic vs. complex calculations).
*   The specific hardware and JavaScript engine being used.
*   Any additional code that might be running concurrently or affecting performance.

**Alternatives**

Some possible alternatives to these approaches could include:

1.  Using `Array.prototype.reduce()` for more complex operations.
2.  Employing SIMD (Single Instruction, Multiple Data) instructions if available, which can significantly accelerate operations on large arrays with similar data types.
3.  Leveraging modern JavaScript features like WebAssembly or worker threads for parallel execution and potential performance gains.

However, the choice of approach ultimately depends on the specific requirements of your project, such as code readability, maintainability, and performance optimization strategies tailored to your use case.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Map	170.0 Ops/sec
For Loop	321.1 Ops/sec
foreach	306.8 Ops/sec
pre-allocated for loop	320.2 Ops/sec
pre-allocated unrolled for loop	324.9 Ops/sec
For of	159.0 Ops/sec
For of entries	68.0 Ops/sec

Related benchmarks:

Map vs For Loop vs For of vs For of entries (version: 0)

Comparing performance of: Map vs For Loop vs foreach vs pre-allocated for loop vs pre-allocated unrolled for loop vs For of vs For of entries

Created: one year ago by: Guest

Jump to the latest result

Map

For Loop

foreach

pre-allocated for loop

pre-allocated unrolled for loop

For of

For of entries

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):