Benchmark: array of objects 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:

arrayOf100kobjects = new Array(100000).fill(1).map((_,index) => ({a: index}));

Tests:

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

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36

Browser/OS: Chrome 96 on Linux

View result in a separate tab

Test name	Executions per second
1. concat	3897.5 Ops/sec
2. spread	3664.8 Ops/sec
3. slice	3998.0 Ops/sec
5. Object values	2588.7 Ops/sec
6. Array.from	3916.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explore what's being tested, compared, and analyzed in the benchmark.

**Benchmark Definition**

The benchmark is designed to compare different methods for creating a shallow clone of an array of objects. The test cases are focused on four specific approaches:

1. `concat()`
2. Spread syntax (`...`)
3. `slice()`
4. `Object.values()` (not applicable to arrays, but used in the benchmark)
5. `Array.from()`

The script preparation code creates a large array of 100,000 objects with unique indices as properties.

**Options Compared**

Here's a brief overview of each option and their pros and cons:

1. **`concat()`**: Concatenates an existing array to create a new one. Pros: simple and widely supported. Cons: can be slower than other methods.
2. **Spread syntax (`...`)**: Creates a shallow clone by spreading the original array into a new one. Pros: concise and efficient. Cons: may not work as expected with nested objects or arrays.
3. **`slice()`**: Returns a shallow copy of a portion of an array. Pros: flexible and can be used to create clones of parts of arrays. Cons: requires careful consideration of bounds.
4. **`Object.values()`**: Returns an array containing the values of an object's enumerable properties. This method is not applicable to arrays, as it would return a single value (the length of the array) instead of an array.

**Library Used**

The benchmark uses Lodash, a popular JavaScript utility library. The `Object.values()` function is part of Lodash.

**Special JS Feature or Syntax**

There's no special feature or syntax being tested in this benchmark. However, it's worth noting that some older browsers might not support the spread syntax (`...`).

**Other Alternatives**

If you wanted to compare other methods for creating a shallow clone, you could consider:

* Using a library like Lodash (as shown) or other array utilities
* Implementing your own cloning logic
* Using `Array.prototype.slice()` with careful consideration of bounds
* Using `Array.prototype.map()` with an identity function

Keep in mind that each method has its trade-offs and might be more or less suitable depending on the specific use case.

**Benchmark Analysis**

The benchmark result shows the performance differences between the four tested methods. The results indicate that:

* `slice()` is generally the fastest option
* Spread syntax (`...`) is close to `slice()`
* `concat()` is slower than both `slice()` and spread syntax
* `Object.values()` is significantly slower, likely due to its inapplicability to arrays

These results can help developers choose an efficient method for creating shallow clones of arrays of objects.

Related benchmarks:

array of objects 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):