Benchmark: rest parameters vs arguments (no extra args) actual test

Script Preparation code:

window.els = [];

function t1() {
  window.els.push(...arguments);
}

function t2(...args) {
  window.els.push(...args);
}

Tests:

arguments
window.els.length = 0; for (let i = 0; i < 2000; i++) { t1('div', {class: 'foo'}, i, i + 1, i + 2); }
rest parameter
window.els.length = 0; for (let i = 0; i < 2000; i++) { t2('div', {class: 'foo'}, i, i + 1, i + 2); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
arguments
rest parameter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Windows

View result in a separate tab

Test name	Executions per second
arguments	5085.1 Ops/sec
rest parameter	9363.4 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

LLMs can make mistakes. Check important info.

The benchmark compares two different methods of handling function parameters in JavaScript: using the `arguments` object and using rest parameters (`...args`). Both methods are designed to handle variable numbers of arguments in a function, but they do so in different ways.

### Comparison of Options

1. **Using the `arguments` object (Function `t1`)**:
   - **Definition**: The `arguments` object is an array-like object available inside functions that contains the values of the arguments passed to that function.
   - **Test Case**: The benchmark runs a loop 2000 times, invoking the function `t1` and using `arguments` to gather the function parameters before pushing them into the `window.els` array.
   - **Pros**:
     - Available in all non-arrow functions.
     - Does not require any special syntax.
   - **Cons**:
     - Not an actual array; it has limited functionality and must be converted to an array before using array methods (like `slice`).
     - Can be less performant due to its nature as an array-like object, depending on the JavaScript engine's optimizations.

2. **Using rest parameters (Function `t2`)**:
   - **Definition**: Introduced in ES6, rest parameters allow you to represent an indefinite number of arguments as an actual array, making it easy to work with them.
   - **Test Case**: The benchmark runs the same loop 2000 times but calls the function `t2` with rest parameters, which collects the arguments in an array (`args`) before pushing.
   - **Pros**:
     - More modern and syntactically clean.
     - Allows direct use of real array methods without needing conversion.
     - Easier to read and maintain.
   - **Cons**:
     - Slightly less supported in very old browsers (though this is minimal today).

### Benchmark Results

From the benchmark results:
- The `rest parameters` (function `t2`) executed approximately 40,304 times per second.
- The `arguments` (function `t1`) executed approximately 14,473 times per second.

This shows a significant performance advantage for the rest parameters approach. The results indicate that modern JavaScript engines have optimized rest parameters better compared to the traditional `arguments` object.

### Key Considerations

- **Performance**: The benchmark indicates a clear performance difference favoring rest parameters. For performance-sensitive code, especially in iterative loops or frequently called functions, rest parameters may be preferable.
  
- **Code Readability**: Beyond performance, code readability and maintainability should consider. The syntax for rest parameters is clearer to someone unfamiliar with JavaScript function argument handling.

### Alternatives

Other alternatives for handling function parameters include:
- Traditional method overloading (using multiple function definitions) — but JavaScript does not support this natively.
- ES6 destructuring can be used in conjunction with rest parameters for structured data and parameter handling.
- Function closures or binding contexts (with `bind`) can also alter how parameters are handled but shouldn’t be confused with variadic parameter approaches.

In summary, this benchmark effectively highlights the differences between legacy and modern approaches to handling variable-length arguments in JavaScript functions, revealing significant differences in performance and code quality.

Related benchmarks:

rest parameters vs arguments (no extra args) actual test (version: 1)

Comparing performance of: arguments vs rest parameter

Created: 10 months ago by: Guest

Jump to the latest result

arguments

rest parameter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):