Benchmark: spread operator vs filters

Script Preparation code:

function getSampleItems(numItems) {
    const items = [];
    for (let i = 1; i <= numItems; i++) {
        items.push({ value: i.toString(), label: i.toString() });
      	if(i % 10 === 0){
         items.push({ value: "divider-test-extra-characters"});
        }
    }
    return items;
};

var items = getSampleItems(1000);

Tests:

basic spread
const items2 = {...items};
basic filter
const items2 = items.filter((i) => true);
filter with conditional
const items2 = items.filter((i) => i.value !== "divider-test-extra-characters");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
basic spread
basic filter
filter with conditional

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

Browser/OS: Chrome 117 on Linux

View result in a separate tab

Test name	Executions per second
basic spread	4051.8 Ops/sec
basic filter	135310.6 Ops/sec
filter with conditional	79489.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares three different approaches to creating a copy of an array in JavaScript:

1. Using the spread operator (`const items2 = {...items};`)
2. Using the `filter()` method with a callback function that always returns true (`const items2 = items.filter((i) => true);`)
3. Using the `filter()` method with a conditional statement (`const items2 = items.filter((i) => i.value !== "divider-test-extra-characters");`)

**Options Compared**

The three options are compared in terms of their performance, which is measured by the number of executions per second.

* **Spread Operator**: This approach uses the spread operator to create a new array with all elements from the original `items` array.
* **Basic Filter**: This approach uses the `filter()` method with a callback function that always returns true, effectively creating a new array with all elements from the original `items` array.
* **Filter with Conditional**: This approach uses the `filter()` method with a conditional statement to exclude certain elements from the resulting array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Spread Operator**:
	+ Pros: Simple, readable, and efficient ( creates a new array with all elements).
	+ Cons: May not be suitable for large arrays or complex data structures.
* **Basic Filter**:
	+ Pros: Efficient (creates a new array with all elements), easy to implement.
	+ Cons: May not perform as well as the spread operator for very large arrays, and may have additional memory overhead due to creating a new array.
* **Filter with Conditional**:
	+ Pros: Can be useful when filtering out specific elements based on conditions.
	+ Cons: May have performance issues if the condition is complex or if the array is very large.

**Library/Functionality Used**

The `filter()` method is used in all three options, which is a built-in JavaScript function that creates a new array with all elements that pass the test implemented by the provided function. The spread operator (`...`) is also a built-in JavaScript syntax.

No external libraries are required for this benchmark.

**Special JS Features/Syntax**

The use of the spread operator (`...`) and the `filter()` method with conditional statements are examples of advanced JavaScript features/syntax that may not be familiar to all developers. However, these features are widely supported by modern browsers and can be used in a variety of scenarios.

**Alternatives**

If you're looking for alternative approaches to creating an array copy in JavaScript, here are a few options:

* Using the `Array.prototype.slice()` method: This approach creates a shallow copy of the original array using the `slice()` method.
* Using the `Array.prototype.map()` method: This approach creates a new array with all elements from the original array after applying a transformation function using the `map()` method.

However, these alternatives may not be as efficient or concise as the spread operator and `filter()` methods used in this benchmark.

Related benchmarks:

spread operator vs filters (version: 0)

Comparing performance of: basic spread vs basic filter vs filter with conditional

Created: one year ago by: Guest

Jump to the latest result

basic spread

basic filter

filter with conditional

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