Benchmark: Array slice vs array filter

Script Preparation code:

var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

Tests:

slice
var copy = data.slice(5);
filter
var copy = data.filter(d => d < 5);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
filter

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
slice	4122917.5 Ops/sec
filter	1390271.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The benchmark measures the performance of two different approaches to slice an array in JavaScript: using `Array.slice()` and using the `filter()` method with a callback function.

**Options compared**

Two options are being compared:

1. **`Array.slice()`**: This method returns a shallow copy of a portion of an array, specified by its start index (inclusive) and end index (exclusive). It is designed to create a new array object containing the elements from the start index up to but not including the end index.
2. **`Array.filter()` with callback function**: This method creates a new array with all elements that pass the test implemented by the provided function.

**Pros and cons of each approach**

1. **`Array.slice()`**:
	* Pros: Fast, efficient, and predictable performance, as it works with native arrays.
	* Cons: Creates a shallow copy of the original array, which can lead to unexpected behavior if the original array is modified after slicing.
2. **`Array.filter()` with callback function**:
	* Pros: More flexible, as it allows for complex filtering conditions using JavaScript functions.
	* Cons: May have slower performance compared to `slice()`, as it iterates over the entire array and creates a new one.

**Library usage**

Neither `Array.slice()` nor `Array.filter()` uses external libraries. They are native JavaScript methods that work directly with arrays.

**Special JS feature or syntax**

The benchmark does not use any special JavaScript features or syntax beyond standard ECMAScript 2022 (ES12) support.

**Benchmark preparation code**

The script preparation code defines an array `data` and assigns a slice index to create a copy of the last five elements:
```javascript
var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
```
**Individual test cases**

The benchmark consists of two individual test cases:

1. `slice`: Creates a copy of the last five elements using `Array.slice()`.
```javascript
var copy = data.slice(5);
```
2. `filter`: Filters out elements greater than or equal to 5 using `Array.filter()`:
```javascript
var copy = data.filter(d => d < 5);
```
**Latest benchmark result**

The latest benchmark result shows that:

* The Chrome 126 browser on a desktop device executed the `slice` test case approximately 4.12 million times per second.
* The Chrome 126 browser on a desktop device executed the `filter` test case approximately 1.39 million times per second.

**Other alternatives**

If the author wanted to explore other approaches, they could consider:

* Using `Array.prototype.map()` instead of `slice()`
* Using a library like Lodash or Ramda for filtering and mapping
* Using a different array manipulation method, such as `Array.prototype.slice.call()`

Related benchmarks:

Array slice vs array filter (version: 0)

Comparing performance of: slice vs filter

Created: 4 years ago by: Guest

Jump to the latest result

slice

filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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