How to Copy Objects in JavaScript
Tags: oop, javascript, tutorial
Published: 2019-12-28 03:48:14

**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` :

```javascript
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:

```javascript
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` :

```javascript
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:

```javascript
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.