Benchmark: Array.from() vs new Array() vs push vs [i] pushup

Tests:

new Array()
new Array(500).fill("push-up", 0, 500)
Array.from()
Array.from({ length: 500 }, () => "push-up")
push
let array = []; for (let i = 0; i < 500; i++){ array.push("push-up") }
[i]
let array = []; for (let i = 0; i < 500; i++){ array[i] = "push-up" }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
new Array()
Array.from()
push
[i]

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 122 on Windows

View result in a separate tab

Test name	Executions per second
new Array()	546069.5 Ops/sec
Array.from()	28793.0 Ops/sec
push	454521.4 Ops/sec
[i]	374832.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark compares the performance of four different methods to create filled arrays in JavaScript:

1. `new Array()`
2. `Array.from()`
3. `push`
4. `[i]`

These methods are compared across multiple test cases with varying array sizes (500 elements).

**Method Comparison**

### 1. `new Array()` vs `fill()`

This method creates a new array and fills it with a specified value. In the benchmark, this is represented by `"new Array(500).fill(\"push-up\", 0, 500")`. The use of `0, 500` as the second argument allows for more control over the filling process.

Pros:

* Efficient memory allocation
* Easy to understand and implement

Cons:

* Can be slower due to JavaScript's garbage collection mechanism
* May not perform well on older browsers or with limited resources

### 2. `Array.from()`

This method creates a new array by mapping an existing iterable (in this case, the range from 0 to 499). The benchmark represents this as `"Array.from({ length: 500 }, () => \"push-up\")"`. This method provides more control over the filling process and can be faster than `new Array()`.

Pros:

* Provides more control over the filling process
* Can be faster due to its use of a generator function

Cons:

* May not perform well on older browsers or with limited resources
* Requires understanding of the iterator protocol

### 3. `push()`

This method adds elements to an existing array by calling the `push()` method on it. The benchmark represents this as `"let array = []; for (let i = 0; i < 500; i++){ array.push(\"push-up\") }"`. This method can be slower due to its use of mutation and potential overhead from the browser's implementation.

Pros:

* Easy to understand and implement
* Can be faster in some cases due to caching

Cons:

* Can be slow due to mutation and potential overhead
* May not perform well on older browsers or with limited resources

### 4. `[i]`

This method creates a new array by indexing an existing array (in this case, the range from 0 to 499). The benchmark represents this as `"let array = []; for (let i = 0; i < 500; i++){ array[i] = \"push-up\" }"`. This method provides more control over the filling process and can be faster than `new Array()`.

Pros:

* Provides more control over the filling process
* Can be faster due to its use of indexing

Cons:

* May not perform well on older browsers or with limited resources
* Requires understanding of array indices

**Library: `Array.from()`**

`Array.from()` is a method introduced in ECMAScript 2015 (ES6) that allows creating a new array from an existing iterable. It provides more control over the filling process compared to `new Array()`. In this benchmark, it's used to create an array of 500 elements filled with the string `"push-up"`.

**Special JS Feature/Syntax: `Array.from()` and generators**

`Array.from()` uses a generator function (`=> \"push-up\"`) to iterate over the range from 0 to 499. This is a new feature in ES6 that allows creating iterators using arrow functions. In this benchmark, it's used to create an array of 500 elements filled with the string `"push-up"`.

**Alternatives**

If you're interested in exploring alternative methods for creating filled arrays, here are a few options:

* `new Int8Array()` or other typed arrays: These can be more efficient than JavaScript arrays for specific use cases.
* Native Array allocation using Web Workers or WebAssembly: These allow offloading computation to separate threads or hardware, potentially improving performance.

Keep in mind that the best approach depends on your specific use case and requirements.

Related benchmarks:

Array.from() vs new Array() vs push vs [i] pushup (version: 0)

Testing the difference between creating filled arrays.

Comparing performance of: new Array() vs Array.from() vs push vs [i]

Created: 9 months ago by: Guest

Jump to the latest result

new Array()

Array.from()

push

[i]

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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