Benchmark: add seperator between array elements

Tests:

flatmap
let inp = new Array(10000).fill(0) let sep = 1 inp = inp.flatMap((e, index) => index ? [sep, e] : e); console.log(inp.length, inp[0], inp[1], "...", inp.at(-2), inp.at(-1))
splice loop
let inp = new Array(10000).fill(0) let sep = 1 i = inp.length; while (--i) inp.splice(i, 0, sep); console.log(inp.length, inp[0], inp[1], "...", inp.at(-2), inp.at(-1))
reduce
let inp = new Array(10000).fill(0) let sep = 1 inp = inp.reduce((r, a) => r.concat(a, sep), []); inp.pop(); console.log(inp.length, inp[0], inp[1], "...", inp.at(-2), inp.at(-1))
copy loop
let inp = new Array(10000).fill(0) let sep = 1 let tar = new Array(inp.length * 2 - 1) for (let i = inp.length - 1; i > -1; --i) { tar[i * 2] = inp[i] tar[i * 2 - 1] = sep } inp = tar; console.log(inp.length, inp[0], inp[1], "...", inp.at(-2), inp.at(-1))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
flatmap
splice loop
reduce
copy loop

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/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
flatmap	748.0 Ops/sec
splice loop	167.8 Ops/sec
reduce	3.7 Ops/sec
copy loop	10870.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested.

**Benchmark Definition**

The benchmark definition is a JSON object that defines the test case. In this case, there are four test cases:

1. `add seperator between array elements` (Name)
2. `flatmap`
3. `splice loop`
4. `reduce`

Each test case has a unique name and description.

**Test Cases**

Let's analyze each test case:

1. **Flat Map**: This test case creates an array of 10,000 zeros, then uses the `flatMap` method to add a separator (value 1) between each element. The test logs the length, first element, second element, and last two elements of the resulting array.
2. **Splice Loop**: This test case creates an array of 10,000 zeros, then uses a loop to insert a separator (value 1) at each position in the array. The test logs the length, first element, second element, and last two elements of the resulting array.
3. **Reduce**: This test case creates an array of 10,000 zeros, then uses the `reduce` method to concatenate the array with a separator (value 1) between each element. After reducing, the test removes the last element and logs the length, first element, second element, and last two elements of the resulting array.
4. **Copy Loop**: This test case creates an array of 10,000 zeros, then uses a loop to create a new array with twice as many elements as the original array, with each element being either the corresponding element from the original array or the separator (value 1). The test logs the length, first element, second element, and last two elements of the resulting array.

**Library/Functionality Used**

In this benchmark, we can see that three functions are used:

* `flatMap`: This is a method introduced in ECMAScript 2019 that returns a new array with the results of applying a provided function to each element in an array.
* `splice`: This is a method that modifies an array by inserting, removing, or replacing elements.
* `reduce`: This is a method that applies a user-defined function to each element in an array and reduces it to a single value.

**Special JS Features/Syntax**

In this benchmark, we can see the use of:

* Arrow functions (`=>`)
* Template literals (e.g., `"..."`)
* The `at` method to access elements by index

However, these features are not new or experimental. They have been part of JavaScript for a while.

**Options Compared**

The test cases compare different approaches to achieve the same result: adding a separator between array elements. The options compared are:

* Using `flatMap`
* Using a loop with `splice`
* Using `reduce`

Each approach has its pros and cons:

* **flatMap**: Pros: concise, efficient; Cons: may not be supported in older browsers or environments.
* **Splice Loop**: Pros: familiar API, easy to understand; Cons: less efficient, may require more iterations.
* **Reduce**: Pros: flexible, can handle different types of arrays; Cons: may have a higher overhead due to the reduction function.

**Device and Browser Information**

The benchmark result shows information about the device and browser that ran the test:

* Device Platform: Desktop
* Operating System: Mac OS X 10.15.7
* Browser: Chrome 118

This information is likely used to provide more context about the testing environment.

**Alternatives**

There are other alternatives to achieve the same result, such as:

* Using `Array.prototype.map` and concatenating arrays with a separator.
* Using a library like Lodash or Underscore.js, which provides similar functionality for array manipulation.

However, these alternatives may not be suitable for this specific use case, especially when dealing with performance-critical code.

Related benchmarks:

add seperator between array elements (version: 0)

Comparing performance of: flatmap vs splice loop vs reduce vs copy loop

Created: one year ago by: Guest

Jump to the latest result

flatmap

splice loop

reduce

copy loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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