Benchmark: object copy bench

Script Preparation code:

var voucher = {
    "single": false,
    "applyOverTaxes": false,
    "discountType": "1",
    "value": 100,
    "minimumAmount": 0,
    "quantity": 1,
    "suffixLength": 8,
    "code": "IF5R0AFX",
    "vertical": [],
    "allowedPaymentMethods": [],
    "allowedBanks": [],
    "types": [],
    "partners": [],
    "startDate": "2020-10-21T00:00:00.000Z",
    "endDate": "2020-10-21T00:00:00.000Z",
    "applyed": false
}

function babyClone(obj) {
  switch (typeof obj) {
    case 'string':
    case 'number':
    case 'bigint':
    case 'boolean':
    case 'symbol':
    case 'undefined':
      return obj;
    case 'object':
      if (!obj) return null;
      if (Array.isArray(obj)) {
        return Array.prototype.map.call(obj, babyClone);
      }
	  if (Object.getPrototypeOf(obj) !== Object.getPrototypeOf({})) {
	    // this won't catch Proxy
	    throw 'trying to copy a class instance';
	  }
      let copy = {};
      for (let sym of Object.getOwnPropertySymbols(obj)) {
        copy[sym] = babyClone(obj[sym]);
      }
      for (let key in obj) {
        copy[key] = babyClone(obj[key]);
      }
      return copy;
    case 'function':
      throw 'no copying things with functions in them';
    default:
      throw 'what new nonsense have they added to js';
  }
}

Tests:

window.structuredClone
const copy = window.structuredClone(voucher);
Spread syntax
const copy = { ...voucher };
Object assign
const copy = {}; Object.assign(copy, voucher);
babyClone
const copy = babyClone(voucher);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
window.structuredClone
Spread syntax
Object assign
babyClone

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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
window.structuredClone	234350.3 Ops/sec
Spread syntax	3055664.0 Ops/sec
Object assign	8810644.0 Ops/sec
babyClone	817323.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Definition JSON**

The benchmark definition is for an "object copy bench" that tests the efficiency of copying objects in different ways. The script preparation code creates a complex object `voucher` with various properties, and then defines four functions to create copies of this object: `structuredClone`, spread syntax (`...`), `Object.assign`, and a custom `babyClone` function.

**Options Compared**

The benchmark compares the following options:

1. **`window.structuredClone(voucher)`**: This is a modern JavaScript method introduced in 2019, which creates a shallow copy of an object by cloning its properties. It's designed to be efficient and safe for copying objects.
2. **Spread syntax (`...`)**: This is a shorthand way of creating a new object with the same properties as `voucher`, using the `...` operator.
3. **`Object.assign(copy, voucher)`**: This method creates a shallow copy of `voucher` by assigning its properties to an existing object `copy`.
4. **Custom `babyClone(voucher)` function**: This is a custom implementation that attempts to recursively clone all properties of `voucher`.

**Pros and Cons**

Here's a brief summary of the pros and cons of each option:

1. **`window.structuredClone(voucher)`**:
	* Pros: Efficient, safe, modern JavaScript method.
	* Cons: Only shallow copy, may not work with certain types of objects (e.g., `Proxy` objects).
2. **Spread syntax (`...`)**
	* Pros: Easy to use, efficient for simple objects.
	* Cons: Only creates a shallow copy, no control over the resulting object's structure.
3. **`Object.assign(copy, voucher)`**:
	* Pros: Works with most types of objects, easy to implement.
	* Cons: May be slower than `structuredClone`, can create unnecessary object copies if not used carefully.
4. **Custom `babyClone(voucher)` function**:
	* Pros: Can handle complex object structures, recursive cloning.
	* Cons: Custom implementation requires more code and may be less efficient.

**Other Considerations**

When choosing an option for copying objects, consider the following factors:

* **Data structure complexity**: If you're working with simple objects, the spread syntax or `Object.assign` might be sufficient. For complex objects with many nested properties, `structuredClone` or a custom implementation like `babyClone` may be more suitable.
* **Performance requirements**: If speed is critical, `structuredClone` is generally the fastest option. However, if you're working with very large objects, the overhead of `structuredClone` might outweigh its benefits.
* **Compatibility and safety**: Make sure to use the most recent versions of browsers or environments that support `structuredClone`, as it may not work in older browsers.

**Alternatives**

If you need to copy objects in JavaScript but don't want to use the options listed above, consider:

* Using libraries like Lodash (`_.clone`) or Immutable.js (`Immutable.fromJS`) for more comprehensive object copying capabilities.
* Implementing a custom cloning function using recursion and `Object.create` or `Array.prototype.slice` to create shallow copies.

Keep in mind that each of these alternatives has its own trade-offs, such as added complexity, slower performance, or increased memory usage.

Related benchmarks:

object copy bench (version: 0)

Comparing performance of: window.structuredClone vs Spread syntax vs Object assign vs babyClone

Created: 2 years ago by: Guest

Jump to the latest result

window.structuredClone

Spread syntax

Object assign

babyClone

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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