Benchmark: array shallow clone comparison narrowed

HTML Preparation code:

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

Script Preparation code:

arrayOf1kkNumbers = new Array(100000).fill(1).map((_,index) => index);

Tests:

1. concat
const clonedArr = [].concat(arrayOf1kkNumbers);
2. spread
const clonedArr = [...arrayOf1kkNumbers];
3. slice
const clonedArr = arrayOf1kkNumbers.slice();
5. Object values
const clonedArr = Object.values(arrayOf1kkNumbers);
6. Array.from
const clonedArr = Array.from(arrayOf1kkNumbers);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1. concat
2. spread
3. slice
5. Object values
6. Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:95.0) Gecko/20100101 Firefox/95.0

Browser/OS: Firefox 95 on Linux

View result in a separate tab

Test name	Executions per second
1. concat	706.5 Ops/sec
2. spread	683.3 Ops/sec
3. slice	1965.5 Ops/sec
5. Object values	650.5 Ops/sec
6. Array.from	658.8 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.

**What is being tested?**

MeasureThat.net is testing the performance of different methods for shallow cloning an array in JavaScript. Shallow cloning means creating a new copy of the array, but only copying the top-level elements (i.e., no recursive cloning). The test cases use a specific array `arrayOf1kkNumbers` with 100,000 elements.

**Options being compared**

The options being compared are:

1. **concat**: Using the `Array.prototype.concat()` method to create a new array.
2. **spread**: Using the spread operator (`...`) to create a new array.
3. **slice**: Using the `Array.prototype.slice()` method to create a new array.
4. **Object.values**: Using the `Object.values()` method to create an array from an object (although this is not strictly shallow cloning, as it uses the object's internal structure).
5. **Array.from**: Using the `Array.from()` constructor to create a new array.

**Pros and cons of each approach**

1. **concat**:
	* Pros: Simple and widely supported.
	* Cons: Creates a new copy of the entire original array, which can be slow for large arrays.
2. **spread**:
	* Pros: Fast and efficient, as it only copies the top-level elements.
	* Cons: Requires modern browsers that support the spread operator (introduced in ECMAScript 2015).
3. **slice**:
	* Pros: Efficient and widely supported, as it uses a optimized internal implementation.
	* Cons: Creates a new copy of the entire original array, which can be slow for large arrays.
4. **Object.values**:
	* Pros: Fast and efficient, as it only copies the top-level elements.
	* Cons: Not strictly shallow cloning, as it uses the object's internal structure.
5. **Array.from**:
	* Pros: Fast and efficient, as it only copies the top-level elements.
	* Cons: Requires modern browsers that support the `Array.from()` constructor (introduced in ECMAScript 2015).

**Library usage**

The test case using `lodash` is `5. Object values`. The `Object.values()` method is a part of the Lodash library, which provides various utility functions for JavaScript.

**Special JS features or syntax**

There are no special JS features or syntax used in this benchmark. All tests use standard JavaScript and common array methods.

**Other alternatives**

If you want to implement your own shallow cloning algorithm, some other options include:

1. **forEach**: You can use the `Array.prototype.forEach()` method to iterate over each element of the original array and create a new copy.
2. **map() + Array.prototype.slice()**: You can use the `Array.prototype.map()` method to create a new array with cloned elements, followed by `Array.prototype.slice()` to remove the original array from memory.

Keep in mind that these alternatives may have different performance characteristics than the methods being tested in this benchmark.

I hope this explanation helps you understand what's going on in this JavaScript microbenchmark!

Related benchmarks:

array shallow clone comparison narrowed (version: 0)

1. concat 2. spread 3. slice 5. Object.values 6. Array.from

Comparing performance of: 1. concat vs 2. spread vs 3. slice vs 5. Object values vs 6. Array.from

Created: 3 years ago by: Guest

Jump to the latest result

1. concat

2. spread

3. slice

5. Object values

6. Array.from

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