Benchmark: Array slice vs for loop

Script Preparation code:

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

Tests:

slice
var copy = data.slice(3, 8);
push
var copy = []; for (var i = 3; i < 8; i++) { copy.push(data[i]) }

Historical Performance Data aggregated from 142 community runs

Desktop Results:

Chrome 105 runs

slice

18.6M/s

push

4.4M/s

Fastest: slice (4.3x faster)

View exact numbers

✓ slice: 18,647,696 ops/sec
• push: 4,372,736 ops/sec

Firefox 23 runs

push

51.5M/s

slice

37.8M/s

Fastest: push (1.4x faster)

View exact numbers

✓ push: 51,465,832 ops/sec
• slice: 37,755,156 ops/sec

Mobile Results:

Chrome 9 runs

slice

13.0M/s

push

5.6M/s

Fastest: slice (2.3x faster)

View exact numbers

✓ slice: 12,972,763 ops/sec
• push: 5,580,592 ops/sec

Safari 5 runs

slice

102.6M/s

push

76.5M/s

Fastest: slice (1.3x faster)

View exact numbers

✓ slice: 102,576,128 ops/sec
• push: 76,495,360 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 148 on Windows

View result in a separate tab

slice

23.5M/s

push

11.2M/s

View exact numbers

Test name	Executions per second
✓ slice	23,476,328 Ops/sec
push	11,186,246 Ops/sec

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 analyze what is being tested.

**Benchmark Description**

The benchmark is designed to compare the performance of two approaches: using `Array.slice()` versus using a traditional `for` loop to create a copy of an array slice.

**Script Preparation Code**

The script preparation code sets up a sample data array with 10 elements, which will be used as the input for both test cases. This ensures that both tests have the same starting point and are measuring the performance difference between the two approaches.

**Options Being Compared**

There are two options being compared:

1. **`Array.slice()`**: This method creates a new array containing a subset of elements from the original array, without modifying the original array.
2. **Traditional `for` loop with `push()`**: This approach uses a traditional `for` loop to iterate over the desired range of elements in the original array and pushes each element onto a new array.

**Pros and Cons**

Here are some pros and cons of each approach:

**`Array.slice()`**:

Pros:

* More concise and readable code
* Less chance of errors due to manual indexing
* Performance is often comparable to other methods (e.g., `slice()` uses optimized C++ code)

Cons:

* May not be as efficient in certain cases (e.g., very large arrays)
* Can create a new array object, which may consume more memory

**Traditional `for` loop with `push()`**:

Pros:

* Can be more efficient for very large arrays
* Allows for manual control over the iteration process

Cons:

* More verbose code, making it harder to read and maintain
* Risk of errors due to manual indexing or off-by-one issues

**Library Used: None**

There is no library being used in this benchmark. The `Array.slice()` method is a built-in JavaScript method, while the traditional `for` loop with `push()` is a standard JavaScript construct.

**Special JS Feature/Syntax: None**

There are no special JavaScript features or syntax being tested in this benchmark.

**Other Considerations**

When comparing performance between these two approaches, it's essential to consider factors such as:

* Array size and shape
* Browser and platform compatibility
* Memory allocation and deallocation overhead

In general, `Array.slice()` is a safe choice when conciseness and readability are more important than raw performance. However, for very large arrays or specific use cases where manual control is required, the traditional `for` loop with `push()` might be a better option.

**Alternatives**

Other alternatives to consider when creating JavaScript benchmarks include:

* Using Web Worker threads for parallel execution
* Utilizing modern JavaScript features like `Array.from()`, `Array.prototype.reduce()`, or `map()`
* Considering other data structures, such as buffers or TypedArrays

Array slice vs for loop (version: 0)

Comparing performance of: `slice vs push`

Created: 6 years ago by: Guest

Go to the latest result

slice

push

Historical Performance Data aggregated from 142 community runs

Desktop Results:

Chrome 105 runs

Firefox 23 runs

Mobile Results:

Chrome 9 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array slice vs for loop (version: 0)

Comparing performance of: slice vs push

Created: 6 years ago by: Guest

Go to the latest result

slice

push

Historical Performance Data aggregated from 142 community runs

Desktop Results:

Chrome 105 runs

Firefox 23 runs

Mobile Results:

Chrome 9 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `slice vs push`