Benchmark: Spread operator 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(Object.getPrototypeOf(firstObject), Object.getOwnPropertyDescriptors(firstObject));
Test Object.assign
const firstObject = { sampleData: 'Hello world', sampleMethod: () => { return true; } }; const secondObject = Object.assign({}, firstObject); Object.setPrototypeOf(secondObject, Object.getPrototypeOf(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: 22 days ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Test Spread operator	91469712.0 Ops/sec
Test Object.create	2506347.5 Ops/sec
Test Object.assign	27457132.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its individual test cases.

**Benchmark Overview**

The benchmark compares three approaches to create a shallow copy of an object:

1. **Spread operator (`...`)**: Creates a new object with the same properties as the original object, without modifying it.
2. **`Object.assign()`**: Copies all enumerable own properties from one or more source objects to a target object.
3. **`Object.create()`**: Creates a new object that inherits properties from an existing object (the prototype).

**Options Compared**

The benchmark tests each approach with the same input object:

```javascript
const firstObject = {
  sampleData: 'Hello world',
  sampleMethod: () => { return true; }
};
```

The objective is to determine which approach is faster and more efficient.

**Pros and Cons of Each Approach**

1. **Spread operator (`...`)**:
	* Pros: Simple, concise, and creates a shallow copy without modifying the original object.
	* Cons: Can be slower than `Object.assign()` for large objects or when dealing with complex property names.
2. **`Object.assign()`**:
	* Pros: Can handle large objects, complex property names, and can also merge multiple source objects into one target object.
	* Cons: Can be slower due to the overhead of iterating over properties, and may modify the original object if not used carefully.
3. **`Object.create()`**:
	* Pros: Creates a new object with a specific prototype, which can be useful for creating a new object that inherits properties from another object.
	* Cons: May be slower than `Object.assign()` or spread operator due to the overhead of creating a new object and setting its prototype.

**Library/Functionality Used**

None of the test cases explicitly use any third-party libraries. However, it's worth noting that some browsers may have internal optimizations for these functions that could affect their performance in certain scenarios.

**Special JavaScript Features/Syntax**

The benchmark uses modern JavaScript features, such as:

* Destructuring assignment (`const { sampleData, sampleMethod } = firstObject;`)
* Template literals (`'\r\n  \tsampleData: 'Hello world',\r\n\tsampleMethod: () => { return true; }\r\n;'`)

These features are not specific to the benchmark itself but rather demonstrate the use of modern JavaScript in the test cases.

**Other Alternatives**

Other approaches to create a shallow copy of an object include:

* Using `JSON.parse(JSON.stringify(obj))`
* Using a library like Lodash's `cloneDeep()`

Keep in mind that these alternatives may have different performance characteristics and trade-offs compared to the methods tested in this benchmark.

The results from the benchmark show that the spread operator (`...`) is the fastest approach, followed closely by `Object.assign()`. `Object.create()` is slower due to its overhead of creating a new object and setting its prototype.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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