Benchmark: Array vs Map - MeasureThat.net

Tests:

JS Array set
const jsArray = Array.from({ length: 1000 }, (_, i) => ({ id: i, a: 1, b: 2, timeMs: 0, })); // * update jsArray timeMs with 1 jsArray.forEach((item) => (item.timeMs = 1));
JS Array map
const jsArray = Array.from({ length: 1000 }, (_, i) => ({ id: i, a: 1, b: 2, timeMs: 0, })); // * update jsArray timeMs with jsArray.map const jsArrayMap = jsArray.map((item) => ({ ...item, timeMs: 1 }));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JS Array set
JS Array map

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
JS Array set	32848.7 Ops/sec
JS Array map	23870.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

MeasureThat.net is testing two different approaches for updating an array in JavaScript: using the `forEach` method and using the `map` method. The benchmark compares the performance of these two approaches on a large array with 1000 elements.

**Options compared**

There are two options being compared:

1. **Array.forEach**: This method updates each element in the array by iterating through it, which can be slow for large arrays.
2. **Array.map**: This method creates a new array with the updated values without modifying the original array, which is generally faster.

**Pros and Cons**

* **Array.forEach**:
	+ Pros: Can update each element individually, potentially more efficient for small updates.
	+ Cons: Iterates through the entire array, making it slower for large arrays.
* **Array.map**:
	+ Pros: Creates a new array with updated values without modifying the original array, making it faster for large arrays.
	+ Cons: Can be memory-intensive if dealing with very large datasets.

**Library and purpose**

In this benchmark, no specific library is used. The benchmark focuses on native JavaScript methods.

**Special JS feature or syntax**

There are no special JavaScript features or syntax being tested in this benchmark. However, it's worth noting that the `map` method uses a more modern, concise syntax, which may be considered a minor optimization by some developers.

**Other alternatives**

Other approaches for updating an array could include:

* Using a loop with an index variable (e.g., `for (var i = 0; i < arr.length; i++) { arr[i].timeMs = 1 }`)
* Using the `reduce` method to update each element individually
* Using a library like Lodash or Underscore.js, which provides utility functions for array operations

Keep in mind that these alternatives may have different performance characteristics compared to the `forEach` and `map` methods.

**Benchmark preparation code**

The benchmark preparation code is minimal, as it only initializes an array of 1000 elements using `Array.from`. The `forEach` and `map` tests then update this array by setting a specific property (`timeMs`) to 1.

Related benchmarks:

Array vs Map (version: 0)

JS Array operation vs Map

Comparing performance of: JS Array set vs JS Array map

Created: 2 years ago by: Guest

Jump to the latest result

JS Array set

JS Array map

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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