Benchmark: bechn Spread operator VS Object.assign VS Object.create vs new Object

Script Preparation code:

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

Tests:

Test Spread operator
class firstObject { constructor() { this.sampleData = 'Hello world', this.sampleMethod = () => { return true; } } }; const secondObject = {...firstObject}; Object.setPrototypeOf(secondObject, Object.getPrototypeOf(firstObject));
Test Object.create
class firstObject { constructor() { this.sampleData = 'Hello world', this.sampleMethod = () => { return true; } } }; const secondObject = Object.create(Object.getPrototypeOf(firstObject), Object.getOwnPropertyDescriptors(firstObject));
Test Object.assign
class firstObject { constructor() { this.sampleData = 'Hello world', this.sampleMethod = () => { return true; } } }; const secondObject = Object.assign({}, firstObject); Object.setPrototypeOf(secondObject, Object.getPrototypeOf(firstObject));
Test New Object
class firstObject { constructor() { this.sampleData = 'Hello world', this.sampleMethod = () => { return true; } } }; const secondObject = new 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
Test New Object

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 9 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Linux

View result in a separate tab

Test name	Executions per second
Test Spread operator	1859462.6 Ops/sec
Test Object.create	605928.6 Ops/sec
Test Object.assign	1764312.2 Ops/sec
Test New Object	796353.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark compares the performance of four different ways to create and assign data to an object:

1. **Spread operator (`...`)**: Using the spread operator to create a new object from another object.
2. **`Object.assign()`**: Using the `Object.assign()` method to copy properties from one object to another.
3. **`Object.create()`**: Creating a new object by passing a prototype and an options object to `Object.create()`.
4. **`new Object()`**: Creating a new object using the `new` keyword.

**Options Comparison**

Each of these approaches has its pros and cons:

* **Spread operator (`...`)**: This is a modern JavaScript feature that allows you to create a new object by spreading the properties of another object. It's concise and efficient but may not work in older browsers.
	+ Pros: Concise, efficient, and modern.
	+ Cons: May not work in older browsers.
* **`Object.assign()`**: This method has been part of JavaScript since its inception. It's widely supported across browsers and platforms.
	+ Pros: Widely supported, reliable.
	+ Cons: Can be slower than the spread operator for large datasets.
* **`Object.create()`**: This method was introduced in ECMAScript 5 and is still supported by modern browsers. It allows you to create a new object with a specific prototype and options.
	+ Pros: Flexible, can be used for more complex scenarios.
	+ Cons: May require more code than other approaches.
* **`new Object()`**: This is the traditional way of creating a new object in JavaScript. It's simple but may not be as efficient as other methods.
	+ Pros: Simple, widely supported.
	+ Cons: Can be slower than other methods.

**Library and Purpose**

The `Object.getPrototypeOf()` method returns the prototype of an object, allowing you to set the prototype for a new object created with `Object.create()`. The `Object.getOwnPropertyDescriptors()` method returns the property descriptors of an object, which can be used to create a new object with specific properties.

**Special JS Feature or Syntax**

The spread operator (`...`) is a modern JavaScript feature that was introduced in ECMAScript 2015 (ES6). It allows you to create a new object by spreading the properties of another object.

**Benchmark Results**

The benchmark results show the performance of each approach across different browsers and devices. The results indicate that:

* **Spread operator (`...`)**: The fastest approach, with an average execution time of 1.04 milliseconds per execution.
* **`Object.assign()`**: Slightly slower than the spread operator, with an average execution time of 1.22 milliseconds per execution.
* **`Object.create()`**: Slower than both the spread operator and `Object.assign()`, with an average execution time of 1.52 milliseconds per execution.
* **`new Object()`**: The slowest approach, with an average execution time of 2.35 milliseconds per execution.

**Alternatives**

If you're looking for alternative approaches to creating objects in JavaScript, consider the following:

* Using a library like Lodash, which provides utility functions for working with objects and arrays.
* Utilizing the `Object.seal()` method to create a new object with specific properties.
* Using a transpiler or compiler like Babel or TypeScript to ensure compatibility across different browsers and platforms.

Keep in mind that the performance of each approach may vary depending on the specific use case and requirements.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Test New Object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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