Benchmark: Array.slice vs Array.concat vs Spread operator

Script Preparation code:

window.testArray = [1, 'a', undefined, null, false, { a: 123 }, [1, 2, 3]];
window.arraySlice = Array.prototype.slice;
window.arrayConcat = Array.prototype.concat;

Tests:

Array.prototype.slice [direct call]
const a = window.testArray.slice();
Array.prototype.slice [saved function call]
const a = arraySlice.call(window.testArray);
Array.prototype.concat [direct call]
const a = window.testArray.concat([]);
Array.prototype.concat [saved function call]
const a = window.arrayConcat.call(window.testArray, []);
Spread operator
const a = [...window.testArray];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice [direct call]
Array.prototype.slice [saved function call]
Array.prototype.concat [direct call]
Array.prototype.concat [saved function call]
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/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.prototype.slice [direct call]	6305539.0 Ops/sec
Array.prototype.slice [saved function call]	3341683.5 Ops/sec
Array.prototype.concat [direct call]	3928783.0 Ops/sec
Array.prototype.concat [saved function call]	2555343.2 Ops/sec
Spread operator	6121413.5 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 defines a benchmark that compares three ways to create an array in JavaScript: `Array.slice()`, `Array.concat()`, and the spread operator (`...`). The benchmark is designed to measure the performance of each approach.

**Options Compared**

Here are the options being compared:

1. **Direct Call**: Calling the `slice()` method directly on the `Array` prototype.
2. **Saved Function Call**: Saving the `slice()` method in a variable (`arraySlice`) and calling it using the saved reference.
3. **Spread Operator**: Using the spread operator (`...`) to create an array.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Direct Call**:
	* Pros: Simple, intuitive syntax.
	* Cons: May incur overhead due to function lookup and binding.
2. **Saved Function Call**:
	* Pros: Reduces function lookup and binding overhead.
	* Cons: Requires an extra variable assignment and function call.
3. **Spread Operator**:
	* Pros: Simple, concise syntax that avoids explicit array creation.
	* Cons: May incur overhead due to parsing and execution of the spread operator.

**Library Usage**

None of the benchmark tests use any external libraries.

**Special JS Features or Syntax**

The test cases don't explicitly use any special JavaScript features or syntax. However, it's worth noting that the spread operator (`...`) was introduced in ECMAScript 2015 (ES6) and has become a widely supported feature across modern browsers.

**Benchmark Preparation Code**

The provided preparation code sets up the `testArray` variable with a mix of primitive values and objects, which is used to test the different array creation approaches. The `arraySlice` and `arrayConcat` variables are assigned references to the `slice()` and `concat()` methods on the `Array` prototype.

**Benchmark Results**

The latest benchmark results show that:

1. **Direct Call**: Generally slower than other approaches.
2. **Saved Function Call**: Faster than direct calls, but slightly slower than spread operator.
3. **Spread Operator**: Fastest of all three approaches.

Keep in mind that these results may vary depending on the specific browser, device platform, and operating system used to run the benchmark.

**Other Alternatives**

If you're interested in exploring alternative methods for creating arrays in JavaScript, here are a few options:

1. Using `Array.from()`: This method creates an array from an iterable source, such as an array or string.
2. Using `Array.isArray()`**: This method checks whether an object is an array.
3. Using `new Array()`: This method creates a new empty array.

These alternatives may offer different performance profiles or use cases, depending on the specific requirements of your project.

Related benchmarks:

Array.slice vs Array.concat vs Spread operator (version: 2)

Comparing performance of: Array.prototype.slice [direct call] vs Array.prototype.slice [saved function call] vs Array.prototype.concat [direct call] vs Array.prototype.concat [saved function call] vs Spread operator

Created: 6 years ago by: Registered User

Jump to the latest result

Array.prototype.slice [direct call]

Array.prototype.slice [saved function call]

Array.prototype.concat [direct call]

Array.prototype.concat [saved function call]

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