Benchmark: Arguments to Array - by Jeeeyul

Script Preparation code:

function runLoop(fn) {
  for (let i = 1000; i--; ) {
    fn("bacon", "egg", "spam");
  }
}

Tests:

slice
function makeArray() { return Array.prototype.slice.call(arguments); } runLoop(makeArray);
push
function makeArray() { var _args; return (_args = []).push.apply(_args, arguments), _args; } runLoop(makeArray);
spread
function makeArray() { return [...arguments]; } runLoop(makeArray);
from
function makeArray() { return Array.from(arguments); } runLoop(makeArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
push
spread
from

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
slice	5094.8 Ops/sec
push	31872.6 Ops/sec
spread	29238.5 Ops/sec
from	3565.1 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 benchmark and its individual test cases.

**What is being tested?**

The benchmark is testing how different methods to create an array from variable arguments (a function with multiple arguments) affect performance on JavaScript engines.

**Options compared:**

1. `slice()`: Using `Array.prototype.slice.call(arguments)` to create a new array.
2. `push()`: Using the `push()` method to add elements to an existing array.
3. `spread` (also known as "rest parameter syntax"): Using the spread operator (`...`) to create a new array.
4. `from()`: Using `Array.from(arguments)` to create a new array.

**Pros and Cons of each approach:**

1. **slice()**: This method is relatively simple and efficient, but it creates a new array with a reference to the original arguments array. If the original array is modified later, the new array will also be affected.
2. **push()**: This method modifies the existing array, which can lead to unexpected behavior if the caller expects a new array. It's generally less performant than `slice()` because it involves iterating over the elements and adding them to the array.
3. **spread** (rest parameter syntax): This method creates a new array with a shallow copy of the original arguments, which is more efficient than using `push()`. However, it can lead to unexpected behavior if the caller expects a specific data structure for the array.
4. **from()**: This method creates a new array with a deep copy of the original arguments, which can be less performant than using `slice()` or spread because it involves creating an iterator over the elements.

**Other considerations:**

* The benchmark uses a loop to run each test case multiple times to ensure that the results are representative.
* The benchmark is designed for JavaScript engines on macOS (specifically, Safari 17), which might not be representative of other platforms or browsers.
* The use of `runLoop()` as a utility function to encapsulate the main logic simplifies the benchmarking code but makes it harder to understand.

**Library and syntax:**

None of these test cases rely on any specific libraries or external dependencies. They only use built-in JavaScript features and methods.

**Special JS features or syntax:**

The spread operator (`...`) is a relatively recent feature introduced in ECMAScript 2015 (ES6). It's supported by most modern JavaScript engines, but older engines might not support it.

**Benchmark preparation code:**

The `runLoop()` function creates an array of arguments using each test case and then runs the loop with the provided function as its argument. This is a common pattern in benchmarking to ensure that all tests are executed consistently.

**Alternatives:**

If you're looking for alternative ways to create arrays from variable arguments, consider the following methods:

* Using `Array.from()` instead of `slice()`, spread, or `from()`. This method creates a new array with a shallow copy of the original arguments.
* Using the `map()` function in combination with `push()` or `from()`.
* Using a library like Lodash, which provides more comprehensive array utilities.

Keep in mind that these alternatives might have different performance characteristics and may not be suitable for all use cases.

Related benchmarks:

Arguments to Array - by Jeeeyul (version: 0)

Comparing performance of: slice vs push vs spread vs from

Created: one year ago by: Registered User

Jump to the latest result

slice

push

spread

from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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