DEV Community

loading...
Cover image for JavaScript Object Clone

JavaScript Object Clone

bello profile image Bello Updated on ・2 min read


Instead of copying an object, we can clone it. To do that, we need to create a new object and iterate over the existing properties and copy them on the primitive level.

See the example below:

const person = {
  name: "Doe",
  age: 30
};

const clone = {};

// let's copy all person properties into it
for (let key in person) {
  clone[key] = person[key];
}

console.log(clone); // { name: 'Doe', age: 30 }

console.log(person.name); // Doe
Enter fullscreen mode Exit fullscreen mode

An alternative method is to use the Object.assign syntax.

Object.assign(dest, [src1, ..., srcN])
Enter fullscreen mode Exit fullscreen mode

Where,
dest = target object
src1, ..., srcN = source objects

All properties of src1, src2, src3... are copied to dest.

See the example below:

const person = { name: "Bello" };
const isDoctor = { check: false };
const favNum = { number: 69 };

console.log(person); // { name: 'Bello' }

const clonePerson = Object.assign(person, isDoctor, favNum);
console.log(clonePerson); // { name: 'Bello', check: false, number: 69 }
console.log(person); // { name: 'Bello', check: false, number: 69 }

console.log(clonePerson.name, clonePerson.check); // Bello false
console.log(person.name, person.check); // Bello false

person === clonePerson; // true
Enter fullscreen mode Exit fullscreen mode

If the copied property name already exists, it gets overwritten:

const person = { name: "Bello" };

const myName= { name: "Doe" };
const favNum = { number: 69 };

console.log(person); // { name: 'Bello' }

Object.assign(person, myName);

console.log(person.name); // Doe
Enter fullscreen mode Exit fullscreen mode

Object.assign can also replace for...in

const person= {
  name: "Bello",
  favNum: 69
};

const clone = Object.assign({}, person);
console.log(clone); // { name: 'Bello', favNum: 69 }
Enter fullscreen mode Exit fullscreen mode


Nesting Cloning

It is also possible for properties can be references to other objects

const person = {
  name: "Bello",
  details: {
    age: 27,
    isDoctor: false
  }
};

person.details.age; // 27
Enter fullscreen mode Exit fullscreen mode

Nested objects can be cloned.

See the example below:

const person = {
  name: "Bello",
  details: {
    age: 28,
    isDoctor: false
  }
};

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

person.details === clone.details; // true
Enter fullscreen mode Exit fullscreen mode

Note: clone and person share the same details. This means clone.details copies person.details by reference.

person.details.age++; // 28 => change a property from one place
clone.details.age; // 29 => gets reflected at clone object
Enter fullscreen mode Exit fullscreen mode

Happy coding!


Buy me a Coffee


TechStack | Domain

  • Purchase a .com domain name as low as $9.99.
  • Purchase a .net domain name as low as $12.99.
  • Get cheaper domain names as low a $3.
  • Build a website with ease.

Discussion (0)

pic
Editor guide