Benchmark: rest parameters vs arguments

Script Preparation code:

function h1(tag, props) {
    props = Object.assign({}, props);
    let length = arguments.length;
    if (length > 3) {
        const children = [];
        while (length-- > 2) {
            children[length - 2] = arguments[length];
        }
        props.children = children;
    } else if (length === 3) {
        props.children = arguments[2];
    }
    return {
        tag,
        props
    };
}

function h2(tag, props, ...children) {
    props = Object.assign({}, props);
    if (children.length > 1) {
        props.children = children;
    } else if (children.length === 1) {
        props.children = children[0];
    }
    return {
        tag,
        props
    };
}

Tests:

arguments
const els = []; for (let i = 0; i < 1000; i++) { if (i % 3 === 0) { els.push(h1('div', {class: 'foo'}, i, i + 1, i + 2)); } else { els.push(h1('div', {class: 'foo'}, i)); } }
rest parameter
const els = []; for (let i = 0; i < 1000; i++) { if (i % 3 === 0) { els.push(h2('div', {class: 'foo'}, i, i + 1, i + 2)); } else { els.push(h2('div', {class: 'foo'}, i)); } }

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

Autogenerated LLM Sumamry (model llama3.2:3b, generated 10 days ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested, compared, and some pros and cons of each approach.

**Benchmark Definition**

The benchmark definition compares two approaches to handling variable-length argument lists in JavaScript functions: `arguments` and rest parameters (`...`).

**Script Preparation Code**

The script preparation code consists of two functions: `h1` and `h2`. Both functions take a `tag`, `props` object, and one or more additional arguments. The main difference between the two is how they handle the variable-length argument list.

In `h1`, if the length of the argument list is greater than 3, it extracts the last three arguments (in reverse order) and assigns them to a new `children` array. If the length is exactly 3, it assigns the third argument directly to the `props.children` property. Otherwise, it doesn't do anything.

In `h2`, if the number of additional arguments is greater than 1, it assigns all but the first argument to the `props.children` property. If there's only one argument left, it assigns that argument directly to the `props.children` property.

**Html Preparation Code**

The HTML preparation code is empty in this case.

**Individual Test Cases**

Each test case consists of a single benchmark definition and a test name. The definitions are similar to the script preparation code but without the additional arguments. They create an array `els` and push either `h1` or `h2` instances with varying numbers of arguments (0, 1, or 2).

**Comparison**

The comparison is between two approaches:

1. **Arguments**: Using the traditional `arguments` object to access variable-length argument lists.
2. **Rest Parameters (`...`)**: Using rest parameters to define a function that can accept any number of additional arguments.

**Pros and Cons**

Here are some pros and cons of each approach:

**Arguments**

Pros:

* Easy to understand and use, especially for older JavaScript versions.
* Well-supported in most browsers.

Cons:

* Can lead to slower performance due to the overhead of accessing the `arguments` object.
* Can be more verbose when dealing with complex argument lists.

**Rest Parameters (`...`)**

Pros:

* More concise and expressive than traditional `arguments`.
* Allows for easier handling of variable-length argument lists.
* Generally faster performance since it avoids the overhead of accessing the `arguments` object.

Cons:

* Requires support for modern JavaScript versions (ES6+).
* Can be less intuitive for developers unfamiliar with rest parameters.

**Other Considerations**

When to use each approach depends on the specific use case, personal preference, and the level of support you need from browsers. If you're targeting older browsers or prefer a more traditional approach, `arguments` might be a better choice. However, if you're building modern web applications with ES6+ support, rest parameters are likely a better fit.

**Library Used (None)**

There is no specific library mentioned in the benchmark definition or test cases. Both functions (`h1` and `h2`) appear to be simple custom implementations.

**Special JS Feature or Syntax**

Rest parameters (`...`) were introduced in ES6 and are a new syntax feature for defining variable-length argument lists. This means that if you're targeting older browsers without support for ES6+, you might need to use the `arguments` approach instead.

Other alternatives for handling variable-length argument lists include:

* Using an array or object to store arguments, as shown in some of the test cases.
* Implementing a custom solution using loops and conditional statements, which is not used in this benchmark.

Keep in mind that the performance comparison between these approaches can be influenced by various factors, such as browser support, JavaScript engine optimizations, and specific use cases.

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
arguments	4049.8 Ops/sec
rest parameter	4669.1 Ops/sec

Related benchmarks:

rest parameters vs arguments (version: 0)

Comparing performance of: arguments vs rest parameter

Created: 3 years ago by: Guest

Jump to the latest result

arguments

rest parameter

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 10 days ago):