Benchmark: 2D nested array of numbers deep copy

2D nested array of numbers deep copy (version: 0)

I kept only the test cases that produced usable results for me (ops/sec>100). Others I tried were nested `newArr.push()`, `JSON.parse(JSON.stringify())`, `arr.map(item => Object.assign([], arr))`, and `structuredClone()`. For me, `map concat` runs the fastest, followed closely by `map slice` and then `map spread`.

Comparing performance of: for spread vs map map vs map spread vs map Array.from vs map slice vs map concat vs for map

Created: one year ago by: Guest

Jump to the latest result

Script Preparation code:

var N = 1000,
    arr = Array(N).fill(0).map(item => Array(N).fill(0).map(x => Math.random()));

Tests:

for spread
const newArr = []; for(let i = 0; i < N; i += 1) { newArr[i] = [...arr[i]]; }
map map
return arr.map(item => item.map(x => x));
map spread
return arr.map(item => [...item]);
map Array.from
return arr.map(item => Array.from(item));
map slice
return arr.map(item => item.slice());
map concat
return arr.map(item => [].concat(item));
for map
const newArr = []; for(let i = 0; i < N; i += 1) { newArr[i] = arr[i].map(x => x); } return newArr;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for spread
map map
map spread
map Array.from
map slice
map concat
for 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/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Windows

View result in a separate tab

Test name	Executions per second
for spread	251.0 Ops/sec
map map	112.6 Ops/sec
map spread	300.6 Ops/sec
map Array.from	290.2 Ops/sec
map slice	313.2 Ops/sec
map concat	317.7 Ops/sec
for map	189.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**Benchmark Definition**

The benchmark measures how fast various approaches can create a deep copy of a 2D nested array of numbers. The test case uses a single script and no external libraries, except for built-in JavaScript features.

**Approaches Compared**

The benchmark compares four approaches to create a deep copy of the 2D nested array:

1. `map concat`: Uses `newArr.push()` followed by mapping over the original array.
2. `map slice`: Uses `newArr.slice()` followed by mapping over the original array.
3. `map spread`: Uses `newArr.push()` followed by spreading the elements of the original array using the spread operator (`...`).
4. `map Array.from`: Uses `Array.from()` followed by mapping over the original array.

**Pros and Cons of Each Approach**

1. **map concat**: This approach is simple and efficient, as it only requires two operations: pushing new elements to `newArr` and then mapping over the original array.
	* Pros: Easy to implement, fast execution time.
	* Cons: May lead to performance issues if the original array is very large, as `push()` can be slower than other methods.
2. **map slice**: This approach is similar to `map concat`, but uses `slice()` instead of `push()`.
	* Pros: Faster execution time than `map concat`, especially for large arrays.
	* Cons: Requires creating a new array using `slice()`, which can lead to memory issues.
3. **map spread**: This approach uses the spread operator (`...`) to create a deep copy of each element in the original array, and then pushes these elements to `newArr`.
	* Pros: Fast execution time, easy to implement, and does not require creating new arrays or using slow operations like `push()`.
	* Cons: May lead to performance issues if the original array is very large, as spreading elements can be slower than other methods.
4. **map Array.from**: This approach uses `Array.from()` to create a shallow copy of each element in the original array, and then maps over these elements using another `Array.from()`.
	* Pros: Fast execution time, easy to implement, and does not require creating new arrays or using slow operations like `push()`.
	* Cons: Creates a shallow copy of the elements instead of a deep copy, which may lead to unexpected behavior in some cases.

**Other Considerations**

The benchmark also considers special JS features such as:

* The use of `structuredClone()` (not used in this benchmark), which is a new method introduced in JavaScript 2020, that creates a deep clone of an object.
* The use of arrow functions (`=>`) and destructuring syntax (`let {x} = item;`), but these are not explicitly mentioned as special features in the benchmark.

**Alternatives**

If you need to create a deep copy of a large array, you may want to consider using libraries like Lodash or Underscore.js, which provide optimized implementations for common operations like array manipulation. Additionally, you can also use `Array.prototype.map()` with an arrow function and the spread operator (`...`) as an alternative to the approaches compared in this benchmark.

In summary, the best approach depends on your specific requirements and constraints. If you need a fast and simple solution, `map concat` or `map slice` might be suitable. However, if you need to preserve the original array's structure and create a deep copy, `map spread` or `map Array.from` might be a better choice.

Related benchmarks:

2D nested array of numbers deep copy (version: 0)

Comparing performance of: for spread vs map map vs map spread vs map Array.from vs map slice vs map concat vs for map

Created: one year ago by: Guest

Jump to the latest result

for spread

map map

map spread

map Array.from

map slice

map concat

for map

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