Le « cycle de vie » en javascript

Dans le monde en constante évolution du développement JavaScript, comprendre le concept de « cycle de vie » est crucial pour créer des applications robustes et performantes. Que vous soyez un ingénieur back-end utilisant Node.js, ou un développeur front-end maîtrisant des frameworks comme React ou Angular, le cycle de vie est un fil conducteur qui traverse chaque couche de votre code. Cet article explorera les divers aspects du cycle de vie en JavaScript, depuis la gestion des variables et des objets jusqu’aux spécificités des environnements comme le DOM et Node.js. Nous aborderons également le cycle de vie dans le contexte des frameworks modernes et des opérations asynchrones.

Cycle de Vie des Variables

Voici le cycle de vie d’une variable:

  • Déclaration : Une variable est déclarée.
  • Initialisation : Une valeur lui est assignée.
  • Utilisation : La variable est utilisée dans des expressions ou des fonctions.
  • Destruction : La variable est effacée de la mémoire (automatiquement géré, mais le déclarer peut accélérer le processus).
let a; // Déclaration
a = 10; // Initialisation
console.log(a); // Utilisation
a = null; // Destruction

Une des particularité du javascript est que la déclaration et l’initialisation peuvent se faire en même temps (c’est du reste souvent le cas).

Parmi les originalités de ce cycle, il y a le hoisting: la déclaration de variables est déplacée au sommet de leur portée. Par exemple, le code ci-contre renvoie « undefined », mais ne déclenche pas d’erreur.

   console.log(b); 
   var b = 20;

Cycle de Vie d’un Objet

Voici le cycle de vie d’une objet:

  • Création : Un objet est créé en utilisant le constructeur ou un littéral.
  • Modification : Les propriétés ou méthodes de l’objet sont modifiées.
  • Utilisation : L’objet est utilisé dans le code.
  • Destruction : L’objet est détruit pour libérer de la mémoire.
let obj = {}; // Création par un littéral
const monObjet = new Object(); // Création par le constructeur objet
obj.name = "John"; // Modification
console.log(obj.name); // Utilisation
obj = null; // Destruction

Notez qu’un objet déclaré avec const reste « mutable »: on peut créer, modifier et même supprimer ses propriétés. Il n’est juste pas possible de lui affecter un nouvel objet ou une valeur primitive.

monObjet.nom = 'Jane';  // Valide
monObjet.age = 30;  // Valide
delete monObjet.nom;  // Valide
monObjet = { nom: 'Emily' };  // Invalide
monObjet = null;  // Invalide

Une des problématiques qui peut se poser ici est celle des objets circulaires. Se faisant réciproquement référence, ils peuvent entraîner une fuite de mémoire, car aucun d’eux ne peut être détruit. Néanmoins, Javascript a un système de garbage collector: un algorithme (« Mark-and-Sweep« ) qui gère ce problème.

Cycle de Vie dans le DOM (Navigateur)

Le cycle de vie dans le DOM peut être vu comme une série d’étapes ou d’événements qui se produisent depuis le chargement initial d’une page web jusqu’à sa fermeture ou son remplacement par une autre page. Il y a trois grandes étapes:

  • Chargement de la Page. C’est une dynamique cruciale pour la performance web. En effet, il faut que les pages se chargent rapidement et que l’utilisateur puisse rapidement interagir avec le contenu. c’est la problématique des « Core Web Vitals ». Il est possible de cibler la fin de chargement de la page avec l’évènement « DOMContentLoaded« .
  • Interactions uilisateur et mises à jour du DOM
    • Modification du DOM: Après le chargement de la page, le DOM peut être modifié en réponse à des interactions de l’utilisateur (par exemple, des clics, des mouvements de souris) ou des événements asynchrones (comme des réponses AJAX).
    • Réactualisation du Rendu: À chaque modification du DOM, le navigateur peut avoir besoin de recalculer les styles et de redessiner certaines parties ou la totalité de la page.
  • Déchargement de la Page. Notez qu’il y a deux événements qui peuvent cibler ce moment: beforeunload juste avant la fin (vous pouvez demander à l’utilisateur s’il veut vraiment quitter la page) ou unload à la destruction.

Cycle de Vie des Promesses

  • En attente (Pending)
  • Résolue (Fulfilled)
  • Rejetée (Rejected)

Cycle de Vie des Composants (React, Angular, Vue, etc.)

Ces frameworks ont des méthodes spécifiques qui sont appelées à différentes étapes du cycle de vie d’un composant.

  • Initialisation : Le composant est créé. En général vous avez un hook « constructor ».
  • Montage : Le composant est ajouté au DOM.
  • Mise à Jour : Le composant est mis à jour à cause de changements dans les données.
  • Démontage : Le composant est retiré du DOM.