Benchmark: object.assign vs spread to new object

Tests:

spread to empty
const firstObject = { sampleData: 'Hello world' } const finalObject = { ...firstObject, };
object.assign to empty
const firstObject = { sampleData: 'Hello world' } const finalObject = Object.assign({}, firstObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread to empty
object.assign to empty

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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
spread to empty	108973552.0 Ops/sec
object.assign to empty	47400856.0 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 test cases.

**Benchmark Overview**

The benchmark, "object.assign vs spread to new object", compares two approaches for creating a new object by copying an existing one:

1. **`Object.assign()`**: A built-in JavaScript method that creates a new object with the same properties as the specified source object(s).
2. **Spread syntax (`...`)**: An expression that creates a new object with properties from the original object.

**Comparison of Options**

The two test cases compare these two approaches:

1. **`spread to empty`**:
	* Uses the spread syntax with an empty object `{}` as the target.
	* Purpose: To measure the performance of creating a new object using the spread syntax with an empty target.
2. **`object.assign to empty`**:
	* Uses `Object.assign()` with an empty object `{}` as the target.
	* Purpose: To measure the performance of creating a new object using `Object.assign()` with an empty target.

**Pros and Cons**

**Spread Syntax (`...`)**

Pros:

* More concise and readable than using `Object.assign()`.
* Creates a shallow copy, which can be beneficial when only copying property names or not modifying existing values.

Cons:

* Can lead to more complex objects being created if the original object has nested properties.
* Performance may vary depending on the browser's optimization of this syntax.

**`Object.assign()`**

Pros:

* More flexible than using the spread syntax, as it allows targeting any type of object or array.
* Well-supported in older browsers and environments.

Cons:

* Can lead to more verbose code when creating new objects.
* May be slower for very large objects due to additional overhead.

**Other Considerations**

When choosing between these two approaches, consider the following factors:

* Code readability: If conciseness is important, use the spread syntax. For readability and maintainability, use `Object.assign()`.
* Performance: In most cases, both approaches will perform similarly well. However, for very large objects or in performance-critical code, the `Object.assign()` method might be slightly faster.

**Library Usage**

There are no libraries used in this benchmark.

**Special JS Features/Syntax**

The benchmark uses the spread syntax (`...`) and `Object.assign()`, which are both built-in JavaScript features. No special features or syntax are used beyond these standard options.

**Alternatives**

Other alternatives for creating new objects include:

* Using `Array.prototype.slice()` to create a shallow copy of an array.
* Utilizing libraries like Lodash (e.g., `_assign()`) or Underscore.js (`_.clone()`) for more complex object manipulation.

However, these alternatives are typically used in specific scenarios or when working with complex data structures. For simple cases like this benchmark, the built-in `Object.assign()` and spread syntax provide suitable options.

Related benchmarks:

object.assign vs spread to new object (version: 0)

Comparing performance of: spread to empty vs object.assign to empty

Created: 2 years ago by: Guest

Jump to the latest result

spread to empty

object.assign to empty

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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