Run results for: JS Cloning benchmarking

Test name	Executions per second
✓ Spread operator (...)	19,178 Ops/sec
jQuery.extend(true)	18,136 Ops/sec
JSON.parse(JSON.stringify())	13,989 Ops/sec
Lodash.cloneDeep()	9,801 Ops/sec
structuredClone()	1,928 Ops/sec
Custom function	6 Ops/sec

Spread operator (...)

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = { ...base };

JSON.parse(JSON.stringify())

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = JSON.parse(JSON.stringify(base));

Custom function

function myClone(aObject) {
  // Prevent undefined objects
  // if (!aObject) return aObject;
  let bObject = Array.isArray(aObject) ? [] : {};
  let value;
  for (const key in aObject) {
    // Prevent self-references to parent object
    // if (Object.is(aObject[key], aObject)) continue;
    value = aObject[key];
    bObject[key] = (typeof value === "object") ? myClone(value) : value;
  }
  return bObject;
};
const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = myClone(base);

Lodash.cloneDeep()

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = _.cloneDeep(base);

jQuery.extend(true)

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = jQuery.extend(true, {}, base);

structuredClone()

const base = {
	firstName: 'John',
  lastName: 'Doe',
  size: 170,
  birthDate: new Date(1985, 0,15),
  married: true,
  address: {
  	street: '2 av Victor Hugo',
    country: 'FR',
  },
  childrens: [
  	{
    	name: 'Paul',
      age: 8,
    },
  ],
  functions: [],
  otherObjs: {
  	mySet: new Set(["a","b","c"]),
    myMap: new Map([["apples", 500],["bananas", 300],["oranges", 200]]),
    myErr: new Error("Oups !"),
    myReg: new RegExp(/ab+c/, "i"),
    myBlob: new Blob(["<html>…</html>"], {type: 'text/html'}),
    myFile: new File([""], "filename"),
    myArrBuff: new ArrayBuffer(8),
    myImgData: new ImageData(300, 300),
  },
}
const copy = structuredClone(base);

Run results for: JS Cloning benchmarking

Comparing performance of: Spread operator (...) vs JSON.parse(JSON.stringify()) vs Custom function vs Lodash.cloneDeep() vs jQuery.extend(true) vs structuredClone() By cloning a complex object with nested specific objects (ArrayBuffer, Set, Map, RegExp, etc.)

Spread operator (...)

JSON.parse(JSON.stringify())

Custom function

Lodash.cloneDeep()

jQuery.extend(true)

structuredClone()