Congeler complètement un objet : Objets JavaScript immuables

Introduction

Dans ce laboratoire, nous allons explorer comment congeler complètement un objet en JavaScript. Nous allons apprendre à utiliser la méthode Object.freeze() de manière récursive pour congeler toutes les propriétés d'un objet, le rendant immuable. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de prévenir les modifications des objets et d'assurer l'intégrité des données dans votre code JavaScript.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 92%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Comment congeler complètement un objet en JavaScript

Pour congeler complètement un objet en JavaScript, suivez ces étapes :

Utilisez Object.keys() pour obtenir toutes les propriétés de l'objet passé.
Itérez sur les propriétés à l'aide de Array.prototype.forEach().
Appelez Object.freeze() de manière récursive sur toutes les propriétés qui sont des objets, en appliquant deepFreeze() si nécessaire.
Enfin, utilisez Object.freeze() pour congeler l'objet donné.

Voici le code :

const deepFreeze = (obj) => {
  Object.keys(obj).forEach((prop) => {
    if (typeof obj[prop] === "object") deepFreeze(obj[prop]);
  });
  return Object.freeze(obj);
};

Vous pouvez tester l'objet complètement congelé à l'aide du code suivant :

"use strict";

const val = deepFreeze([1, [2, 3]]);

val[0] = 3; // interdit
val[1][0] = 4; // également interdit

Le code ci-dessus générera une erreur car l'objet val est complètement congelé et ne peut pas être modifié.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur la congélation complète d'un objet. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.