Benchmark: Spread operator vs apply

Script Preparation code:

function test() { console.log(arguments[arguments.length - 1]); }
var using = (new Array(200)).fill(null).map((e, i) => (i));

Tests:

spread
test(...using);
apply
test.apply(null, using)

Historical Performance Data aggregated from 171 community runs

Desktop Results:

Chrome 114 runs

spread

267K/s

apply

266K/s

View exact numbers

✓ spread: 266,723 ops/sec
• apply: 266,244 ops/sec

Firefox 37 runs

spread

240K/s

apply

211K/s

Fastest: spread (1.1x faster)

View exact numbers

✓ spread: 240,388 ops/sec
• apply: 211,025 ops/sec

Safari 12 runs

apply

1.1M/s

spread

840K/s

Fastest: apply (1.3x faster)

View exact numbers

✓ apply: 1,067,664 ops/sec
• spread: 840,066 ops/sec

Mobile Results:

Chrome 8 runs

spread

59K/s

apply

56K/s

View exact numbers

✓ spread: 59,023 ops/sec
• apply: 56,392 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
apply

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Browser/OS: Chrome 142 on Windows

View result in a separate tab

spread

433K/s

apply

427K/s

View exact numbers

Test name	Executions per second
✓ spread	432,527 Ops/sec
apply	426,882 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The benchmark is designed to compare two ways of calling a function with arbitrary arguments dynamically: using the spread operator (`...`) and `apply()`. The goal is to determine which approach is faster.

**Script Preparation Code**

The script preparation code defines a simple function `test()` that takes an array of arguments as input. It then uses the spread operator to extract the last argument from the array, or `apply()` with `null` as the context and the `using` array as the arguments.

```javascript
function test() { console.log(arguments[arguments.length - 1]); }

var using = (new Array(200)).fill(null).map((e, i) => (i));
```

The `using` array is created by mapping over an array of 200 elements with values from 0 to 199. This creates a large array that will be passed as arguments to the `test()` function.

**Test Cases**

There are two test cases:

1. **"spread"`: This test case uses the spread operator (`...`) to call the `test()` function with the `using` array as arguments.
2. **"apply"`: This test case uses `apply()` to call the `test()` function with `null` as the context and the `using` array as arguments.

**Library Used**

None, this benchmark does not rely on any external libraries.

**Special JS Feature/Syntax**

The spread operator (`...`) is a feature introduced in ECMAScript 2015. It allows you to pass an array of values as separate arguments to a function.

**Pros and Cons of Different Approaches**

1. **Spread Operator (`...`)**:
	* Pros: concise, readable, and efficient.
	* Cons: performance might be slower compared to `apply()`, especially for large arrays.
2. **`apply()`**:
	* Pros: can be faster than the spread operator, as it avoids creating a new array.
	* Cons: less concise and readable, requires manual management of the context.

**Other Considerations**

When considering this benchmark, keep in mind that:

* The size of the `using` array (200 elements) is significant, which may impact performance differences between the two approaches.
* Modern JavaScript engines like V8 (used by Chrome) are optimized for performance and might mitigate any performance differences between these two approaches.

**Alternatives**

Other alternatives to compare in a similar benchmark could be:

1. **Destructuring assignment**: Instead of using `apply()`, you could use destructuring assignment to extract the arguments from the array.
2. **`rest parameter` syntax**: You could use the rest parameter syntax (`...args`) instead of the spread operator, which might offer better performance for large arrays.

To prepare a similar benchmark, you would need to:

1. Define a new function with arbitrary arguments dynamically.
2. Create an array of values that will be passed as arguments to the function.
3. Use different methods (e.g., `apply()`, spread operator, destructuring assignment, rest parameter syntax) to call the function and compare their performance.

By running such benchmarks, you can gain insights into the performance characteristics of different JavaScript features and writing styles.

Spread operator vs apply (version: 0)

Compare the differing ways you can call a function with arbitrary arguments dynamically

Comparing performance of: `spread vs apply`

Created: 7 years ago by: Guest

Go to the latest result

spread

apply

Historical Performance Data aggregated from 171 community runs

Desktop Results:

Chrome 114 runs

Firefox 37 runs

Safari 12 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Spread operator vs apply (version: 0)

Compare the differing ways you can call a function with arbitrary arguments dynamically

Comparing performance of: spread vs apply

Created: 7 years ago by: Guest

Go to the latest result

spread

apply

Historical Performance Data aggregated from 171 community runs

Desktop Results:

Chrome 114 runs

Firefox 37 runs

Safari 12 runs

Mobile Results:

Chrome 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `spread vs apply`