Benchmark: Spread operator vs. Array.map

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

permutations = new Array(10000).map(() => ({ pagination: 'blah blah blah' }));
function updatePagination(action, prev) {
  return action;
}
action = 'something else';
state = { data: { permutations: [] } };
index = 5;

Tests:

Spread
return [...permutations];
Map
return permutations.map(p => p);

Historical Performance Data aggregated from 58 community runs

Desktop Results:

Chrome 40 runs

Spread

101K/s

Map

50K/s

Fastest: Spread (2.0x faster)

View exact numbers

✓ Spread: 101,296 ops/sec
• Map: 50,482 ops/sec

Firefox 13 runs

Map

93K/s

Spread

14K/s

Fastest: Map (6.8x faster)

View exact numbers

✓ Map: 92,701 ops/sec
• Spread: 13,553 ops/sec

Mobile Results:

Safari 5 runs

Spread

19K/s

Map

6K/s

Fastest: Spread (3.0x faster)

View exact numbers

✓ Spread: 18,549 ops/sec
• Map: 6,261 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
Spread
Map

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/138.0.0.0 Safari/537.36

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Spread

49K/s

Map

40K/s

View exact numbers

Test name	Executions per second
✓ Spread	49,361 Ops/sec
Map	39,616 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 provided JSON and explain what's being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark compares the performance of two approaches:

1. **Spread operator**: The spread operator is used to create a new array by spreading elements from an existing array or object. In this case, it's used to copy the `permutations` array.
2. **Array.map()**: This method creates a new array with the results of applying a provided function on every element in the calling array.

**Options Compared**

The two options being compared are:

* Spread operator (`[...permutations]`)
* Array.map() (`permutations.map(p => p)`)

**Pros and Cons**

**Spread Operator:**

Pros:

* Lightweight, as it only requires creating a new array with the spread operator.
* Fast, since it involves simply copying elements from the original array.

Cons:

* Can lead to unexpected behavior if not used carefully (e.g., modifying the original array).
* Might not be optimized for large arrays.

**Array.map():**

Pros:

* More flexible and expressive, as it allows you to perform transformations on each element.
* Often more readable and maintainable than the spread operator.

Cons:

* Can be slower due to the overhead of creating a new array and executing the provided function on each element.
* May require additional memory allocation.

**Library Used**

The benchmark uses **Lodash.js**, a popular utility library for JavaScript. Specifically, it's using the `map()` method from Lodash to create an array with transformed elements.

**Special JS Feature or Syntax**

There are no special features or syntax used in this benchmark beyond what's standard in modern JavaScript. However, it does utilize ES6 features like template literals and destructuring assignment (`const [action, prev] = updatePagination(action, prev)`).

**Other Alternatives**

Alternative approaches to the spread operator and Array.map() could include:

* Using `Array.prototype.slice()` or a similar method to copy elements.
* Utilizing `for...of` loops and array iteration.
* Leveraging ES6 features like `Array.from()` or `Promise.all()` for parallel processing.

Keep in mind that these alternatives might have varying performance characteristics and trade-offs depending on the specific use case.

Spread operator vs. Array.map (version: 0) Benchmark.js

A comparison of the performance of the spread operator, [ ...array ], vs. Array.map(i => ...) and

Comparing performance of: `Spread vs Map`

Created: 6 years ago by: Guest

Go to the latest result

Spread

Map

Historical Performance Data aggregated from 58 community runs

Desktop Results:

Chrome 40 runs

Firefox 13 runs

Mobile Results:

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

Spread operator vs. Array.map (version: 0) Benchmark.js

A comparison of the performance of the spread operator, [ ...array ], vs. Array.map(i => ...) and

Comparing performance of: Spread vs Map

Created: 6 years ago by: Guest

Go to the latest result

Spread

Map

Historical Performance Data aggregated from 58 community runs

Desktop Results:

Chrome 40 runs

Firefox 13 runs

Mobile Results:

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: `Spread vs Map`