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));

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Test Spread operator

34.1M/s

Test Object.assign

1.7M/s

Test Object.create

490K/s

Fastest: Test Spread operator (69.6x faster)

View exact numbers

✓ Test Spread operator: 34,112,868 ops/sec
• Test Object.assign: 1,667,937 ops/sec
• Test Object.create: 489,988 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 8 months ago)

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

Browser/OS: Yandex Browser 25 on Mac OS X 10.15.7

View result in a separate tab

Test Spread operator

90.7M/s

Test Object.assign

26.1M/s

Test Object.create

2.0M/s

View exact numbers

Test name	Executions per second
✓ Test Spread operator	90,694,368 Ops/sec
Test Object.assign	26,061,110 Ops/sec
Test Object.create	1,974,650 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 6 years ago by: Guest

Go to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 6 years ago by: Guest

Go to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Chrome 5 runs

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`