Immuabilité en JavaScript

Dans cet article, nous allons découvrir un concept largement utilisé de nos jours dans les applications JavaScript: l'immutabilité.

Nous allons en apprendre davantage sur l'immuabilité en JavaScript, comment ce concept peut nous aider à écrire de meilleures applications, et nous aider à gérer nos données, de sorte que lorsque nous l'utilisons quotidiennement, il améliorera notre code. [19659003] La façon dont nous écrivons le code change assez rapidement – chaque jour, nous avons quelque chose de nouveau sorti, un nouveau concept créé, un nouveau framework ou une nouvelle bibliothèque pour nous aider à mieux faire une tâche spécifique. Avec ces changements quotidiens, nous devons toujours apprendre quelque chose de nouveau – cela fait partie de notre travail. Surtout dans le développement JavaScript, un langage qui évolue et change chaque jour avec les nouvelles technologies, nous devons prêter attention à ce qui est vraiment important dans nos applications et à ce qui doit être laissé de côté, trouver la bonne chose pour la bonne situation.

Avec la montée en puissance la popularité de la programmation fonctionnelle, l'un des concepts à la mode et dont on parle beaucoup est l'immuabilité. Ce concept n'est pas exclusif aux langages de programmation fonctionnels – nous pouvons l'avoir dans n'importe quel langage que nous voulons, mais le concept a été vraiment mis en lumière et largement diffusé par la programmation fonctionnelle dans la communauté de développement JavaScript.

Alors, plongeons dans l'immuabilité, en particulier en JavaScript, et comprendre comment il peut nous aider à écrire de meilleures applications qui gardent nos données plus sûres et immuables.

Concept d'immutabilité

Le concept d'immutabilité est assez simple et puissant. Fondamentalement, une valeur immuable est quelque chose qui ne peut pas être changé. Surtout lorsque nous développons nos applications, nous pouvons nous retrouver dans certaines situations où nous voulons créer un nouvel objet dans notre code, contenant une nouvelle propriété ou valeur tout en conservant la valeur d'origine. Le concept d'immuabilité peut nous aider à créer de nouveaux objets, en nous assurant que nous ne modifions pas la valeur d'origine.

En JavaScript, nous avons des types primitifs et des types de référence. Les types primitifs incluent les nombres, les chaînes, les valeurs booléennes, nulles, non définies. Et les types de référence incluent des objets, des tableaux et des fonctions.

La différence entre ces types est que les types primitifs sont immuables (ou non modifiables), et les types de référence sont mutables (modifiables). Par exemple, le type de chaîne est immuable:

 let  myAge  =   "22" ; 

 let  myNewAge  =  myAge  ; 

myAge  =   "23" ; 

Nous venons de créer deux variables et d'attribuer myAge à la variable myNewAge . Mais après avoir changé la valeur de myAge nous verrons qu'ils ne sont pas les mêmes.

 console.log (myAge === myNewAge); // faux

const vs. let

La ​​version ES6 nous a permis de remplacer les variables de notre code par des constantes en utilisant le mot-clé const . Mais un petit détail que beaucoup de développeurs pourraient ne pas remarquer, c'est que le mot clé const n'est pas immuable.

 const myName = "Leonardo Maldonado";

Le mot clé const crée uniquement une référence en lecture seule à une valeur, ce qui signifie que la valeur ne peut pas être réaffectée. Comme l'indique la référence MDN:

La déclaration const crée une référence en lecture seule à une valeur. Cela ne pas que la valeur qu'elle contient est immuable, mais simplement que l'identificateur de variable ne peut pas être réaffecté.

Mais si nous essayons de changer la valeur de la constante, nous recevons une erreur.

 const monNom = "Leonardo Maldonado";

monNom = "Leo"; // L'identifiant 'myName' a déjà été déclaré

La version ES6 nous a également donné une nouvelle façon de déclarer les variables, que nous pouvons comprendre comme l'opposé du mot-clé const . Le mot clé let nous permet de créer des variables qui sont mutables, comme les constantes, mais avec ce mot clé, nous pouvons en fait attribuer une nouvelle valeur.

 let myName = "Leonardo Maldonado";

monNom = "Leo";

console.log (monNom) // Leo

En utilisant le mot clé let nous pouvons attribuer une nouvelle valeur. Dans cet exemple, nous avons créé un let avec la valeur Leonardo Maldonado ; puis nous l'avons réaffecté avec la valeur de Leo . C'est la différence entre let et const .

Nous savons que JavaScript évolue assez rapidement, et avec chaque nouvelle version du langage, nous obtenons des fonctionnalités plus étonnantes, donc la conséquence est qu'au fil des années, il est de plus en plus facile d'écrire un meilleur JavaScript et nous pouvons faire plus avec moins de code.

