Benchmark: array spread vs concat vs from vs slice

Tests:

Array.prototype.concat
const array = [1, 2] const newArray = array.concat()
Array.prototype.from
const array = [1, 2] const newArray = Array.from(array)
Array.prototype.slice
const array = [1, 2] const newArray = array.slice(0)
spread operator
const array = [1, 2] const newArray = [...array]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
Array.prototype.from
Array.prototype.slice
spread operator

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	81250016.0 Ops/sec
Array.prototype.from	69523536.0 Ops/sec
Array.prototype.slice	103844488.0 Ops/sec
spread operator	72223480.0 Ops/sec

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.

**Benchmark Definition**

The provided JSON represents a benchmark that compares the performance of different methods for copying an array in JavaScript:

1. `array.concat()`
2. `Array.from(array)`
3. `array.slice(0)`
4. Spread operator (`[...array]`)

These methods are commonly used to create a new copy of an array, and their performance can vary depending on the browser, device, and other factors.

**Options Compared**

The benchmark compares four different options:

1. **Array.prototype.concat()**: This method creates a new array by concatenating the elements of the original array.
2. **Array.prototype.from()**: This method creates a new array from an iterable (in this case, the original array).
3. **array.slice(0)**: This method creates a new array containing only the first elements of the original array.
4. **Spread operator (`[...array]`)**: This method creates a new array by spreading the elements of the original array.

**Pros and Cons**

Here's a brief summary of each option:

1. **Array.prototype.concat()**:
	* Pros: Simple to use, well-supported in older browsers.
	* Cons: Can be slower than other methods due to the overhead of concatenating arrays.
2. **Array.prototype.from()**:
	* Pros: Fast and efficient, supports modern browsers and newer JavaScript versions.
	* Cons: May not work in older browsers or with non-array iterables.
3. **array.slice(0)**:
	* Pros: Fast and efficient for creating a new array containing only the first elements of the original array.
	* Cons: May not be suitable for creating a full copy of the array, as it only copies the initial elements.
4. **Spread operator (`[...array]`)**:
	* Pros: Simple to use, fast and efficient for creating a new array with all elements of the original array.
	* Cons: Requires modern browsers and JavaScript versions.

**Library Usage**

There is no explicit library usage in these test cases. However, if you're interested in exploring libraries that can help with array manipulation or other tasks, some popular options include:

* Lodash
* Ramda
* Underscore.js

These libraries provide a range of utility functions for working with arrays and other data structures.

**Special JS Features or Syntax**

None of the test cases use special JavaScript features or syntax beyond what's standard in modern browsers. However, if you're interested in exploring newer features like async/await, destructuring, or arrow functions, I can provide more information on those topics.

**Alternative Approaches**

If you need to compare array copying methods in a different context, here are some alternative approaches:

* Use a library like Lodash or Ramda to perform the array manipulation and compare performance.
* Implement your own custom array duplication function and test its performance using benchmarking tools like Benchmark.js.
* Compare the performance of different array copying methods using a benchmarking framework like Jest or Mocha.

Keep in mind that these alternative approaches may require additional setup, dependencies, or expertise.

Related benchmarks:

array spread vs concat vs from vs slice (version: 0)

Compare various ways of copying an array

Comparing performance of: Array.prototype.concat vs Array.prototype.from vs Array.prototype.slice vs spread operator

Created: 5 years ago by: Guest

Jump to the latest result

Array.prototype.concat

Array.prototype.from

Array.prototype.slice

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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