Benchmark: Array.from vs map

Tests:

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

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 45 runs

Loop push

50.3M/s

Loop

15.2M/s

Map

12.8M/s

Array.from

2.1M/s

Fastest: Loop push (23.5x faster)

View exact numbers

✓ Loop push: 50,280,936 ops/sec
• Loop: 15,199,333 ops/sec
• Map: 12,824,591 ops/sec
• Array.from: 2,140,355 ops/sec

Firefox 8 runs

Loop

30.2M/s

Map

25.5M/s

Loop push

24.3M/s

Array.from

11.6M/s

Fastest: Loop (2.6x faster)

View exact numbers

✓ Loop: 30,174,714 ops/sec
• Map: 25,484,694 ops/sec
• Loop push: 24,267,148 ops/sec
• Array.from: 11,649,374 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Map
Loop
Loop push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Loop

91.5M/s

Loop push

56.6M/s

Map

56.5M/s

Array.from

2.5M/s

View exact numbers

Test name	Executions per second
✓ Loop	91,533,640 Ops/sec
Loop push	56,585,280 Ops/sec
Map	56,453,076 Ops/sec
Array.from	2,523,831 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared options, pros and cons, and other considerations.

**Benchmarked Feature:**

The main feature being measured in this benchmark is array creation in JavaScript using different methods:

* `Array.from()`
* `map()` method
* Manual loops (using `for` loop or `push()` method)

**Comparison of Options:**

The benchmark compares the performance of three array creation methods:

1. **`Array.from()`**: Creates an array from a specified length and iterable. In this case, it's used to create an array of numbers from 0 to 9.
2. **`map()` method**: Applies a callback function to each element of an existing array, returning a new array with the results.
3. **Manual Loops**:
	* `for` loop: Uses a traditional `for` loop to iterate over the numbers and assign them to an array.
	* `push()` method: Creates an empty array and pushes each number into it using the `push()` method.

**Pros and Cons of Each Approach:**

1. **`Array.from()`**:
	* Pros: Efficient, concise, and easy to read.
	* Cons: May incur additional overhead due to the creation of an intermediate iterable object.
2. **`map()` method**:
	* Pros: Flexible, as it can be used with existing arrays or iterables.
	* Cons: Can be slower than `Array.from()` for simple array creations.
3. **Manual Loops**:
	* Pros: Provides control over the creation process and can be optimized for specific use cases.
	* Cons: More verbose and less efficient compared to `Array.from()` and `map()`.

**Other Considerations:**

* The benchmark uses Chrome 129 as the test browser, which may not be representative of all browsers.
* The device platform is set to Desktop, which may affect the results due to differences in rendering and performance.
* The operating system is Windows, which may also influence the results.
* The `executionsPerSecond` metric measures the number of iterations performed per second, providing an indication of performance.

**Library Usage:**

None of the benchmarked methods explicitly use a JavaScript library. However, it's worth noting that some libraries like Lodash or Ramda might provide similar functions (e.g., `map()`) with their own optimizations.

**Special JS Features/Syntax:**

This benchmark does not explicitly test any special JavaScript features or syntax. The focus is on comparing the performance of different array creation methods.

**Alternatives:**

Other alternatives for array creation in JavaScript include:

* Using `Array.prototype.fill()` to create an array filled with a specific value.
* Utilizing WebAssembly (WASM) modules to perform efficient array operations.
* Leveraging specialized libraries like NumJS or jsArray, which are designed for numerical computations and provide optimized array implementations.

Keep in mind that the choice of array creation method depends on the specific use case and performance requirements.

Array.from vs map (version: 0)

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

Created: 5 years ago by: Guest

Go to the latest result

Array.from

Map

Loop

Loop push

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 45 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array.from vs map (version: 0)

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

Created: 5 years ago by: Guest

Go to the latest result

Array.from

Map

Loop

Loop push

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 45 runs

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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