Jetons un coup d'œil maintenant à quelques méthodes que nous pouvons commencer à utiliser dans nos applications pour nous aider à atteindre un bon niveau d'immuabilité.

Objets

Un des piliers de nos applications est l'objet. Nous utilisons des objets dans chaque élément de nos applications, du frontal au back-end, du composant le plus complexe au plus simple.

Imaginons que nous ayons un objet appelé myCar qui a le propriétés suivantes:

 const myCar = {

modèle: "Tesla",

année: 2019,

propriétaire: "Leonardo"

};

Par exemple, nous pourrions changer une propriété directement si nous le voulions, non? Changeons le propriétaire de myCar .

 const myCar = {

modèle: "Tesla",

année: 2019,

propriétaire: "Leonardo"

};

myCar.owner = "Lucas";

Mais c'est une mauvaise pratique! Nous ne devons pas modifier directement la propriété d’un objet – ce n’est pas ainsi que l’immuabilité fonctionne. Comme le recommande la documentation Redux, nous devons toujours créer une copie modifiée de notre objet et définir le propriétaire sur Lucas .

Mais comment pouvons-nous faire cela? Eh bien, nous pourrions utiliser la méthode Object.assign .

Object.assign

La méthode Object.assign nous permet de copier ou de transmettre des valeurs d'un objet à un autre. Il renvoie l'objet cible. Voici comment cela fonctionne:

 Object.assign (cible, source);

1. La méthode reçoit un paramètre qui est notre cible, l'objet que nous voulons modifier.

2. Le deuxième paramètre est notre source, nous allons donc fusionner l'objet source avec notre objet cible.

Jetons un coup d'œil dans cet exemple:

 const objectOne = {

oneName: "OB1"

};

const objectTwo = {

twoName: "OB2"

};

const objectThree = Object.assign (objectOne, objectTwo);

console.log (objectThree);

// Résultat -> {oneName: "OB1", twoName: "OB2"}

Maintenant, imaginons que nous voulions transmettre les valeurs d’un objet spécifique à une nouvelle variable. Voici comment procéder:

 const myName = {

nom: "Leonardo"

};

const myPerson = Object.assign ({}, myName);

console.log (myPerson);

// Résultat -> {name: "Leonardo"}

En faisant cela, nous copions les valeurs et les propriétés de l'objet myName et l'assignons à notre nouvelle variable myPerson .

Imaginons que nous voulions copiez toutes les valeurs et propriétés de l'objet myName mais nous voulions également ajouter une nouvelle propriété à l'objet myPerson . Comment le ferions-nous? Simple: en passant un troisième paramètre et en lui passant notre nouvelle propriété, dans notre cas le age .

 const myName = {

nom: "Leonardo"

};

const myPerson = Object.assign ({}, myName, {

âge: 23 ans

});

console.log (myPerson);

// Résultat -> {nom: "Leonardo", âge: 23}

Opérateur de diffusion

Une autre façon de copier ou de transmettre des valeurs à un autre objet consiste à utiliser l'opérateur de diffusion . Cette fonctionnalité, qui a été publiée dans la version ES6, nous permet de créer un nouvel objet en copiant les propriétés d'un objet existant. Par exemple, si nous voulions copier l'objet myName dans un nouvel objet, voici comment procéder:

 const myName = {

nom: "Leonardo"

};

const myPerson = {

...mon nom

}

console.log (myPerson);

// Résultat -> {name: "Leonardo"}

Et si nous voulions copier les propriétés de myName et ajouter une nouvelle propriété à notre nouvel objet:

 const myName = {

nom: "Leonardo"

};

const myPerson = {

...mon nom,

âge: 23 ans

}

console.log (myPerson);

// Résultat -> {nom: "Leonardo", âge: 23}

Redux

Le premier principe de Redux est l’immuabilité, c’est pourquoi nous devrions mentionner Redux ici. Non seulement parce qu’il s’agit de la bibliothèque de gestion d’états la plus connue et la plus utilisée pour les applications React, mais aussi parce qu’elle a le concept d’immuabilité au cœur de ses idées. La bonne façon d'utiliser Redux est d'avoir des réducteurs immuables.

Redux n'a pas inventé le concept d'immutabilité – il est bien plus ancien que cette bibliothèque de gestion d'état – mais nous devons reconnaître qu'avec cette bibliothèque, de nombreux développeurs ont commencé à utiliser et parler d'immuabilité.

Si vous ne savez pas comment Redux fonctionne, c'est une explication assez simplifiée, juste pour que vous puissiez comprendre pourquoi l'immuabilité est importante ici:

