Benchmark: rest parameters vs arguments1

Script Preparation code:

function h(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(...args) {
  return h.apply(this, args);
}

function h1() {
  return h.apply(this, arguments);
}

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

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark and its results in detail.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark test case, which compares two approaches to handling variable arguments: rest parameters (`rest parameter`) vs traditional function arguments (`arguments`).

**Script Preparation Code**

The script preparation code defines two functions: `h1` and `h2`. Both functions are wrappers around each other, where `h1` uses the `arguments` array, while `h2` uses rest parameters.

*   `h1`: This function applies itself to a set of arguments using `apply()`, which allows it to accept a variable number of arguments.
*   `h2`: This function is similar to `h1`, but it directly accepts a variable number of arguments (rest parameters) without the need for `apply()`.

**Html Preparation Code**

There is no HTML preparation code provided in this benchmark, as it only focuses on comparing two JavaScript approaches.

**Individual Test Cases**

The test cases are designed to measure the performance of both approaches. Each test case consists of a single iteration where:

*   A loop iterates 1000 times.
*   For every iteration, if the index (`i`) is divisible by 3 (remainder 0), an element with rest parameters (`h2('div', {class: 'foo'}, i, i + 1, i + 2)`) is pushed to an array (`els`).
*   Otherwise, an element with traditional arguments (`h1('div', {class: 'foo'}, i)`) is pushed to the same array.

**Library and Special JS Features**

There are no libraries used in this benchmark. The test cases rely solely on standard JavaScript features:

*   `arguments`: Used as traditional function arguments.
*   Rest parameters (`...args`): Introduced in ECMAScript 2015, allowing a function to accept an arbitrary number of arguments.

**Options Compared**

The two options being compared are:

1.  **Traditional Function Arguments (`arguments`)**: This approach uses the `arguments` array, which is passed implicitly when calling a function.
2.  **Rest Parameters (Variable Number of Arguments)`: This approach uses rest parameters (the `...args` syntax), allowing a function to accept an arbitrary number of arguments.

**Pros and Cons**

*   Traditional Function Arguments (`arguments`):
    *   Pros:
        *   Widespread support in older browsers.
        *   Easy to understand for developers familiar with traditional JavaScript.
    *   Cons:
        *   Not as efficient due to the need to access `arguments.length` to determine the number of arguments.
        *   Can lead to more complex error handling when dealing with variable numbers of arguments.
*   Rest Parameters (Variable Number of Arguments):
    *   Pros:
        *   More efficient and concise than traditional function arguments.
        *   Easier to handle variable numbers of arguments due to the `...args` syntax.
    *   Cons:
        *   Requires support for ECMAScript 2015 or later.
        *   May be less familiar to developers without experience with rest parameters.

**Other Considerations**

When deciding between traditional function arguments and rest parameters, consider factors such as:

*   The specific use case: If you need to handle variable numbers of arguments frequently, rest parameters might be a better choice. Otherwise, traditional function arguments might suffice.
*   Performance requirements: Rest parameters are generally more efficient due to their concise syntax.

Keep in mind that the choice between these approaches ultimately depends on your team's familiarity and the specific needs of your project.

Related benchmarks:

rest parameters vs arguments1 (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>

Fastest: N/A

Slowest: N/A

No previous run results

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