Different ways to clone objects in Javascript

clone-objects.js

// 1: Deep copy using iteration
const iterationCopy = (src) => {
  let target = {};
  for (let prop in src) {
    if (src.hasOwnProperty(prop)) {
      target[prop] = src[prop];
    }
  }
  return target;
}

const source = {a:1, b:2, c:3};
const target = iterationCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1


// 2: Converting to JSON and back
const jsonCopy = (src) => JSON.parse(JSON.stringify(src));

const source = {a:1, b:2, c:3};
const target = jsonCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1


// 3: Using Object.assign
const assignCopy = (src) => Object.assign({}, src);

const source = {a:1, b:2, c:3};
const target = assignCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1
// This method has a flaw that it only does a shallow copy.
// It means that nested properties are still going to be copied by reference.


// 4: Deep copy of the object
const deepCopy = (src) => {
  let target = Array.isArray(src) ? [] : {};
  for (let key in src) {
    let k = src[key];
    target[key] = k && typeof k === 'object' ? deepCopy(k) : k;
  }
  return target;
};

const source = {a:1, b:2, c:3};
const target = deepCopy(source);
console.log(target); // {a:1, b:2, c:3}
// Check if clones it and not changing it
source.a = 'a';
console.log(source.a); // 'a'
console.log(target.a); // 1