Benchmark: Merge array without duplicates (Array, Set layout)

Script Preparation code:

var lists = [
  [
    'aaa', 'bbb', 'c', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'gcd',
    'bbb---ccc---gcc', 'bbb---ccc---g++', 'bbb---ccc---gcc',
    'aaa', 'bbb', 'c', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'gcd',
    'bbb---ccc---gcc', 'bbb---ccc---g++', 'bbb---ccc---gcc',
    'aaa', 'bbb', 'c', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'gcd',
    'ddd', 'eee', 'ggg', 'bbb', 'ccc', 'gga', 'ggb', 'gcc',
    'bbb---ccc---gcc', 'bbb---ccc---gcc', 'bbb---ccc---gcc',
    'bbb---ccc---gcc', 'bbb---ccc---g++', 'bbb---ccc---gcc',
    'aaa', 'bbb', 'c', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'gcd',
    'bbb---ccc---gcc', 'bbb---ccc---g++', 'bbb---ccc---gcc',
    'aaa', 'bbb', 'c', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'gcd',
    'bbb---ccc---gcc', 'bbb---ccc---g++', 'bbb---ccc---gcc',
  ],
  [
    'ddd', 'eee', 'ggg', 'bbb', 'ccc', 'gga', 'ggb', 'gcc',
    'bbb---ccc---gcc', 'bbb---ccc---gcc', 'bbb---ccc---gcc',
    'ddd', 'eee', 'ggg', 'bbb', 'ccc', 'gga', 'ggb', 'gcc',
    'bbb---ccc---gcc', 'bbb---ccc---gcc', 'bbb---ccc---gcc',
    'ddd', 'eee', 'ggg', 'bbb', 'ccc', 'gga', 'ggb', 'gcc',
    'bbb---ccc---gcc', 'bbb---ccc---gcc', 'bbb---ccc---gcc',
  ],
];

Tests:

Array + Array (concat) => 1 Set => Array
Array.from( new Set(lists[0].concat(lists[1])) )
Set + Set (spread) => Set + Array => Array
Array.from( new Set([ ...new Set(lists[0]), ...new Set(lists[1]), ]) )

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array + Array (concat) => 1 Set => Array
Set + Set (spread) => Set + Array => Array

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0

Browser/OS: Opera 106 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array + Array (concat) => 1 Set => Array	24802.1 Ops/sec
Set + Set (spread) => Set + Array => Array	15766.6 Ops/sec

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 what is tested on the provided JSON.

**Benchmark Definition**

The benchmark measures how quickly JavaScript engines can perform two different operations:

1. **Merge array without duplicates (Array, Set layout)**: This test case involves creating an array by concatenating two arrays (`lists[0]` and `lists[1]`) using the spread operator (`...`). The resulting array is then converted to a Set, which removes duplicates, and finally back to an array. The test aims to measure the performance of this operation.
2. **Set + Set (spread) => Set + Array => Array**: This test case involves creating a new Set by taking the union of two existing Sets (`new Set(lists[0])` and `new Set(lists[1])`) using the spread operator (`...`). The resulting Set is then converted back to an array.

**Comparison of Options**

There are three main options for implementing these operations:

a. **Using Array.prototype.concat()**: This method creates a new array by concatenating two arrays using the dot notation (e.g., `lists[0].concat(lists[1])`).

b. **Using the spread operator (ES6)**: This method uses the spread operator to merge two arrays into one (e.g., `...new Set(lists[0]).values()` and `...new Set(lists[1]).values()`).

c. **Using Array.prototype.push() and then converting to a Set**: This method creates an array by pushing elements from two arrays using `Array.prototype.push()`, and then converts the resulting array to a Set.

**Pros and Cons of Each Approach**

a. **Using Array.prototype.concat():**
	* Pros: Simple, widely supported.
	* Cons: Creates a new array with duplicate elements.
	* Performance: Relatively slow due to the overhead of creating a new array.

b. **Using the spread operator (ES6):**
	* Pros: Efficient, produces a Set with no duplicates, and is concise.
	* Cons: Requires support for ES6 features.
	* Performance: Generally faster than `concat()` because it avoids creating a new array.

c. **Using Array.prototype.push() and then converting to a Set:**
	* Pros: Simple, can be efficient if the arrays are large.
	* Cons: Relatively slow due to the overhead of pushing elements.
	* Performance: Can be faster than `concat()` for very large arrays.

**Library Usage**

The benchmark uses two JavaScript libraries:

1. **Array.prototype.concat()**: A built-in method that is part of the ECMAScript standard.
2. **Set**: A built-in object that is also part of the ECMAScript standard, but requires support for ES6 features.

**Special JS Features or Syntax**

The benchmark includes some special JavaScript features:

1. **ES6 spread operator (U+202F)**: Used to merge two arrays into one.
2. **Set**: Used as a collection data structure to remove duplicates.

Note that these features are not specific to the test case, but rather general ES6 features that may be used in various contexts.

**Alternatives**

If you need to implement array merging without using built-in methods like `concat()` or spread operators, you could consider:

1. **Manual iteration**: Use a loop to iterate over both arrays and push elements into a new array.
2. **Custom data structures**: Create a custom data structure that can efficiently merge two arrays.

However, these alternatives may not be as efficient or concise as using built-in methods like `concat()` or the spread operator (ES6).

Related benchmarks:

Merge array without duplicates (Array, Set layout) (version: 0)

Comparing performance of: Array + Array (concat) => 1 Set => Array vs Set + Set (spread) => Set + Array => Array

Created: 2 years ago by: Guest

Jump to the latest result

Array + Array (concat) => 1 Set => Array

Set + Set (spread) => Set + Array => Array

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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