Benchmark: JS loops comparison

Script Preparation code:

var data = [...Array(10000).keys()]

Tests:

.map
const result = data.map(x => x + 1)
iterator loop
const result = []; for (const val of data) { result.push(val + 1); }
indexed loop (assign)
const result = new Array(data.length); for (let i = 0; i < data.length; i++) { result[i] = data[i] + 1; }
.forEach (assign)
const result = new Array(data.length); data.forEach((value, i) => result[i] = value + 1);
indexed loop (push)
const result = []; for (let i = 0; i < data.length; i++) { result.push(data[i] + 1); }
.forEach (push)
const result = []; data.forEach((value, i) => result.push(value + 1));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.map
iterator loop
indexed loop (assign)
.forEach (assign)
indexed loop (push)
.forEach (push)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
.map	37336.0 Ops/sec
iterator loop	52202.0 Ops/sec
indexed loop (assign)	39502.3 Ops/sec
.forEach (assign)	23127.3 Ops/sec
indexed loop (push)	22731.3 Ops/sec
.forEach (push)	18373.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in the provided benchmark.

**Benchmark Definition**

The benchmark is comparing different approaches to iterate over an array of numbers and perform a simple transformation on each element.

The script preparation code creates an array `data` with 10,000 elements, each representing a number from 0 to 9,999. This array will be used as input for the different iteration methods being tested.

**Iteration Methods**

There are four iteration methods being compared:

1. **.map()**: The `map()` method creates a new array by applying a given function to every element in an array. In this case, it adds 1 to each number in the original array.
2. **iterator loop**: This approach uses a traditional for loop with an index variable to iterate over the elements of the array and perform the transformation.
3. **indexed loop (assign)**: Similar to the iterator loop, but instead of using a separate index variable, it assigns each element's value directly to a new array at its corresponding index.
4. **indexed loop (push)**: This approach uses the `push()` method to add elements to an array during iteration.

**Library and Special JS Features**

None of these methods rely on any specific libraries or JavaScript features other than standard ECMAScript syntax.

**Pros and Cons of Each Approach**

1. **.map()**:
	* Pros: concise, efficient (creates a new array), easy to read.
	* Cons: creates a new array, may not be suitable for large datasets due to memory constraints.
2. **iterator loop**:
	* Pros: flexible, can be used with any data structure, no memory allocation required.
	* Cons: verbose, may require more manual indexing and error handling.
3. **indexed loop (assign)**:
	* Pros: efficient (no memory allocation), easy to understand for developers familiar with traditional loops.
	* Cons: less concise than `.map()` or `forEach()`, may not be suitable for large datasets due to performance considerations.
4. **indexed loop (push)**:
	* Pros: similar to `indexed loop (assign)`, but allows for efficient use of `push()` method.
	* Cons: less readable than other approaches, may require more manual indexing and error handling.

**Other Considerations**

When choosing an iteration method, consider the trade-offs between conciseness, efficiency, memory usage, and readability. In general:

* Use `.map()` when creating a new array is acceptable and you need to perform transformations on each element.
* Choose `indexed loop (assign)` or `indexed loop (push)` for large datasets where performance and memory efficiency are crucial.
* Consider using `forEach()` instead of traditional loops when working with arrays, as it provides a more concise and readable way to iterate over elements.

**Alternatives**

Other iteration methods available in JavaScript include:

* `.forEach()`: Iterates over an array, executing a callback function for each element. (used in the benchmark)
* `Array.prototype.reduce()`: Accumulates values from an array using a callback function.
* `for...of` loop: A more modern and concise way to iterate over arrays.

Keep in mind that this is not an exhaustive list, and other iteration methods might be suitable for specific use cases or requirements.

Related benchmarks:

JS loops comparison (version: 3)

Comparing performance of: .map vs iterator loop vs indexed loop (assign) vs .forEach (assign) vs indexed loop (push) vs .forEach (push)

Created: one year ago by: Registered User

Jump to the latest result

.map

iterator loop

indexed loop (assign)

.forEach (assign)

indexed loop (push)

.forEach (push)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):