Benchmark: Array concat vs spread operator vs push 100k v2

Script Preparation code:

const arrayLength = 100000;

// Function to generate random data (number, string, or boolean)
const getRandomData = () => {
  const randomNumber = Math.floor(Math.random() * 1000); // Random number between 0 and 999
  const randomString = Math.random().toString(36).substring(7); // Random string
  const randomBoolean = Math.random() < 0.5; // Random boolean (true or false)

  // Randomly choose one of the three data types
  const randomDataType = [randomNumber, randomString, randomBoolean][
    Math.floor(Math.random() * 3)
  ];

  return randomDataType;
};

var largeArray1 = Array.from({ length: arrayLength }, () => getRandomData());
var largeArray2 = Array.from({ length: arrayLength }, () => getRandomData());

Tests:

Array.prototype.concat
var other = largeArray1.concat(largeArray2);
spread operator
var other = [...largeArray1, ...largeArray2]
Push with new array
const newArray = []; var other = newArray.push(...largeArray2);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push with new array

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

Browser/OS: Chrome 115 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	8550.2 Ops/sec
spread operator	1215.2 Ops/sec
Push with new array	1102.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark compares the performance of three methods to concatenate or push data onto an array in JavaScript:

1. **`Array.prototype.concat()`**: The traditional method for concatenating two arrays.
2. **Spread Operator (`...`)**: The new ES6 spread operator, introduced in ECMAScript 2015, allows for creating a new array by spreading elements from existing arrays or iterables.
3. **`push()` with a new array**: Using the `push()` method to add all elements of another array to the end of the current array.

**Comparison Options**

The benchmark compares these three methods on large arrays of 100,000 random data points (numbers, strings, and booleans).

**Pros and Cons**

1. **`Array.prototype.concat()`**:
	* Pros: Well-established and widely supported.
	* Cons: Can be slow for very large arrays due to the overhead of creating a new array.
2. **Spread Operator (`...`)**:
	* Pros: Fast and efficient, especially for smaller arrays. Creates a new array in memory.
	* Cons: May not be as readable or maintainable for complex concatenations.
3. **`push()` with a new array**:
	* Pros: Similar to the spread operator, but can be more concise and readable.
	* Cons: Can be slower than the spread operator due to the overhead of creating a new array.

**Library**

None mentioned in this benchmark.

**Special JS Features or Syntax**

The benchmark uses modern JavaScript features:

1. **ES6 Spread Operator (`...`)**: Introduced in ECMAScript 2015.
2. **`const` and `let` declarations**: Used for declaring variables with block scope.
3. **Arrow functions**: Used for concise function definitions.

**Other Alternatives**

If you need to concatenate or push data onto an array, other alternatives include:

1. **`Array.prototype.push()` alone**: Without spreading elements from another array.
2. **Using `reduce()` method**: To concatenate or merge arrays iteratively.
3. **Implementing a custom concatenation function**: Using low-level array manipulation techniques.

Keep in mind that the performance differences between these methods are usually negligible for small to medium-sized arrays, but can become significant for very large datasets.

Related benchmarks:

Array concat vs spread operator vs push 100k v2 (version: 0)

Compare the new ES6 spread operator with the traditional concat() method and push

Comparing performance of: Array.prototype.concat vs spread operator vs Push with new array

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push with new array

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