How to Copy Objects in JavaScript

#oop #javascript #tutorial

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Copying objects means making a new object reference to an object that has the same contents as the original. It is used a lot to prevent modifying the original data while you assign a variable to another variable. Because if you assign a variable to a new one, the new one has the same reference as the original object.

There are a few ways to clone objects with JavaScript. Some functions do shallow copying which means that not all levels of the object are copied, so they may still hold the reference the original object. A deep copy copies everything so that nothing references the original object, eliminating any confusion which arises from shallow copy.

Clone Object Using Built in JavaScript Functions

Is you assign a object to another variable, it just assigns the reference to the original object, so both variables will point to the original object. When one of the variables are manipulated, both will be updated. This is not always the desired behavior. To avoid this, you need to copy a object from one variable to another.

In JavaScript, this is easy to do. To shallow copy an object, we can use Objec.assign() , which is built into the latest versions of JavaScript. This function does a shallow copy, which means it only copies the top level of an object, while the deeper levels remain linked to the original object reference. This may not be desired if there is nested in your original object.

Here is an example of how to use Object.assign :

const a = { foo: {bar: 1 }}  
const b = Object.assign({}, a) // get a clone of a which you can change with out modifying a itself

You can also clone an array like this:

const a = [1,2,3]  
const b = Object.assign([], a) // get a clone of a which you can change with out modifying a itself

To do a deep copy of a object without a library, you can JSON.stringify then JSON.parse :

const a = { foo: {bar: 1, {baz: 2}}  
const b = JSON.parse(JSON.strinfy(a)) // get a clone of a which you can change with out modifying a itself

This does a deep copy of an object, which means all levels of an object are cloned instead of referencing the original object.

JSON.parse and JSON.stringify only works with plain objects, which means it cannot have functions and other code that runs.

With ES6, you can also use object destructuring to shallow clone objects, like so:

const a = { foo: {bar: 1}}  
const b = {...a} // get a clone of a which you can change with out modifying a itself

Clone Object Using Third Party Libraries

There are many third parties which can do the same things. Lodash has _.clone and _.cloneDeep functions for shallow and deep copy. Underscore has a _.clone function for shallow copy.

Cloning objects is common operation that is easy to do with JavaScript. Now you can avoid bugs by not modifying objects that you are not intending to modify by copying them and then modify the copied object.

Top comments (3)

Adnan Babakan (he/him) • Dec 28 '19

Perfect!
Once I had this problem and it was giving me headache. Then I found out this.
BTW if you are embedding codes after three back ticks use javascript so your code gets highlighted.