Benchmark: for...of vs map vs loop for create new data

Script Preparation code:

var array = Array.from({ length: 10000 }, (_, i) => ({ id: i }))

Tests:

for...of
const result = [] for (const e of array) { result.push({ id: e.id + 1 }) }
map
const result = array.map(e => ({ id: e.id + 1 }))
for
const result = [] for (let i = 0; i < array.length; i++) { result.push({ id: array[i].id + 1 }) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for...of
map
for

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark definition and test cases.

**Benchmark Definition:**

The benchmark is designed to compare three approaches for creating new data:

1. `for...of` loop
2. `map()` function
3. `for` loop (with manual indexing)

**Options Comparison:**

The benchmark compares the execution times of these three approaches for creating a new array with 10,000 elements, where each element is an object with an `id` property. The `id` value is incremented by 1 for each iteration.

**Pros and Cons:**

* **for...of loop:** This approach uses the "for...of" loop, which is a more modern and readable way to iterate over arrays in JavaScript. However, it might not be as efficient as manual indexing or the `map()` function.
	+ Pros: More readable, easier to maintain
	+ Cons: Might be slower than other approaches due to the overhead of the loop
* **map() function:** The `map()` function is a built-in array method that applies a transformation function to each element in an array. It returns a new array with the transformed elements.
	+ Pros: Efficient, concise, and expressive
	+ Cons: Might not be suitable for all types of data or transformations
* **for loop (manual indexing):** This approach uses a traditional `for` loop with manual indexing to iterate over the array.
	+ Pros: Fastest execution time due to minimal overhead
	+ Cons: More verbose and less readable than other approaches

**Library Used:**

None mentioned in the benchmark definition. However, it's worth noting that the `Array.from()` method is used to create a new array with 10,000 elements.

**Special JS Features or Syntax:**

The benchmark uses the `for...of` loop, which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows iterating over arrays and other iterable objects using a more concise syntax.

In contrast, the `map()` function has been part of the JavaScript standard library since ES3, and its usage is more widespread than the `for...of` loop.

**Alternatives:**

If you're interested in exploring alternative approaches for creating new data, here are some options:

* Using a `forEach()` loop or a recursive function (not included in the benchmark)
* Utilizing `reduce()` method to create an array from an iterable
* Leveraging libraries like Lodash or Ramda for functional programming

Keep in mind that the choice of approach depends on your specific use case, performance requirements, and personal preference.

Latest run results:

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

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

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
for...of	26807.3 Ops/sec
map	37215.8 Ops/sec
for	1585.6 Ops/sec

Related benchmarks:

for...of vs map vs loop for create new data (version: 0)

Comparing performance of: for...of vs map vs for

Created: one year ago by: Registered User

Jump to the latest result

for...of

map

for

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):