Benchmark: rest parameters vs arguments2

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 < 100000; 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 < 100000; 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.

Let's dive into the explanation of the provided benchmark.

**Benchmark Definition**

The benchmark is designed to compare two approaches: using `arguments` and using rest parameters (`...args`) in JavaScript functions. The test case, "rest parameters vs arguments2", consists of a preparation code that defines two functions, `h` and `h2`, which are used to create HTML elements with varying numbers of attributes.

**Preparation Code**

The preparation code is:
```javascript
function h(tag, props) {
  // ...
}

function h2(...args) {
  return h.apply(this, args);
}
```
Here, the `h` function takes two arguments: a tag and an object with properties. If the length of the arguments is greater than 3, it extracts the last three arguments and assigns them to `children`. For lengths less than or equal to 3, it directly uses the arguments.

The `h2` function uses the rest parameter syntax (`...args`) to accept a variable number of arguments and passes them to the `h` function using `apply`.

**Test Cases**

There are two test cases:

1. "arguments"
```javascript
const els = [];
for (let i = 0; i < 100000; i++) {
  if (i % 3 === 0) {
    els.push(h1('div', {class: 'foo'}, i, i + 1, i + 2));
  } else {
    els.push(h1('div', {class: 'foo'}, i));
  }
}
```
This test case uses the `arguments` syntax to pass variables as separate arguments.

2. "rest parameter"
```javascript
const els = [];
for (let i = 0; i < 100000; i++) {
  if (i % 3 === 0) {
    els.push(h2('div', {class: 'foo'}, i, i + 1, i + 2));
  } else {
    els.push(h2('div', {class: 'foo'}, i));
  }
}
```
This test case uses the rest parameter syntax (`...args`) to pass variables as a single array.

**Benchmark Results**

The latest benchmark results show that:

* For "arguments", Chrome 117 on Desktop (Mac OS X 10.15.7) executed approximately 47.46 executions per second.
* For "rest parameter", Chrome 117 on Desktop (Mac OS X 10.15.7) executed approximately 47.02 executions per second.

**Pros and Cons**

**Arguments:**

Pros:

* Easy to understand and implement for developers familiar with the syntax.
* Compilers can generate efficient code for this syntax.

Cons:

* This syntax is not as flexible or expressive as rest parameters, requiring separate arguments for each variable.

Rest Parameters:

Pros:

* More concise and expressive than using multiple `arguments` variables.
* Can be used to create functions that expect a variable number of arguments with the same name.

Cons:

* Requires support from modern browsers and JavaScript engines.
* May result in slower execution due to the overhead of parsing the rest parameter syntax.

**Library: None**

There are no external libraries used in this benchmark.

**Special JS Feature/Syntax: Rest Parameters (`...args`)**

The use of rest parameters is a relatively recent feature introduced in ECMAScript 2015. It allows functions to accept a variable number of arguments as an array, which can be accessed using the `arguments` object or destructuring syntax.

This benchmark highlights the performance difference between this new feature and the older `arguments` syntax, providing insight into how modern JavaScript engines handle rest parameters.

Related benchmarks:

rest parameters vs arguments2 (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):