Benchmark: shallow copy of arrays and objects

HTML Preparation code:

<script src="https://unpkg.com/klona@2.0.6/dist/index.js"></script>

Script Preparation code:

let array = Array(10000);
let object = {};
for (let i = 0, end = array.length; i < end; i += 1) {
  array[i] = i;
  object[i] = i;
}

Tests:

slice array
array.slice();
klona array
klona(array);
spread array
[...array];
Object.assign object
Object.assign({}, object);
klona object
klona(object);
spread object
({...object});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice array
klona array
spread array
Object.assign object
klona object
spread object

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36

Browser/OS: Chrome 144 on Windows

View result in a separate tab

Test name	Executions per second
slice array	970755.9 Ops/sec
klona array	22932.7 Ops/sec
spread array	212905.9 Ops/sec
Object.assign object	582080.7 Ops/sec
klona object	4268.6 Ops/sec
spread object	399619.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided measures the performance of different methods for creating shallow copies of arrays and objects in JavaScript. The benchmark specifically evaluates six different approaches:

### 1. `array.slice()`
- **Description**: This method returns a shallow copy of a portion of an array into a new array object. If no arguments are provided, it copies the entire array.
- **Pros/Cons**:
  - **Pros**: Simple syntax, native method with broad support and predictable performance.
  - **Cons**: Only works for arrays.

### 2. `klona(array)` and `klona(object)`
- **Description**: The `klona` library is used to create shallow copies of arrays and objects. It is optimized for performance and can handle various data types.
- **Pros/Cons**:
  - **Pros**: Handles different data structures and edge cases well; potentially better performance for complex copies.
  - **Cons**: Requires an additional library, which may contribute to bundle size.

### 3. `[...array]`
- **Description**: This uses the spread syntax to create a new array by expanding the elements of the existing array.
- **Pros/Cons**:
  - **Pros**: Clean and concise syntax; a modern JavaScript feature that works for iterable objects.
  - **Cons**: May not perform as well as dedicated methods on larger arrays.

### 4. `Object.assign({}, object)`
- **Description**: This method is used to copy the properties of an object into a new object, resulting in a shallow copy.
- **Pros/Cons**:
  - **Pros**: Works well with object flattening; widely supported across browsers.
  - **Cons**: Properties are copied by reference for nested objects; does not create deep copies.

### 5. `{...object}`
- **Description**: Similar to the array spread, this is the spread syntax applied to objects which creates a new object with the same properties.
- **Pros/Cons**:
  - **Pros**: Simple and elegant; takes advantage of modern JavaScript syntax.
  - **Cons**: Like Object.assign, it only creates shallow copies.

### Performance Results Overview:
The benchmark results show a clear hierarchy of performance for the different methods.

- **Fastest**: `array.slice()` produced the highest executions per second at over 869,191.
- **Moderate Performance**: `Object.assign` was next at around 647,471, showcasing solid performance for object copying.
- **Lower Performance**: The spread syntax for both array and object had significantly lower performance (around 97,395 for array and 33,849 for object).
- **Slowest**: The `klona` method had the worst performance in this benchmark, with 14,907 for arrays and 2,785 for objects.

### Alternatives:
Other alternatives for shallow copying could include:
- **For Loops**: Manual copying using a `for` loop.
- **Array.from()**: For arrays, this can also create shallow copies.
- **JSON Methods**: For deep copying, though not applicable here as it creates new instances (but only for JSON-serializable data).

### Conclusion:
The choice of copying method varies based on needs for performance, compatibility, and code clarity. Simple native methods (`array.slice()`, `Object.assign()`) are often the most efficient for straightforward tasks, while using libraries like `klona` can bring additional capabilities at the cost of performance in some cases. Developers should consider the trade-offs depending on the context of their specific applications.

Related benchmarks:

shallow copy of arrays and objects (version: 1)

Comparing performance of: slice array vs klona array vs spread array vs Object.assign object vs klona object vs spread object

Created: 9 months ago by: Guest

Jump to the latest result

slice array

klona array

spread array

Object.assign object

klona object

spread object

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 9 months ago):