Une bizarrerie Javascript qui vous rattrapera

Clonage de moutons

Cette pièce décrit une fonctionnalité que les bons développeurs Javascript devraient connaître. Et une fois que vous avez lu cette pièce, vous pouvez prétendre que vous la connaissez depuis des siècles comme moi.

Remarque: Si vous n'êtes pas un développeur Javascript, cela peut être un peu difficile à mettre en place. Si vous l'êtes, attachez votre ceinture pour une balade extrêmement courte.

Tout est lié à la copie de variables (ou au clonage, d'où les moutons).

Plongeons directement.

Copie de chaînes

Faisons un peu de codage:

var initialName = 'William';
var copyName = initialName; copyName = 'Bill';
console.log (initialName); // affiche 'William' console.log (copyName); // imprime 'Bill'

Tout cela semble attendu. Nous copions initialName puis modifions sa valeur. initialName imprime 'William' et copiedName imprime 'Bill'.

Jusqu'ici tout va bien. Essayons le même exercice avec des objets au lieu de chaînes. (Attendez-vous à l'inattendu)

Copie d'objets

var initialObject = {nom: 'William'};
var copyObject = initialObject; copyObject.name = 'Bill';
console.log (initialObject.name); // affiche 'Bill' console.log (copyObject.name); // imprime 'Bill'

Hmmm, voici le problème. Lorsque nous imprimons le nom de initialObject, il a changé en Bill.

Que s'est-il donc passé ici?

Lorsque nous définissons le nom dans copyObject, cela change également le nom dans initialObject. En effet, les objets sont copiés par référence. copyObject n'est qu'une référence aux données sous-jacentes.

Ainsi, lorsque nous changeons le nom dans copyObject, cela change également le nom dans initialObject car il fait référence au même bit de données sous-jacentes.

Où vous pourriez vous faire prendre

Dans les applications de grande taille, cela pourrait entraîner le fait que des parties de vos structures de données se trouvent effectivement à plusieurs endroits en même temps.

Donc, si vous modifiez un objet dans une partie de votre code d'application, vous pouvez le changer ailleurs. Cela peut parfois provoquer un comportement indésirable (comme un nouveau rendu) et peut être difficile à déboguer et à isoler.

Bien que cela semble vraiment simple, dans les applications Web complexes utilisant des frameworks populaires, ce simple problème de niveau de base peut causer de graves maux de tête aux développeurs.

Exemple Redux / React

Un exemple où j'ai vu les développeurs se faire attraper encore et encore est dans les créateurs d'actions Redux où vous manipulez l'état avant d'envoyer des actions. En manipulant l'objet transmis au créateur d'action sans le cloner, vous pouvez réellement modifier l'état sous-jacent ou réagir à l'état du composant avant votre envoi.

Notre solution

Il existe de nombreuses bibliothèques qui fournissent des fonctions de clonage pour les objets et les tableaux, par exemple, Lodash.

Chez pilcro, nous utilisons Immutable.js de Facebook pour éviter ce problème. Même s'il s'agit d'une grande bibliothèque, elle permet à nos développeurs d'écrire du javascript fonctionnel prévisible et d'éviter cet écueil. Je ne pourrais plus le recommander.

Nous y voilà donc, une fonctionnalité très simple mais importante à connaître en Javascript. Si vous n'êtes pas un développeur Javascript, bravo pour arriver à la fin.

Si vous êtes un développeur Javascript senior et que c'était une nouvelle pour vous, vous devriez vous sentir comme ceci:

giphy

Si vous avez aimé cette histoire, veuillez et veuillez la partager avec les autres. Veuillez également consulter mon entreprise sur pilcro.com. Pilcro aide les startups à rester cohérentes avec la marque sur tous leurs différents canaux marketing. Vous allez adorer ce que nous faisons!