Benchmark: Object Cloning Performance Benchmark: Spread vs. Object.assign and More

Object Cloning Performance Benchmark: Spread vs. Object.assign and More (version: 0)

This benchmark tests the performance of various JavaScript methods for cloning or copying objects. Using a randomly generated object, the test compares the efficiency of methods such as the spread syntax and Object.assign. It provides insights into the fastest ways to duplicate large datasets in JavaScript.

Comparing performance of: Spread Syntax vs Object.assign vs Object.fromEntries and Object.entries: vs JSON vs Reference Assignment vs Deep copy using a recursive function

Created: 2 years ago by: Guest

Jump to the latest result

Script Preparation code:

function getRandomKey(length = 5) {
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += characters.charAt(
            Math.floor(Math.random() * characters.length),
        );
    }
    return result;
}

function getRandomValue() {
    const types = [
        () => Math.random().toString(36).substring(2, 15), // Random string
        () => Math.floor(Math.random() * 1000), // Random number
        () => Math.random() < 0.5, // Random boolean
        () => String.fromCharCode(33 + Math.floor(Math.random() * 94)), // Random symbol
        () => undefined, // undefined
        () => null, // null
        () => (Math.random() < 0.5 ? Symbol('aSymbol') : Symbol()), // Random Symbol
        () => `${Math.floor(Math.random() * 10 ** 15)}n`, // Random BigInt as a string (Note: This won't truly be a BigInt type due to limitations)
    ];
    return types[Math.floor(Math.random() * types.length)]();
}

Tests:

Spread Syntax
const randomObject = {}; const numberOfKeys = 10000; for (let i = 0; i < numberOfKeys; i++) { randomObject[getRandomKey()] = getRandomValue(); } const newObj = {...randomObject};
Object.assign
const randomObject = {}; const numberOfKeys = 10000; for (let i = 0; i < numberOfKeys; i++) { randomObject[getRandomKey()] = getRandomValue(); } const newObj = Object.assign({}, randomObject);
Object.fromEntries and Object.entries:
const randomObject = {}; const numberOfKeys = 10000; for (let i = 0; i < numberOfKeys; i++) { randomObject[getRandomKey()] = getRandomValue(); } const newObj = Object.fromEntries(Object.entries(randomObject));
JSON
const randomObject = {}; const numberOfKeys = 10000; for (let i = 0; i < numberOfKeys; i++) { randomObject[getRandomKey()] = getRandomValue(); } const newObj = JSON.parse(JSON.stringify(randomObject));
Reference Assignment
const randomObject = {}; const numberOfKeys = 10000; for (let i = 0; i < numberOfKeys; i++) { randomObject[getRandomKey()] = getRandomValue(); } const newObj = randomObject;
Deep copy using a recursive function
const randomObject = {}; const numberOfKeys = 10000; for (let i = 0; i < numberOfKeys; i++) { randomObject[getRandomKey()] = getRandomValue(); } function deepCopy(obj) { if (obj === null) return null; if (typeof obj !== "object") return obj; if (obj instanceof Array) return obj.map(deepCopy); const newObj = {}; for (let key in obj) { newObj[key] = deepCopy(obj[key]); } return newObj; } const newObj = deepCopy(randomObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread Syntax
Object.assign
Object.fromEntries and Object.entries:
JSON
Reference Assignment
Deep copy using a recursive function

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Spread Syntax	149.5 Ops/sec
Object.assign	142.3 Ops/sec
Object.fromEntries and Object.entries:	106.5 Ops/sec
JSON	139.2 Ops/sec
Reference Assignment	210.9 Ops/sec
Deep copy using a recursive function	165.9 Ops/sec

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 on MeasureThat.net.

**Benchmark Definition**

The benchmark tests the performance of various JavaScript methods for cloning or copying objects, specifically comparing:

1. Spread syntax (`{...}`)
2. `Object.assign()`
3. `Object.fromEntries()` and `Object.entries()`
4. JSON parsing with `JSON.stringify()` and `JSON.parse()`
5. Reference assignment
6. Deep copy using a recursive function

**Options Compared**

The benchmark compares the performance of each method on large datasets, generated by creating an object with 100 properties (key-value pairs). The results are reported for different browsers and operating systems.

**Method-by-Method Analysis**

Here's a brief analysis of each method:

1. **Spread Syntax (`{...}`)**: This method creates a new object by iterating over the original object's properties and creating a new key-value pair for each property. While it's concise, it may not be as efficient as other methods due to the overhead of function calls.
2. **`Object.assign()`**: This method takes an array of source objects and assigns their properties to the target object. It can be slower than spread syntax because it requires more iterations over the source objects.
3. **`Object.fromEntries()`** and **`Object.entries()`**: These methods create a new object from an iterable (array or map) of key-value pairs. `Object.fromEntries()` is slightly faster because it avoids the overhead of iterating over the array, but both are generally slower than spread syntax due to the creation of temporary arrays.
4. **JSON Parsing with `JSON.stringify()`** and **`JSON.parse()`**: JSON parsing is often slow due to its inherent complexity. While these methods can be useful for serializing and deserializing objects, they're not suitable for large-scale cloning or copying.
5. **Reference Assignment**: This method simply assigns the original object to a new variable, which creates a shallow copy of the object's properties. It's fast but may not work as expected if you need to clone nested objects.
6. **Deep Copy using a Recursive Function**: This method uses a recursive function to create a deep copy of the object, which can be slower due to the overhead of recursive calls.

**Browser and Operating System Variations**

The benchmark results show variations in performance across different browsers (Opera 103) and operating systems (Mac OS X 10.15.7). These variations are likely due to differences in JavaScript engine optimizations, caching, or memory management between browsers and operating systems.

In summary, the benchmark highlights the trade-offs between different cloning methods in JavaScript, with spread syntax often emerging as a fast and concise option. However, the best method for your use case may depend on specific requirements, such as performance, memory usage, or compatibility with older browsers.

Related benchmarks: