Create a copy of an object in JavaScript

This post will discuss how to create a copy of an object in JavaScript.

1. Using `Object.assign()` function

The Object.assign() method is used to copy all enumerable own properties from the source object to a target object. You can use this method to create a copy of an object without references, as shown below:

const obj =

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: new Date(),

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

const clone = Object.assign({}, obj);

console.log(clone);

Output:

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: 2020-01-26T14:29:25.074Z,

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

Download Run Code

2. Using Spread operator

With ES6, you can use the Spread operator (...) to create a shallow copy of the object.

const obj =

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: new Date(),

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

const clone = { ...obj };

console.log(clone);

Output:

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: 2020-01-26T14:29:25.074Z,

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

Download Run Code

3. Using jQuery

With jQuery, the $.extend() method can be used to create a shallow copy of an object. It works by copying all non-nullish properties from one object to another object.

const { JSDOM } = require("jsdom");

const { window } = new JSDOM();

var $ = require("jquery")(window);

const obj =

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: new Date(),

undefined: undefined, // lost

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

const clone = $.extend({}, obj);

console.log(clone);

Output:

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: 2020-01-26T14:37:13.666Z,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

Download Code

If the first argument to $.extend is true, it performs a deep copy.

4. Using Underscore/Lodash Library

If you’re already using the Underscore or Lodash library, you can use the _.clone method for creating a shallow copy of the specified object.

var _ = require('underscore');

const obj =

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: new Date(),

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

const clone = _.clone(obj);

console.log(clone);

Output:

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: 2020-01-26T14:38:50.835Z,

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

Download Code

Alternatively, you can use the _.extend method, similar to jQuery’s $.extend() method.

var _ = require('underscore');

const obj =

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: new Date(),

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

const clone = _.extend({}, obj);

console.log(clone);

Output:

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: 2020-01-26T14:41:36.353Z,

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

Download Code

5. Custom Routine

In pure JavaScript, you can write a custom routine for copying an object. The following code can be used as a starting point for all your copying needs:

function clone(obj) {

if (obj == null || typeof obj !== 'object') {

return obj;

}

if (obj instanceof Date) {

return new Date(obj);

}

if (obj instanceof RegExp) {

return new RegExp(obj);

}

// handle other types if required

var clonedObj = (obj instanceof Array) ? [] : {};

for (var key in obj) {

clonedObj[key] = clone(obj[key]);

}

return clonedObj;

};

const obj =

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: new Date(),

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

console.log(clone(obj));

Output:

{

string: 'primitive string',

number: 100,

boolean: true,

null: null,

date: 2020-01-26T14:33:50.020Z,

undefined: undefined,

infinity: Infinity,

regexp: /(\w+)\s(\w+)/

}

Download Run Code

That’s all about creating a copy of an object in JavaScript.

Also See:

Deep clone an object in JavaScript

Create a copy of an object in JavaScript

1. Using Object.assign() function

2. Using Spread operator

3. Using jQuery

4. Using Underscore/Lodash Library

5. Custom Routine

Share this:

1. Using `Object.assign()` function