JavaScript how to make a copy of the object

Learn how to make a copy of an object in Javascript with a simple example.

Making a Copy of an Object in JavaScript

Objects are a fundamental part of JavaScript, and being able to make a copy of an object is an important skill for any JavaScript programmer. There are several different ways to make a copy of an object, and each approach has its own advantages and drawbacks. This article will discuss the various ways of copying an object in JavaScript and will provide an example of each approach.

Object.assign() Method

The Object.assign() method is the most common and straightforward approach to copying an object. This method takes two parameters: the target object and the source object. The target object is the object that will be modified, and the source object is the object that contains the properties that will be copied over to the target object.


// Create source and target objects
const source = {a: 1, b: 2, c: 3};
const target = {};

// Copy source object properties to target object
Object.assign(target, source);

console.log(target); // {a: 1, b: 2, c: 3}

Object Spread Syntax

Another newer way of copying an object is to use object spread syntax. This approach is similar to the Object.assign() method, but it has the advantage of being more concise and easier to read. Object spread syntax works by taking the source object and spreading it into the target object. This approach also allows you to combine multiple objects into a single object.


// Create source and target objects
const source = {a: 1, b: 2, c: 3};
const target = {};

// Copy source object properties to target object
const combined = {...target, ...source};

console.log(combined); // {a: 1, b: 2, c: 3}

Object.create() Method

The Object.create() method is another way of creating a copy of an object. This method takes two parameters: the prototype object and the properties object. The prototype object is the object that the new object will inherit from, and the properties object is an optional parameter that is used to add additional properties to the new object. Note that this method will only create a shallow copy of the object, so any objects contained within the original object will not be copied.


// Create source object
const source = {a: 1, b: 2, c: 3};

// Create copy of source object
const copy = Object.create(source);

console.log(copy); // {a: 1, b: 2, c: 3}

JSON.parse() and JSON.stringify() Method

The JSON.parse() and JSON.stringify() methods are two other ways of creating a copy of an object. This approach works by first using the JSON.stringify() method to convert the object into a JSON string, and then using the JSON.parse() method to convert the JSON string back into an object. This approach is useful if you want to make a deep copy of an object, since any nested objects will also be copied.


// Create source object
const source = {a: 1, b: 2, c: {d: 4}};

// Create copy of source object
const copy = JSON.parse(JSON.stringify(source));

console.log(copy); // {a: 1, b: 2, c: {d: 4}}

In conclusion, there are several different ways to make a copy of an object in JavaScript. Each approach has its own advantages and drawbacks, so it is important to choose the approach that is best suited for your particular use case.

javascript