Benchmark: Map vs preallocation vs slice vs spread

Script Preparation code:

var array = Array.from(new Array(1000000), (e, i) => Math.random());

Tests:

Map
var array2 = array.map((e, i) => e);
from
var array2 = Array.from(new Array(1000000), (e, i) => array[i]);
splice
var array2 = array.slice();
spread
var array2 = [...array];
loop
var array2 = new Array(1000000).fill(0), n=array2.length; for (let i = 0; i < n; i++) array2[i] = i;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Map
from
splice
spread
loop

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; rv:103.0) Gecko/20100101 Firefox/103.0

Browser/OS: Firefox 103 on Windows

View result in a separate tab

Test name	Executions per second
Map	120.1 Ops/sec
from	69.9 Ops/sec
splice	641.5 Ops/sec
spread	111.9 Ops/sec
loop	135.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares four methods to create an array of 1,000,000 elements:

1. `map()`
2. `Array.from()` with a callback function
3. `slice()` (not actually slicing the original array, but rather creating a new one)
4. Spread operator (`...`)

**Library and Functionality**

* `map()`: This is a built-in JavaScript method that applies a given function to each element of an array. It returns a new array with the results.
* `Array.from()`: This is a built-in JavaScript method that creates a new array from an iterable or an array-like object. The callback function is used to transform each element in the original source.
* `slice()` (not actually slicing): In this benchmark, `slice()` is not actually modifying the original array but rather creating a new one using `new Array(n).fill(0)`, where `n` is the length of the desired array. This method returns a shallow copy of a portion of an array.

**Special JS Feature or Syntax**

* Spread operator (`...`): This is a relatively modern JavaScript syntax introduced in ES6 (ECMAScript 2015). It allows you to create a new array by "spreading" elements from an existing array.

**Test Cases and Results**

The test cases are executed multiple times, and the results show the number of executions per second for each method. The results indicate that:

* `loop()` is the fastest method, followed closely by `map()`.
* `Array.from()` with a callback function is slower than `loop()` and `map()`, but faster than `slice()` (which is not actually slicing).
* `spread` is the slowest method.

**Pros and Cons of Each Approach**

* **loop()**:
	+ Pros: Most efficient way to create an array from scratch, no overhead from function calls or object creation.
	+ Cons: Can be slow if the loop is not optimized for performance (e.g., using a simple index increment instead of `length`).
* **map()**:
	+ Pros: Elegant and concise way to transform an array, no need to worry about indices or bounds checking.
	+ Cons: May incur overhead from function calls and object creation, especially if the transformation function is complex.
* **Array.from() with callback**:
	+ Pros: More flexible than `loop()` since it allows for transforming each element using a callback function.
	+ Cons: May be slower due to the extra overhead of function calls and object creation.
* **Slice (not actually slicing)**:
	+ Pros: None notable, as this method is not actually modifying the original array.
	+ Cons: Slow due to creating a new array with `new Array(n).fill(0)`.
* **Spread operator (`...`)**:
	+ Pros: Convenient and concise way to create a new array by "spreading" elements from an existing array.
	+ Cons: May be slower than other methods, especially for large arrays.

**Alternatives**

If you're looking for alternatives to these methods, consider the following:

* Instead of `loop()`, use `Array.from()` with no callback function or a simple transformer function. This can be faster and more concise.
* For `map()`, if performance is critical, consider using an optimized transformation function or reducing the number of iterations.
* If you need more control over array creation, use `Buffer.alloc()` or `Uint8Array.alloc()` to create a buffer-based array.

Keep in mind that these alternatives may have different trade-offs and requirements depending on your specific use case.

Related benchmarks:

Map vs preallocation vs slice vs spread (version: 0)

Comparing performance of: Map vs from vs splice vs spread vs loop

Created: 3 years ago by: Guest

Jump to the latest result

Map

from

splice

spread

loop

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