1. Redux vous permet de conserver toutes vos données et votre état dans un seul objet, ce que nous appelons store . Cela peut nous aider à atteindre un bon niveau d'évolutivité et de maintenabilité. Imaginons donc que nous ayons notre magasin, et à l'intérieur de ce magasin, nous avons notre état initial:

 const initialState = {

nom: "Leonardo Maldonado",

âge: 22

}

2. Si nous voulons changer notre état, nous devons envoyer une action. Une action dans Redux est un objet avec deux propriétés:

3. type – qui décrit le type de notre action, ce que fait exactement cette action.

4. payload – décrit exactement ce que devrait changer.

Ainsi, une action dans Redux ressemble à ceci:

 const changeAge = payload => ({

tapez: "CHANGE_AGE",

charge utile

})

Nous avons notre état initial; nous avons créé l'action qui sera envoyée pour changer l'état; maintenant nous allons créer notre réducteur et comprendre comment le concept d'immuabilité est utilisé dans Redux et pourquoi il est si important d'avoir des données immuables.

3. Un réducteur est fondamentalement une fonction qui lit le type d'action qui était distribué et, en fonction du type d'action, il produit l'état suivant et fusionne la charge utile d'action dans le nouvel état. Dans notre cas, nous avons envoyé une action appelée CHANGE_AGE donc dans notre fonction de réduction, nous devrions avoir un cas à traiter lorsque cette action est distribuée.

 const initialState = {

nom: "Leonardo Maldonado"

âge: 22

}

réducteur const = (état = état initial, action) => {

commutateur (action.type) {

case 'CHANGE_AGE':

revenir {

...Etat,

âge: action.payload

}

défaut:

état de retour;

}

}

C'est là que la magie opère: lorsque notre action CHANGE_AGE est envoyée, notre réducteur doit effectuer une tâche basée sur le type d'action. Dans notre cas, cela change l'âge, mais il doit aussi conserver la valeur d'origine de notre état initial, dans notre cas le nom. Il est assez important de conserver notre état initial. Sinon, nous perdrions des données très facilement et il serait très difficile de garder une trace de nos données. C’est pourquoi le premier principe de Redux est immuable.

Immer

Si vous êtes dans le développement React et n’utilisez pas Redux pour le moment, mais que vous voulez avoir un état immuable dans votre application, vous pouvez utiliser la bibliothèque Immer. En gros, voici comment fonctionne cette bibliothèque:

1. Vous avez votre état actuel.

2. Il vous permet d'appliquer vos modifications au draftState essentiellement une copie de currentState .

3. Une fois toutes vos modifications terminées , il produira votre nextState basé sur les changements dans le draftState .

Par exemple, imaginons que nous avons notre état actuel et que nous voulions ajouter un nouvel objet à ce tableau. Nous utiliserions la fonction produire .

 importer des produits depuis "immer";

état const = [

{

name: "Leonardo",

age: 23

},

{

name: "Lucas",

age: 20

}

];

const nextState = produire (état, draftState => {

draftState.push ({

nom: "Carlos",

âge: 18

})

});

Fondamentalement, les fonctions produisent reçoivent deux paramètres: le currentState et une fonction de rappel, que nous utiliserons pour modifier notre draftState . Cette fonction, nous allons produire notre nextState . Assez simple, mais très puissant.

Si vous travaillez avec React et que vous rencontrez des problèmes avec la gestion de l'état de votre application, je vous recommande vraiment d'utiliser cette bibliothèque. Cela peut prendre un certain temps pour comprendre exactement comment cette bibliothèque fonctionne, mais cela vous fera gagner beaucoup de temps à l'avenir au cas où vos applications se développeraient énormément.

Conclusion

L'immuabilité n'est pas un sujet spécifique à JavaScript – il peut être appliqué dans toutes les langues – et il est très recommandé de l'utiliser dans toutes les langues. Il faut faire attention à la manière dont vous gérez vos données, et si vous faites tout ce que vous pouvez pour vous assurer que vos données sont immuables et que vous suivez un bon modèle de code propre.

Dans cet article , nous avons appris l'immuabilité dans JavaScript, quel est ce concept dont les développeurs de programmation fonctionnelle ont beaucoup parlé cette année-là, et comment il est utilisé dans de nombreuses applications JavaScript de nos jours. Nous en avons également appris davantage sur la façon dont JavaScript dispose de nombreuses méthodes immuables pour ajouter, modifier et supprimer des données, et sur la façon dont nous pouvons utiliser du JavaScript vanilla pour avoir un morceau de code immuable. En utilisant l'immuabilité dans votre application, vous ne verrez que des points positifs – cela améliorera votre façon de penser le code et rendra votre code plus propre et plus facile à comprendre. Alors, commencez à écrire plus de code immuable dès maintenant et voyez comment cela vous aidera à améliorer votre vie de développeur!