Benchmark: Array.from vs map vs Array.from then map

Tests:

Array.from
Array.from({ length: 1000 }, i => i)
Map
new Array(1000).map(i => i);
Loop
const arr = new Array(1000); for (let i = 0; i < 1000; i++) arr[i] = i
Loop push
const arr = [] for (let i = 0; i < 1000; i++) arr.push(i)
Array.from and Map
Array.from({ length: 1000 }).map(i => i);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Map
Loop
Loop push
Array.from and Map

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.3

View result in a separate tab

Test name	Executions per second
Array.from	353201.8 Ops/sec
Map	44316.6 Ops/sec
Loop	718241.4 Ops/sec
Loop push	222875.8 Ops/sec
Array.from and Map	188969.1 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition**

The benchmark is comparing four different approaches to generate an array of numbers from 0 to 999:

1. `Array.from()`
2. `map()` method
3. Manual loop using a for loop (`for...of`)
4. Manual loop with `push()` method

These approaches are being compared to determine which one is the most efficient.

**Options Compared**

The options being compared are:

* `Array.from()`: Creates a new array from an iterable (in this case, a constructor function that generates numbers from 0 to 999).
* `map()`: Applies a callback function to each element of an array and returns a new array with the results.
* Manual loop using a for loop: Iterates over a counter variable and assigns it to each element in the array.
* Manual loop with `push()` method: Uses a for loop to iterate over a counter variable and pushes each number onto the end of the array.

**Pros and Cons**

Here are some pros and cons of each approach:

* `Array.from()`:
	+ Pros: Easy to use, concise syntax, can create an array from an iterable.
	+ Cons: May be slower than other approaches due to the overhead of creating a new array.
* `map()` method:
	+ Pros: Efficient and concise way to transform arrays, can handle large datasets.
	+ Cons: Creates a new array, which may not be desirable for very large datasets or memory-constrained environments.
* Manual loop using a for loop:
	+ Pros: Easy to understand and implement, allows for fine-grained control over the iteration process.
	+ Cons: Can be slower than other approaches due to the overhead of the loop and manual indexing.
* Manual loop with `push()` method:
	+ Pros: Can handle large datasets without creating a new array, provides a simple way to append elements to an array.
	+ Cons: May require more manual memory management, can be slower than other approaches.

**Library Usage**

In this benchmark, there is no explicit library usage. However, the `Array.from()` method uses the `Constructor` API to create an iterable that generates numbers from 0 to 999.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other Considerations**

When evaluating the performance of these approaches, it's essential to consider factors such as:

* Memory allocation and deallocation
* Cache locality
* Branch prediction
* Loop unrolling and parallelization

In modern JavaScript engines, caching and loop unrolling are often enabled by default, which can affect the performance of each approach.

**Alternative Approaches**

Other approaches to generating an array of numbers from 0 to 999 might include:

* Using `reduce()` method to accumulate elements into a single array
* Using `Promise.all()` or other concurrency control mechanisms to parallelize the iteration process
* Utilizing WebAssembly (WASM) and Just-In-Time (JIT) compilation for improved performance

However, these approaches are not typically used in simple benchmarking scenarios like this one.

I hope this explanation helps!

Related benchmarks:

Array.from vs map vs Array.from then map (version: 0)

Comparing performance of: Array.from vs Map vs Loop vs Loop push vs Array.from and Map

Created: 2 years ago by: Guest

Jump to the latest result

Array.from

Map

Loop

Loop push

Array.from and Map

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