Benchmark: Spread vs Concat vs Set

HTML Preparation code:

<script>
const arr1 = new Array(80).fill(true).map(() => Math.round(Math.random() * 1000));
const arr2 = new Array(80).fill(true).map(() => Math.round(Math.random() * 1000));
</script>

Tests:

Filter
let combinedArr = [...arr1, ...arr2.filter(item => !arr2.includes(item))];
Set
let combinedArr = Array.from(new Set(arr1.concat(arr2)));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Filter
Set

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 break down the benchmark and its various components.

**Benchmark Definition:**
The benchmark measures the performance of three approaches to concatenate arrays: using the spread operator (`...`), concatenation with `+`, and creating a Set from an array (using `Array.from(new Set())`). The goal is to compare these approaches in terms of execution speed.

**Script Preparation Code:**
The provided script creates two large arrays, `arr1` and `arr2`, each containing 80 elements with random values. These arrays are used as input for the three different concatenation methods.

**Individual Test Cases:**

1. **Filter:** This test case uses the spread operator to filter out elements that exist in one of the arrays (in this case, `arr2`) from the other array (`arr1`).
	* Library: None
	* Special JS feature/syntax: The use of `!arr2.includes(item)` and the spread operator (`...`) are specific to modern JavaScript versions.
2. **Set:** This test case uses the Set data structure to concatenate the two arrays, creating a new array from the unique elements of both.
	* Library: Built-in `Set` data structure
	* Special JS feature/syntax: None

**Other Considerations:**

* The benchmark runs on a desktop platform (Windows 10) using Google Chrome version 80.
* The results are reported in terms of executions per second (`ExecutionsPerSecond`).

**Pros and Cons of Different Approaches:**

1. **Spread Operator (`...`)**:
	* Pros: More readable, concise, and efficient for concatenating small arrays.
	* Cons: Can be slower than other methods for very large arrays due to the creation of a new array object.
2. **Concatenation with `+`**:
	* Pros: Fast and efficient for concatenating large arrays, as it creates a new array object without allocating memory on the heap.
	* Cons: Less readable and more error-prone than using the spread operator or Set data structure.
3. **Set Data Structure**:
	* Pros: Efficiently removes duplicate elements while preserving order, making it suitable for filtering large datasets.
	* Cons: Can be slower than concatenation methods for small arrays due to the overhead of creating a Set.

In general, the choice of approach depends on the specific requirements and constraints of the use case. The spread operator and Set data structure are often preferred in modern JavaScript development for their readability and efficiency, while concatenation with `+` is still used when performance is critical.

**Alternative Approaches:**

1. **Array.prototype.push()**: This method modifies the original array by appending elements to it.
2. **Using a custom solution**: Depending on the specific requirements, alternative approaches like using a custom function or a different data structure (e.g., a linked list) might be more suitable.

Keep in mind that the benchmark's results may vary depending on the specific test environment and hardware.

Related benchmarks:

Spread vs Concat vs Set (version: 0)

Comparing performance of: Filter vs Set

Created: 6 years ago by: Registered User

Jump to the latest result

Filter

Set

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):