Deep copying in JavaScript using structuredClone

For as long as anyone can remember, deep copying in JavaScript was not a built-in feature and we had to resort to libraries or workarounds to create a deep copy of a JavaScript value.

That has changed now.

- Advertisement -

The platform now offers a built-in function that does deep copying for us: structuredClone()

Shallow copying

Before getting into deep copying, let us discuss what shallow copy is. The default behavior of copying in JavaScript is to shallow copy. That means that whenever we create a copy of something, changes to nested values in the original value will be reflected in the copied object as well.

let ingredients_list = ["noodles",{"list":["eggs","flour","water"]}];
let ingredients_list_copy = Array.from(ingredients_list);
ingredients_list_copy[1].list = ["rice flour","water"]

console.log(ingredients_list[1].list);

Even if we use the spread operator, it only goes one level deep. Deeply nested properties are still shallow copied.

const arr = [1, 2, 3];
const arr2 = [...arr]; // like arr.slice()

arr2.push(4);
//  arr2 becomes [1, 2, 3, 4]
//  arr remains unaffected because it is not deeply nested

const oldObj = {a: {b: 10}, c: 2};
const newObj = {...oldObj};

oldObj.a.b = 2; 
console.log(newObj.a.b);
// 2
// newObj `b` value gets updated as it is allocated at the same address

This happens because non-primitive types in JavaScript are handled as references by default. The act of copying them is merely the act of copying the reference to the underlying object. They get allocated the same memory address under the hood. This results in a shallow copy every time a non-primitive object is copied.

Deep copying

Deep copying is the opposite of shallow copying. All the nested properties are copied on an individual basis and whenever a nested property is found, the copying happens recursively, creating an actual copy of that property as well. This results in the copied object not sharing anything with the original object.

Until now, people either relied on Lodash’s cloneDeep() method to achieve deep copying, or the most common hack was:

const myDeepCopy = JSON.parse(JSON.stringify(myOriginal));

In fact, its popularity made the V8 engine optimize JSON.parse for making the above statement execute faster.

While it works amazingly well, there are a couple of shortcomings of that method:

It cannot handle objects that have recursive data structures, it throws an error when working with trees or linked lists
It discards functions
It does not work with built-in types like Map, Set, Date, Regexp, or ArrayBuffer. It throws an error if it encounters one of these as a value