Benchmark: JavaScript spread operator vs Object.assign performance vs. Direct assignment

Tests:

Using the spread operator
const firstObject = { sampleData: {value: 'Hello world'} } const finalObject = { ...firstObject };
Using Object.assign
const firstObject = { sampleData: {value: 'Hello world'} } const finalObject = Object.assign({}, firstObject);
Direct assign
const firstObject = { sampleData: {value: 'Hello world'} } const finalObject = {}; finalObject.sampleData = firstObject.sampleData

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Direct assign

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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!

**What is being tested?**

The provided JSON represents a benchmark that tests three different approaches to assign data from one object to another in JavaScript:

1. **Spread Operator (`...`)**: This syntax was introduced in ECMAScript 2018 and allows you to create a new object by copying all the key-value pairs from an existing object.
2. **Object.assign()**: This method is used to copy properties from one or more source objects to a destination object.
3. **Direct assignment**: This involves assigning each property individually, like `finalObject.sampleData = firstObject.sampleData`.

**Options compared**

The benchmark compares the performance of these three approaches on the same test data:

* The input object (`firstObject`) contains a nested object (`sampleData`) with a string value.
* Each approach is used to create a new object (`finalObject`) that inherits or copies the `sampleData` property from `firstObject`.

**Pros and Cons**

Here's a brief summary of the advantages and disadvantages of each approach:

1. **Spread Operator (`...`)**:
	* Pros: concise, readable syntax; creates a shallow copy of the original object.
	* Cons: can be slower than other approaches due to the overhead of creating a new object and copying properties.
2. **Object.assign()**:
	* Pros: efficient, flexible; allows for custom merging logic.
	* Cons: may require additional setup (e.g., using `Object.create()` or specifying source objects).
3. **Direct assignment**:
	* Pros: simple, straightforward syntax; no overhead of creating a new object.
	* Cons: can be verbose and less readable; requires manual property copying.

In terms of performance, the benchmark results indicate that:

1. Direct assignment is generally the fastest approach.
2. Object.assign() is slightly slower than direct assignment but still relatively efficient.
3. The spread operator (`...`) is the slowest due to its overhead in creating a new object and copying properties.

**Library/Feature explanation**

None of the individual test cases rely on any libraries or special JavaScript features beyond the syntax used for each approach (spread operator, Object.assign(), and direct assignment).

**Other alternatives**

If you're interested in exploring alternative approaches, consider:

* Using destructuring assignment (`const [sampleData] = firstObject; finalObject.sampleData = sampleData;`)
* Employing a more explicit object creation method, like `finalObject = { ...firstObject };`
* Utilizing libraries like Lodash or Underscore.js for more complex merging logic.

Keep in mind that these alternatives may not be covered by the original benchmark.

Related benchmarks:

JavaScript spread operator vs Object.assign performance vs. Direct assignment (version: 0)

Comparing performance of: Using the spread operator vs Using Object.assign vs Direct assign

Created: 2 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Direct assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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