Benchmark: another one js array copy speed comparison

Tests:

map
const arr = [1,2,3,4,5] const newArr = arr.map(e=>e)
array.from
const arr = [1,2,3,4,5] const newArr = Array.from(arr)
for loop
const arr = [1,2,3,4,5] let newArr = []; for(let i = 0; i < arr.length; i++) { newArr[i] = arr[i]; }
foreach
const arr = [1,2,3,4,5] let newArr = [] arr.forEach(e => { newArr.push(e) })
slice
const arr = [1,2,3,4,5] const newArr = arr.slice()
spread
const arr = [1,2,3,4,5] const newArr = [...arr]
filter
const arr = [1,2,3,4,5] const newArr = arr.filter(() => true)
concat
const arr = [1,2,3,4,5] const newArr = [].concat(arr)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
array.from
for loop
foreach
slice
spread
filter
concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
map	46589196.0 Ops/sec
array.from	3543141.0 Ops/sec
for loop	30280118.0 Ops/sec
foreach	28612370.0 Ops/sec
slice	87308640.0 Ops/sec
spread	54897560.0 Ops/sec
filter	34008588.0 Ops/sec
concat	47392600.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark JSON and discuss what's being tested, compared options, pros and cons of each approach, library usage, special JS features (if any), and alternative solutions.

**Benchmark Definition**

The benchmark measures the speed of various JavaScript array operations:

1. `map`
2. `array.from`
3. `for` loop
4. `foreach`
5. `slice`
6. `spread`
7. `filter`
8. `concat`

These operations are fundamental in JavaScript, and understanding their differences is crucial for optimizing performance-critical code.

**Options Comparison**

Here's a brief overview of each option:

1. **map()**: Creates a new array with the results of applying a provided function on every element in the calling array.
2. **array.from()**: Creates a new array from an iterable (e.g., array, string, or object).
3. **for` loop**: Iterates over the elements of an array using a traditional `for` loop.
4. **foreach` loop: Iterates over the elements of an array using a `forEach` method call.
5. **slice()**: Returns a shallow copy of a portion of an array, starting from the specified index to the end of the array.
6. **spread (`...`)**: Creates a new array by spreading elements from another iterable (e.g., array or object) into a new array.
7. **filter()**: Creates a new array with all elements that pass the test implemented by the provided function.
8. **concat()**: Returns a new array that is the result of concatenating two or more arrays.

**Pros and Cons**

Here are some general pros and cons for each approach:

1. **map()**: Pros: concise, readable, and efficient; Cons: creates a new array, which can be memory-intensive.
2. **array.from()**: Pros: flexible, works with various iterables; Cons: may have performance overhead due to object creation.
3. **for` loop**: Pros: fine-grained control, low memory usage; Cons: verbose, error-prone.
4. **foreach` loop**: Pros: concise, readable; Cons: limited flexibility, may not be suitable for all scenarios.
5. **slice()**: Pros: efficient, works well with large arrays; Cons: creates a new array, which can lead to memory issues.
6. **spread (`...`)**: Pros: flexible, concise; Cons: may have performance overhead due to object creation.
7. **filter()**: Pros: efficient, suitable for filtering data; Cons: creates a new array, which can be memory-intensive.
8. **concat()**: Pros: works well with large arrays; Cons: creates a new array, which can lead to memory issues.

**Library Usage**

None of the benchmarked operations rely on external libraries. However, it's essential to note that some libraries (e.g., Lodash) provide optimized implementations for these operations, which might affect performance.

**Special JS Features**

No special JavaScript features are being tested in this benchmark. However, some browsers may have optimizations or polyfills for certain features (e.g., `for` loop).

**Alternative Solutions**

For specific use cases:

1. **map()**: Alternative: use a library like Lodash's `map()` function, which provides optimized implementations.
2. **array.from()**: Alternative: consider using `Array.prototype.reduce()` or other iterative approaches for performance-critical scenarios.
3. **for` loop**: Alternative: use an optimization technique like caching or memoization to improve performance.
4. **foreach` loop**: Alternative: consider using `Array.prototype.forEach()` with a custom callback function, which provides better control and flexibility.
5. **slice()**: Alternative: use a library like Lodash's `_.slice()` function for optimized implementations.
6. **spread (`...`)**: Alternative: consider using `Array.prototype.concat()` or other iterative approaches for performance-critical scenarios.
7. **filter()**: Alternative: use a library like Lodash's `_.filter()` function for optimized implementations.
8. **concat()**: Alternative: use a library like Lodash's `_.concat()` function for optimized implementations.

Keep in mind that these alternatives might introduce additional dependencies or complexity, so it's essential to weigh the benefits against the costs when choosing an approach.

Related benchmarks:

another one js array copy speed comparison (version: 1)

Comparing performance of: map vs array.from vs for loop vs foreach vs slice vs spread vs filter vs concat

Created: 3 years ago by: Registered User

Jump to the latest result

map

array.from

for loop

foreach

slice

spread

filter

concat

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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