Benchmark: Array.prototype.slice vs spread operator - Large Arrays

Script Preparation code:

numArray = [];
stringArray = [];
for (let a = 0; a < 10000; a ++) {
  numArray.push(a);
  stringArray.push("Hello World");
}

Tests:

Array.prototype.slice - 10k Numbers
var params = numArray; var other = params.slice();
spread operator - 10k Numbers
var params = numArray; var other = [ ...params ];
Array.prototype.slice - 10k Strings
var params = stringArray; var other = params.slice();
spread operator - 10k Strings
var params = stringArray; var other = [ ...params ];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice - 10k Numbers
spread operator - 10k Numbers
Array.prototype.slice - 10k Strings
spread operator - 10k Strings

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

Browser/OS: Chrome 118 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice - 10k Numbers	820037.3 Ops/sec
spread operator - 10k Numbers	836665.7 Ops/sec
Array.prototype.slice - 10k Strings	849478.9 Ops/sec
spread operator - 10k Strings	844731.2 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents a benchmark test for comparing the performance of two approaches: using `Array.prototype.slice()` and the new ES6 spread operator (`[ ...array ]`) on large arrays.

**What is being tested?**

In this test, four scenarios are compared:

1. `Array.prototype.slice()` with a large array of numbers (10,000 elements)
2. `Array.prototype.slice()` with a large array of strings (10,000 elements)
3. The new ES6 spread operator (`[ ...array ]`) with a large array of numbers (10,000 elements)
4. The new ES6 spread operator (`[ ...array ]`) with a large array of strings (10,000 elements)

**Options being compared:**

* `Array.prototype.slice()`: A traditional method for creating a shallow copy of an array.
* The new ES6 spread operator (`[ ...array ]`): A shorthand way to create a new array by spreading the elements of an existing array.

**Pros and cons of each approach:**

* `Array.prototype.slice()`: Pros:
	+ Widely supported in older browsers and versions of JavaScript.
	+ Can be used with any type of data (arrays, objects, etc.).
* Cons:
	+ Can be slower than the spread operator for large arrays due to the overhead of creating a new array object and copying elements.
	+ Does not preserve the original array's prototype chain.
* The new ES6 spread operator (`[ ...array ]`): Pros:
	+ Faster execution time compared to `Array.prototype.slice()` for large arrays, as it avoids the overhead of creating a new array object and copying elements.
	+ Preserves the original array's prototype chain.
* Cons:
	+ Requires support for modern JavaScript versions (ECMAScript 2018 or later).
	+ May not work in older browsers or environments that do not support the spread operator.

**Library usage:**

None of the tests use any external libraries. The benchmark only relies on built-in JavaScript features and arrays.

**Special JS feature or syntax:**

The tests utilize the new ES6 spread operator (`[ ...array ]`), which is a modern JavaScript feature introduced in ECMAScript 2018. This feature is not supported in older browsers or versions of JavaScript, making it an interesting comparison point for performance testing.

**Other alternatives:**

For this specific benchmark, alternative approaches could include:

* Using `Array.prototype.slice()` with options (e.g., `slice(0, 10000)` to create a shallow copy of the entire array).
* Using other array methods, such as `Array.prototype.map()` or `Array.prototype.filter()`, which might have different performance characteristics.
* Using a library like Lodash or Underscore.js, which provide additional utility functions for working with arrays.

However, these alternatives would likely require significant changes to the benchmark setup and test cases, making them less suitable for direct comparison with the original spread operator implementation.

Related benchmarks:

Array.prototype.slice vs spread operator - Large Arrays (version: 0)

Compare the new ES6 spread operator with the traditional slice() method on larger arrays

Comparing performance of: Array.prototype.slice - 10k Numbers vs spread operator - 10k Numbers vs Array.prototype.slice - 10k Strings vs spread operator - 10k Strings

Created: one year ago by: Guest

Jump to the latest result

Array.prototype.slice - 10k Numbers

spread operator - 10k Numbers

Array.prototype.slice - 10k Strings

spread operator - 10k Strings

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