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

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 16 runs

Test Spread operator

1.4M/s

Test Object.assign

1.3M/s

Test New Object

796K/s

Test Object.create

523K/s

Fastest: Test Spread operator (2.6x faster)

View exact numbers

✓ Test Spread operator: 1,384,262 ops/sec
• Test Object.assign: 1,262,455 ops/sec
• Test New Object: 795,779 ops/sec
• Test Object.create: 522,858 ops/sec

Firefox 7 runs

Test Object.assign

5.2M/s

Test Spread operator

4.6M/s

Test Object.create

1.2M/s

Test New Object

1.0M/s

Fastest: Test Object.assign (5.1x faster)

View exact numbers

✓ Test Object.assign: 5,167,806 ops/sec
• Test Spread operator: 4,640,504 ops/sec
• Test Object.create: 1,177,602 ops/sec
• Test New Object: 1,004,150 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
Test New Object

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 142 on Windows

View result in a separate tab

Test Object.assign

9.6M/s

Test Spread operator

8.4M/s

Test Object.create

1.9M/s

Test New Object

1.8M/s

View exact numbers

Test name	Executions per second
✓ Test Object.assign	9,617,136 Ops/sec
Test Spread operator	8,364,710 Ops/sec
Test Object.create	1,930,596 Ops/sec
Test New Object	1,782,910 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 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.

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

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

Created: 6 years ago by: Guest

Go to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Test New Object

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 16 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Created: 6 years ago by: Guest

Go to the latest result

Test Spread operator

Test Object.create

Test Object.assign

Test New Object

Historical Performance Data aggregated from 23 community runs

Desktop Results:

Chrome 16 runs

Firefox 7 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 vs Test New Object`