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:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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: 4 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>

Fastest: N/A

Slowest: N/A

No previous run results

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