Benchmark: JSON.stringify vs structuredClone vs spread vs Object.assign()

Script Preparation code:

var MyObject = {
  description: 'Creates a deep copy of source, which should be an object or an array.',
  myNumber: 123456789,
  myBoolean: true,
  jayson: {
    stringify: 'JSON.stringify() method converts a JavaScript value to a JSON string....',
    parse: 'JSON.parse() method parses a JSON string...'
  }
};

var myCopy = null;

Tests:

JSON.stringify
myCopy = JSON.parse(JSON.stringify(MyObject));
structuredClone
myCopy = structuredClone(MyObject);
spread
myCopy = {...MyObject};
Object.assign
myCopy = Object.assign({}, MyObject);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON.stringify
structuredClone
spread
Object.assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

Browser/OS: Firefox 143 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
JSON.stringify	1878775.1 Ops/sec
structuredClone	1981056.2 Ops/sec
spread	25307286.0 Ops/sec
Object.assign	61702624.0 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 benchmark and explain what's being tested.

The benchmark is designed to compare four different methods for creating a deep copy of an object: `JSON.stringify`, `structuredClone`, spread operator (`...`), and `Object.assign()`. The goal is to determine which method is the fastest and most efficient.

Here are the pros and cons of each approach:

1. **JSON.stringify**:
	* Pros: Widely supported, easy to implement.
	* Cons: Inefficient for large objects, can lead to increased memory usage due to string representation.
2. **structuredClone**:
	* Pros: Designed specifically for creating deep copies, efficient for large objects.
	* Cons: Not widely supported (only available in Chrome 80+), requires experimental flags (-XExperimentalJSHostedRuntime).
3. **Spread operator (`...`)**:
	* Pros: Simple and concise, efficient for small to medium-sized objects.
	* Cons: May not work as expected with certain types of objects or arrays, can lead to slower performance for very large objects.
4. **Object.assign()**:
	* Pros: Widespread support, easy to implement.
	* Cons: Not designed specifically for deep copies, may not preserve object properties or prototype chains.

The benchmark creates an object `MyObject` with nested properties and then uses each of the four methods to create a copy of it. The resulting objects are compared to ensure they are identical.

The test cases in the provided JSON represent individual runs of the benchmark, where each run corresponds to one of the four methods being tested.

Now, let's look at some specific notes on the libraries and features used in this benchmark:

* `structuredClone` is a relatively new function introduced in Chrome 80, designed specifically for creating deep copies. It's still an experimental flag (-XExperimentalJSHostedRuntime) but gaining popularity.
* There are no special JavaScript features or syntax being tested in this benchmark.

If you're interested in exploring alternative methods for creating deep copies, some other options include:

* Using a library like Lodash's `cloneDeep()` function
* Implementing your own custom copying logic using recursion or iteration
* Utilizing a library like Immutable.js for immutable data structures

Keep in mind that the performance differences between these methods may vary depending on specific use cases and requirements.

Related benchmarks:

JSON.stringify vs structuredClone vs spread vs Object.assign() (version: 0)

JSON.stringify vs structuredClone vs spread vs Object.assign()

Comparing performance of: JSON.stringify vs structuredClone vs spread vs Object.assign

Created: 2 years ago by: Guest

Jump to the latest result

JSON.stringify

structuredClone

spread

Object.assign

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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