Benchmark: Array Shallow Copy: Array.prototype.slice() vs. Array.prototype.concat() vs. Spread syntax vs. Array.from()

Script Preparation code:

var arr = Array(10_000).fill(undefined).map((_, idx) => idx)

Tests:

Array.prototype.slice()
const newArr = arr.slice(0);
Array.prototype.concat()
const newArr = arr.concat([]);
Spread syntax
const newArr = [...arr];
Array.from()
const newArr = Array.from(arr);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice()
Array.prototype.concat()
Spread syntax
Array.from()

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice()	350973.5 Ops/sec
Array.prototype.concat()	182203.2 Ops/sec
Spread syntax	342559.0 Ops/sec
Array.from()	309849.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark measures the performance of four different approaches for creating a shallow copy of an array in JavaScript: `Array.prototype.slice()`, `Array.prototype.concat()`, the spread syntax (`...`), and `Array.from()`.

**Options Compared**

1. **`Array.prototype.slice()`**: This method returns a new array containing all elements from the original array, starting at the specified index.
2. **`Array.prototype.concat()`**: This method returns a new array containing all elements from the original array and possibly additional elements passed as arguments.
3. **Spread syntax (`...`)**: This syntax creates a new array by spreading the elements of the original array into the new array.
4. **`Array.from()`**: This static method creates a new array from an array-like or iterable object.

**Pros and Cons**

1. **`Array.prototype.slice()`**:
	* Pros: simple, widely supported, and efficient for shallow copies.
	* Cons: can be slower than other methods for large arrays.
2. **`Array.prototype.concat()`**:
	* Pros: flexible, allows for concatenation with additional elements.
	* Cons: slower than `slice()` for shallow copies, as it creates a new array with all elements from the original array and possibly additional ones.
3. **Spread syntax (`...`)**:
	* Pros: concise, efficient, and widely supported.
	* Cons: can be less readable for complex cases, and not supported in older browsers or environments.
4. **`Array.from()`**:
	* Pros: flexible, efficient, and widely supported.
	* Cons: can be slower than `slice()` for shallow copies, as it creates a new array from an iterable object.

**Library and Purpose**

None of the methods use external libraries in this benchmark.

**Special JS Features or Syntax**

The benchmark uses the spread syntax (`...`), which is a relatively recent addition to JavaScript. It allows creating new arrays by spreading elements from an existing array into the new array.

**Other Alternatives**

Besides the four methods mentioned, other approaches for creating shallow copies of arrays in JavaScript include:

* Using `JSON.parse(JSON.stringify(arr))`, but this method can be slower and less efficient than the others.
* Using a custom implementation with a loop or recursion to copy individual elements from the original array.

However, these alternatives are not included in this benchmark.

Related benchmarks:

Array Shallow Copy: Array.prototype.slice() vs. Array.prototype.concat() vs. Spread syntax vs. Array.from() (version: 1)

Comparing performance of: Array.prototype.slice() vs Array.prototype.concat() vs Spread syntax vs Array.from()

Created: 2 years ago by: Registered User

Jump to the latest result

Array.prototype.slice()

Array.prototype.concat()

Spread syntax

Array.from()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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