The best way to copy objects

Modern structuredClone() is less performant because it is more capable than JSON.parse(JSON.stringify())

Copying or cloning objects is a common operation in the code of web applications. It might be needed, for example, for displaying filtered data while preserving the data loaded from the server. Two techniques can be used for cloning objects. One way is to use JSON.parse(JSON.stringify()) to convert the object into a JSON, and then to convert the JSON string back into an object. Another way is to use the modern method structuredClone(). In this post I want to explore when structuredClone() is worth using. I start from its known weak point — performance.

structuredClone() is a bit slower than JSON.parse(JSON.stringify())

The chart compares the time required to copy the same object using JSON.parse(JSON.stringify()) and structuredClone(). The bars representing the two ways are labelled as JSON and sC, respectively. The time was measured with 5 different increasingly complex objects. A number after a label is a serial number of the object, it correlates with the…