Dans le précédent article, je présentais 3 méthodes de clonage d'un objet en JavaScript:

  • Spread operator
  • JSON stringify
  • _.cloneDeep()


Dans cet article, je réalise une comparaison en terme de temps d'exécution entre les 3 méthodes, à l'aide de ma mini-application js-benchmarks.


J'ai tout d'abord construit 3 objets de complexités différentes:


const object1 = { id: 1, value: 'simpleObject', age: 24, name: 'Im just a simple objects with strings and numbers' };
const object2 = { value: 'mediumObject', date: new Date(), nestedObject: { hello: 'prop1', hi: new Date() }, cb: () => console.log('hello') };
const object3 = { 
	value: 'bigObject', 
	bigArray: [
		object2, object2, object2, object2, object2, object2, object2, object2,
		object2, object2, object2, object2, object2, object2, object2, object2,
		object2, object2, object2, object2, object2, object2, object2, object2
	]
}; 


Puis pour chaque méthode, je répète l'exécution 10 fois pour un tableau de 100 fois chaque objet, de façon à obtenir une moyenne du temps d'exécution (cf. le précédent article de comparaison de performance).


Here are the results (shown in ms):

Voici les points clés à retenir :


  • La méthode la plus rapide est l'utilisation du spread operator, mais notez bien qu'elle n'est pas récursive, donc ce n'est pas nécessairement le bon choix selon la situation.
  • JSON.stringify peut convenir dans le cas où l'objet n'est pas trop gros, sinon le temps d'exécution explose (il faudra en outre vérifier que la méthode convient à la nature de l'objet à cloner).
  • cloneDeep de lodash devrait être utilisé avec parcimonie, et uniquement dans le cas où l'objet à cloner comporte des propriétés complexes à conserver, car le temps d'exécution est conséquent.