Benchmark: JavaScript spread operator vs Object.assign performance v2022

Script Preparation code:

var user = {
    id: 1,
    email: 'bob@somewhere.com',
    personalInfo: {
        name: 'Robert',
        address: {
            road: 'Quartier Djinageryber',
            city: 'Timbuktu',
            country: 'Mali'
        }
    }
}

function shallowClone (source) {
  if (source === null || typeof source !== 'object') return source

  return ({}.toString.call(source) === '[object Array]') ? [...source] : { ...source }
}

Tests:

Using the spread operator
var finalObject = { ...user };
Using Object.assign
var finalObject = Object.assign({}, user);
Using for .. of
var finalObject = shallowClone(user);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using the spread operator
Using Object.assign
Using for .. of

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 provided benchmark.

**Benchmark Definition**

The benchmark measures the performance of three methods for creating a shallow clone of an object: using the spread operator (`...`), `Object.assign()`, and a custom implementation called `shallowClone()`.

**Comparison of Options**

1. **Using the Spread Operator (`...`)**
	* Pros:
		+ Simple and concise syntax.
		+ Creates a new, shallow copy of the original object without modifying it.
	* Cons:
		+ May be slower than other methods due to the overhead of creating a new array or object.
2. **Using `Object.assign()`**
	* Pros:
		+ Fast and efficient for simple objects.
		+ Widely supported by most browsers and environments.
	* Cons:
		+ Requires two arguments (target and source), which can be confusing for some developers.
		+ May not work correctly if the target object is an array, as it will throw an error.
3. **Using `shallowClone()`**
	* Pros:
		+ Custom implementation provides full control over the cloning process.
	* Cons:
		+ More verbose and complex syntax than the spread operator or `Object.assign()`.
		+ May have performance overhead due to the additional logic.

**Library Used**

The benchmark uses a custom `shallowClone()` function, which is not part of any standard JavaScript library. This implementation provides a simple way to create a shallow copy of an object without modifying it.

**Special JS Feature/Syntax**

None explicitly mentioned, but the use of template literals (e.g., `"var finalObject = { ...user };"`), arrow functions (e.g., `function shallowClone (source) {...}`), and object spread syntax (`...`)) might be considered special features or syntax for some developers.

**Other Alternatives**

For creating a shallow clone of an object, other alternatives include:

* Using the `JSON.parse()` method with the `.replace(/["]/g, '')` option to create a deep copy.
* Utilizing libraries like Lodash's `cloneDeep()` function.
* Implementing a recursive cloning algorithm using JavaScript's built-in `Object.keys()`, `Array.prototype.forEach()`, and `Object.assign()` methods.

Keep in mind that the performance differences between these methods can be significant, especially for large objects. The benchmark results provided earlier demonstrate the relative performance of each method in this specific test case.

Related benchmarks:

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

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

Created: 3 years ago by: Guest

Jump to the latest result

Using the spread operator

Using Object.assign

Using for .. of

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):