Benchmark: Spread vs Object.assign vs Object.create

Script Preparation code:

for (i = 0; i < 10; i++) {}

Tests:

Test Spread operator
const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; const secondObject = {...firstObject};
Test Object.create
const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; const secondObject = Object.create(firstObject);
Test Object.assign
const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; const secondObject = Object.assign({}, firstObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Test Spread operator
Test Object.create
Test Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0

Browser/OS: Firefox 121 on Windows

View result in a separate tab

Test Object.assign

22.9M/s

Test Spread operator

15.8M/s

Test Object.create

1.7M/s

View exact numbers

Test name	Executions per second
✓ Test Object.assign	22,896,494 Ops/sec
Test Spread operator	15,832,545 Ops/sec
Test Object.create	1,730,335 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

The provided JSON represents a JavaScript microbenchmark, specifically testing the performance of three methods to create a shallow copy of an object:

1.  **Spread operator (`...`)**: This method creates a new object by spreading the properties of another object.
2.  **Object.assign()**: This method creates a new object and copies the specified properties from an existing object into it.
3.  **Object.create()**: This method creates a new object and copies all own enumerable properties from a given object (the prototype) to the new object.

The benchmark measures which approach is faster in terms of execution per second for each test case.

**Options comparison**

The main options being compared are:

*   Spread operator (`...`): Creates a new object by spreading the properties of another object.
    *   Pros:
        *   Simple and concise syntax.
        *   Fast and efficient, as it only copies the properties without modifying the original object.
    *   Cons:
        *   May not be suitable for deep objects or objects with complex property names, as it can lead to unexpected behavior.
*   Object.assign(): Creates a new object and copies the specified properties from an existing object into it.
    *   Pros:
        *   Flexible and adaptable syntax, allowing you to specify which properties to copy.
        *   Supports copying of nested objects using the `{ property: value }` syntax.
    *   Cons:
        *   Can be slower than the spread operator due to additional overhead from checking the `Object.assign()` method's signature.
*   Object.create(): Creates a new object and copies all own enumerable properties from a given object (the prototype) to the new object.
    *   Pros:
        *   More flexible than `Object.assign()`, as it allows you to set any property on the new object, not just those specified in the original object.
    *   Cons:
        *   Less intuitive syntax and may be harder to read for developers familiar with `Object.assign()`.

**Library usage**

In this benchmark, none of the libraries are explicitly mentioned. However, it is worth noting that both `Object.assign()` and `Object.create()` rely on the JavaScript prototype chain, which is a fundamental concept in JavaScript.

**Special JS feature or syntax**

The spread operator (`...`) was introduced in ECMAScript 2015 (ES6) as a new way to create objects from existing objects. It has become a popular and efficient method for creating shallow copies of objects.

In the provided benchmark, the spread operator is used in the following test case:

```javascript
const firstObject = { \r\n  \tsampleData: 'Hello world',\r\n\tsampleMethod: () => { return true; }\r\n};\r\nconst secondObject = {...firstObject};
```

**Alternatives**

Other alternatives for creating shallow copies of objects in JavaScript include:

*   Using the `JSON.parse(JSON.stringify(obj))` method, which can create a deep copy of an object by serializing it as JSON and then parsing it back into an object.
*   Using a library like Lodash, which provides a `cloneDeep()` function for creating deep copies of objects.

However, these alternatives are generally slower and more memory-intensive than the methods being tested in this benchmark.

Spread vs Object.assign vs Object.create (version: 0)

Comparing performance of: `Test Spread operator vs Test Object.create vs Test Object.assign`

Created: 2 years ago by: Guest

Go to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Spread vs Object.assign vs Object.create (version: 0)

Comparing performance of: Test Spread operator vs Test Object.create vs Test Object.assign

Created: 2 years ago by: Guest

Go to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Test Spread operator vs Test Object.create vs Test Object.assign`