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

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);
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: one year ago)

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

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
Test Spread operator	13550245.0 Ops/sec
Test Object.create	1353093.1 Ops/sec
Test Object.assign	16466277.0 Ops/sec
Test New Object	694617.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark comparison focuses on various methods for creating and copying JavaScript objects, specifically testing the following techniques:

1. **Spread Operator (`...`)** 
2. **Object.create()**
3. **Object.assign()**
4. **Constructor Function (using `new`)**

### 1. Spread Operator
- **Test Case:** 
  ```javascript
  const secondObject = {...firstObject}; // using spread operator
  ```
- **Performance:** Executions per second: **51,637,868.0**
- **Pros:**
  - Simplifies object copying and merging syntax.
  - Shallow copies properties, making it suitable for clone-like behavior.
  - Readable and expressive.
- **Cons:**
  - Only creates shallow copies, meaning nested objects remain referenced.

### 2. Object.assign()
- **Test Case:** 
  ```javascript
  const secondObject = Object.assign({}, firstObject); 
  ```
- **Performance:** Executions per second: **19,372,564.0**
- **Pros:**
  - Versatile, allowing merging properties from multiple sources.
  - Well-understood and widely used in older codebases.
- **Cons:**
  - Also only performs a shallow copy.
  - May be less intuitive than the spread operator for new developers.

### 3. Object.create()
- **Test Case:** 
  ```javascript
  const secondObject = Object.create(firstObject); 
  ```
- **Performance:** Executions per second: **2,057,473.875**
- **Pros:**
  - Creates a new object with the prototype set to an existing object, allowing for inheritance.
  - Useful for scenarios where prototype chain establishment is needed.
- **Cons:**
  - Does not copy properties; the new object only inherits properties from the prototype.
  - Slower performance in copying simple objects relative to the other methods.

### 4. Constructor Function (using new)
- **Test Case:** 
  ```javascript
  const secondObject = new firstObject(); 
  ```
- **Performance:** Executions per second: **696,882.5625**
- **Pros:**
  - Establishes a more structured approach to creating objects.
  - Allows for the creation of multiple instances with the same constructor function.
- **Cons:**
  - Requires understanding of the constructor pattern, which might be less immediately apparent for simple object creation.
  - Significantly slower than the other methods for the creation of a simple object.

### Other Alternatives
- **JSON.parse(JSON.stringify(object))**: This method can create a deep copy of an object but has performance limitations and does not work well with functions or methods within objects.
- **Lodash's `cloneDeep`**: A library offering deep cloning functionality, better suited for complex objects that include nested structures.

### Conclusion
Based on performance results, the spread operator demonstrates the best efficiency for copying and creating objects in simple use cases, while methods like `Object.create` and using `new` serve different purposes. While each technique has pros and cons, developers should choose based on the specific needs for object creation, inheritance, or property copying in their applications.

Related benchmarks:

bechn Spread operator VS Object.assign VS Object.create vs new Object for simple Objects (version: 1)

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

Created: one year 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>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):