How to clone class instance in JavaScript

One very common scenario for wanting to clone a class instance is inside a function.

Why there’s a need to clone objects/arrays inside functions

Because non-primitive data structures are passed by reference in JavaScript, we will inadvertently mutate the original object or array passed into a function as an argument. Here’s a quick illustration of this behaviour:

In the above, userJohn was mutated inside the maskSensitiveInfo() function. Specifically, the line user[field] = 'hidden'; mutates userJohn directly instead of mutating a copy of it.

This behaviour is expected for non-primitive data types; that is, any variables that hold a data type other than the 6 primitives (boolean, number, string, symbol, null, and undefined).

I think it’s also the reason why many JavaScript code style guides I’ve come across so far recommend not mutating arguments within functions. Airbnb’s style guide is an example.

How to shallow copy an object

Instead, they recommend creating a copy of any object/array inside functions – basically as a preventive measure to eliminate the potential for unwanted (and hard to trace) side effects caused by mutating something outside of the function from within.

In the above snippet, the maskSensitiveInfo() function now creates a copy of the user object being passed in and uses it for intermediate steps that mutate it, before returning it. That’s why userJohnMasked is no longer the same object as userJohn (ie. userJohnMasked === userJohn evaluates to false).

Caveat for shallow copy: only one level deep

What we’ve just seen is shallow copying. It’s so-called “shallow” because Object.assign() is only going to copy over the first-level values and assign that to a new object. If, for example, userJohn has a key called “account” and its value is another object, that object is not copied but is once again only referenced.

This snippet illustrates the point:

The original object, userJohn, is accidentally mutated by the line userClone.account.number = 'hidden'. This is one of those horrible bugs that can be really hard to pinpoint.

To do a deep copy (vis-a-vis shallow copy), it’s best to use an external library like jQuery or Lodash:

More details on deep cloning can be found in this SO thread.

So that’s how you shallow/deep clone objects created from using the object literal syntax var x = {}; or var x = Object.create();, meaning they are literally constructed directly from the Object class in JavaScript.

What about objects that are instances of a custom implemented class? As we’ll see, because we will most likely have methods implemented on custom classes, the methods above will not suffice – the instance methods will not be copied over!

Cloning a class instance including its methods

I recently found out something that wasn’t obvious to me – apparently, methods defined within a class definition are automatically added to the prototype chain of the instance object.

So, to copy over the methods from one class instance to another, we will need to copy the prototype chain on top of copying the instance variables.

Here’s the magical series of built-in methods that can be used to create a copy of an instance of a custom-implemented class:

That’s quite horrid syntax on first and second glance, but on third glance…

Here’s how it works:

  1. Object.create() creates a new object and Object.getPrototypeOf() gets the prototype chain of the original instance and adds them to the newly created object
  2. Object.assign() does as we’ve seen earlier, which is to (shallow) copy the instance variables over to the newly created object

This comes in really handy for custom-implemented classes like Stack or Queue or LinkedList.

However, sometimes you will need to add a few extra lines to the copyInstance() method, depending on whether your class has any instance variables that need to be copied as well. In my case, I had to clone an array that is stored as an instance variable called this.stack within the Stack implementation:

Here’s the use case I recently had with a Stack (it uses ES6, so in case you’re unfamiliar, just treat all const and let as vars):

Summary

I didn’t intend for this post to get so long, but I wanted to be complete with my examples because I know it’s important contextual information for wrapping your head around the idea of cloning.

Here’s a summary to make it easier:

  • Non-primitive data types like Objects and Arrays are passed by reference into functions, unlike for primitives which are passed by value
  • Passed by reference implies that if a function mutates or reassigns an argument that is an object or array, the original variable outside of the function also gets mutated/reassigned – this can become a nasty, hard to uncover bug
  • For the above reasons, Airbnb, among other companies, eschew direct mutation or reassignment of arguments within functions
  • The solution is to create a clone before working with the cloned variable inside the function to prevent side effects
  • There are two types of cloning: shallow and deep
  • Shallow only clones one layer deep, which means if any key-value pair in an object contains another object, or if an object is stored as an item in an array, those continue to be references instead of cloned values
  • Deep cloning accounts for nested objects by effectively creating copies recursively until the deepest layer, ensuring there are no connected references to the original object
  • To clone an instance of a custom-implemented class, including its custom-implemented methods within the class, you need to copy over the prototype chain (because methods defined inside a class are added to the prototype chain) as well as the instance variables

I’m mainly writing this to ensure I have a note on this esoteric but essential part of JavaScript, but I certainly hope it was helpful to you in some way too!


Enjoyed reading this? I’ve been writing posts like these revolving around technology, society, and life on and off for more than a year now. This year I’m aiming for 5 posts per week, and I’d love to have you join me on that personal journey. You can read more at my blog or subscribe to get the most interesting posts delivered to your inbox – it’s free.


Also published on Medium.