Cloning Objects in JavaScript

Here are three ways that you can create an exact copy of an object in Javascript:

const originalObject = {a: 1, b: 2, c: {d: 3}};
const copiedObject = {...originalObject};

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

console.log(originalObject[0] === copiedObject[0]) // false

const originalObject = {a: 1, b: 2, c: {d: 3}};
const copiedObject = Object.assign({}, originalObject);

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

console.log(originalObject[0] === copiedObject[0]) // false

const originalObject = {a: 1, b: 2, c: {d: 3}};
const copiedObject = JSON.parse(JSON.stringify(originalObject));

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

console.log(originalObject[0] === copiedObject[0]) // false

You may have noticed that the objects should have the same content, but are not strictly equal.

Why? Because they have different references in memory. You can create a copy of an object, but in order for it to be strictly equal to the original it was copied from, it must reference the same thing.

If you need to compare two objects to see if they have the same contents, you can use JSON.stringify() to compare them. What this essentially does is convert each object into a string, which can be compared:

console.log(JSON.stringify(peeps[0]) === JSON.stringify(users[0])); // true

Another example - iterate over an array to create a shallowCopy of an object:

// one param, value, an array of objects
function clone(value) {
  // create an empty array hold to hold new values
  const hold = [];
  // iterate over the value array
  for (let i = 0; i < value.length; i++) {
    // for each value, push a reference to the original to hold
    hold.push(value[i]);
  }
  // return hold
  return hold;
}

const users = [{ 'user': 'barney' },{ 'user': 'fred' }];

const shallowClone = clone(users);
console.log(shallowClone); // [ { user: 'barney' }, { user: 'fred' } ]
// True, because the instances of both reference the same location in memory
console.log(shallowClone[0] === users[0]); // true

function clone(value) {
  // create an empty array hold to hold new values
  const hold = [];
  // iterate over the value array
  for (let i = 0; i < value.length; i++) {
    // for each value, push a clone to hold using spread operator
    hold.push({...value[i]});
  }
  // return hold
  return hold;
}

const users = [{ 'user': 'barney' },{ 'user': 'fred' }];

const shallowClone = clone(users);
console.log(shallowClone); // [ { user: 'barney' }, { user: 'fred' } ]

// they are not strictly equal because the objects are occupying different locations in memory.
console.log(shallowClone[0] === users[0]); // false