Benchmark: Array push vs concat

Script Preparation code:

var keyCount = 16384
var keys = []

// Hide lookup keys to prevent V8 cheating (AKA Optimizing)
var getConspicuousKey = seed => keys[Math.floor(seed * keyCount)]

// Setup out test objects w/ random values
for (let i = 0; i < keyCount; i++) {
  keys.push(Math.random())
}

Tests:

concat
const arr1 = []; const arr2 = []; for(let i = 0; i < keyCount; i++) { arr1.push(getConspicuousKey(Math.random())); } for(let i = 0; i < keyCount; i++) { arr2.push(getConspicuousKey(Math.random())); } const result = arr1.concat(arr2)
push
const arr1 = []; for(let i = 0; i < keyCount; i++) { arr1.push(getConspicuousKey(Math.random())); } for(let i = 0; i < keyCount; i++) { arr1.push(getConspicuousKey(Math.random())); } const result = arr1

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
push

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is tested?**

The provided benchmark tests two approaches to adding elements to an array: `push` and `concat`. The test creates two arrays, `arr1` and `arr2`, and populates them with random values using a custom function `getConspicuousKey`. The main difference between the two test cases is how the second array is populated.

**Options compared**

There are two options being compared:

1. **Array.push**: This method adds one or more elements to the end of an array and returns the new length of the array.
2. **Array.concat**: This method creates a new array by concatenating two or more arrays and returns the new array.

**Pros and cons**

* **push**:
	+ Pros: More efficient, as it avoids creating a new array and instead modifies the existing one.
	+ Cons: Can be slower due to the overhead of modifying an array's internal structure.
* **concat**:
	+ Pros: Easier to read and understand, as it creates a new array without modifying an existing one.
	+ Cons: Less efficient, as it creates a new array, which can lead to higher memory usage.

In general, `push` is faster than `concat`, but the difference may not be significant for small arrays. For larger arrays, `push` becomes increasingly efficient, while `concat` remains slower.

**Library and purpose**

The test uses no external libraries, so no additional functionality or dependencies are introduced.

**Special JS feature or syntax**

There's a special feature at play here: **v8 cheating (Optimizing)**. The author of the benchmark intentionally adds some code to hide the lookup keys in `keys` array from V8 (the JavaScript engine used by Google Chrome) to prevent optimization. This allows MeasureThat.net to measure the performance difference between these two methods without V8 optimizing away one of them.

**Other considerations**

When writing benchmarks like this, it's essential to consider the following:

* **Warm-up**: Make sure the test environment is warm enough before running the benchmark.
* **Randomization**: Use random values or numbers to make the benchmark more representative and less prone to caching.
* **Multiple runs**: Run the benchmark multiple times to ensure reliable results.

**Alternatives**

If you want to compare other array methods, such as:

* `splice`
* `unshift`
* `reduce`

or explore other array operations, MeasureThat.net offers a vast range of benchmarks and tests for various JavaScript engines.

Related benchmarks:

Array push vs concat (version: 0)

Comparing performance of: concat vs push

Created: 4 years ago by: Guest

Jump to the latest result

concat

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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