Benchmark: Array construct vs array push vs array concat

Tests:

array construct
let a = []; for(let i=0; i <= 1000; i=i+1) { a = [...a, i ]; };
array push
const a = []; for(let i=0; i <= 1000; i = i + 1) { a.push(i); };
array concat
let a = []; for(let i=0; i <= 1000; i = i + 1) { a = a.concat([i]); };

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

array push

452K/s

array concat

5K/s

array construct

2K/s

Fastest: array push (221.5x faster)

View exact numbers

✓ array push: 451,605 ops/sec
• array concat: 4,823 ops/sec
• array construct: 2,039 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 construct
array push
array concat

Fastest: N/A

Slowest: N/A

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/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

array push

490K/s

array concat

8K/s

array construct

3K/s

View exact numbers

Test name	Executions per second
✓ array push	490,039 Ops/sec
array concat	7,860 Ops/sec
array construct	3,432 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark compares three different approaches to construct an array in JavaScript: using `Array.prototype.push()`, `Array.prototype.concat()`, and creating a new array from scratch using spread syntax (`Array.prototype.slice()` is not used, but rather ` [...array, element]`).

**Test Case Comparison**

Each test case measures the performance of one specific approach:

1. **Array Construct**: This test case uses a traditional loop to create an array by pushing elements onto it.
2. **Array Push**: This test case uses the `push()` method to append elements to an existing array.
3. **Array Concat**: This test case uses the `concat()` method to merge arrays and add new elements.

**Options Compared**

The benchmark compares these three approaches, which have different performance characteristics:

* **Array Construct**: Can be slower because it involves a loop and pushing elements onto the array, which can lead to memory reallocations.
* **Array Push**: Typically faster than `Array Construct` because it only involves pushing elements onto an existing array, without the need for loop iterations or memory reallocations.
* **Array Concat**: Often slower than both `Array Construct` and `Array Push`, as it creates a new array by merging existing arrays.

**Pros and Cons of Each Approach**

Here's a brief summary:

* **Array Construct**:
	+ Pros: Simple to implement, easy to understand.
	+ Cons: Can be slow due to loop iterations and memory reallocations.
* **Array Push**:
	+ Pros: Generally fast, efficient use of existing array space.
	+ Cons: Limited control over the resulting array structure.
* **Array Concat**:
	+ Pros: Flexible for merging arrays, but can lead to slower performance.
	+ Cons: Can create a new array with additional memory usage.

**Other Considerations**

When choosing an approach:

* Use `Array Construct` when simplicity and readability are more important than performance.
* Choose `Array Push` when you need to append elements to an existing array frequently, as it tends to be faster.
* Consider using `Array Concat` for merging arrays or adding large amounts of data, but be aware that it may lead to slower performance due to memory reallocations.

**Library and Special Features**

No specific libraries are mentioned in the benchmark definition. However, JavaScript has many other useful features and built-in methods that can affect array operations, such as:

* `Array.prototype.reduce()`
* `Array.prototype.forEach()`
* `Array.prototype.map()`

These methods can provide alternative ways to manipulate arrays, but may have performance implications depending on the specific use case.

**Alternatives**

Other alternatives for constructing or manipulating arrays in JavaScript include:

* Using `Array.from()` to create an array from a iterable source
* Utilizing libraries like Lodash (which provides functions for array manipulation)
* Implementing custom solutions using various data structures and algorithms

Keep in mind that the best approach often depends on specific requirements, performance constraints, and personal coding style.

Array construct vs array push vs array concat (version: 0)

Comparing performance of: `array construct vs array push vs array concat`

Created: 6 years ago by: Guest

Go to the latest result

array construct

array push

array concat

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 construct vs array push vs array concat (version: 0)

Comparing performance of: array construct vs array push vs array concat

Created: 6 years ago by: Guest

Go to the latest result

array construct

array push

array concat

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 construct vs array push vs array concat`