자바 스크립트에서 객체를 복사/복제하는 방법

• Deep Copy: Copying by value would result in two unrelated objects with same value.
• Shallow Copy: Copying by reference means that you have two objects that point to the same data in memory.

If you make a shallow copy of object A to object B, and you change any value in the object B it will also manipulate the object A, since it points to the same reference. If the copied data is a primitive it will copy the value.

A shallow copy successfully copies primitive data types, but any object will not be recursively copied, instead the reference will copied.

When copying/cloning objects the data type of the properties is key to decide what method can be used.

If your object only contains primitive values (numbers, booleans, strings, etc.), you can use the following methods.

• _.clone (lodash)
• Object.assign()
• ... (spread)

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object. It returns the target object. Object.assign performs a shallow copy of an object.

The spread operator is one of the fastest methods and was introduced with ES6. It's clean and simple and a native method (sorry lodash).

const beer = {
  id: 12345,
  name: 'beer',
  icon: '🍺',
  amount: 10,
};

const clonedBeer = { ...beer };

All methods above create shallow copies of objects. If you have non primitive data types as properties, and you try to make a copy, the object will be copied, BUT the underlying objects will be passed by reference to the new object. This means a shallow copy instead of a deep copy has been created.

There are several methods to create a deep clone.

• jQuery.extend()
• JSON - not recommended!
• _.clonedeep()

JavaScript provides native methods for serialization and deserialization, basically to convert most data types to a JSON string, and then a valid JSON string to an object.

IMPORTANT: This method can't be used for copying EVERY object. If the object property (JavaScript) does not have a JSON equivalent, it will be lost in the process of serializing - deserializing.

// This will work
const beerA = {
  id: 12345,
  name: 'beer',
  icon: '🍺',
  amount: 10,
};

const clonedBeerA = JSON.parse(JSON.stringify(beerA));

// This won't work. The function drinkBeer will not be copied and new Date() will be copied as a string.
const beerB = {
  id: 12345,
  name: 'beer',
  icon: '🍺',
  amount: 10,
  date: new Date(),
  drinkBeer: function() {
    this.amount -= 1;
  },
};

const clonedBeerB = JSON.parse(JSON.stringify(beerB));

The method _.cloneDeep(value) from Lodash does exactly the same thing as _.clone(), except that it recursively clones everything in the object.

// import lodash cloneDeep
const cloneDeep = require('lodash.cloneDeep');

const beer = {
  id: 12345,
  name: 'beer',
  icon: '🍺',
  amount: 10,
  date: new Date(),
  drinkBeer: function() {
    this.amount -= 1;
  },
};

const clonedBeer = cloneDeep(beer);

There are several methods to create a deep clone of an object. I recommend to use Lodash, it's convenient and fast.

Import a single function from Lodash to reduce the size of your dependencies.

const clone = require('lodash.clone');
const clonedeep = require('lodash.clonedeep');

Thanks for reading and if you have any questions , use the comment function or send me a message .