JavaScript - Propriétés d'Objet

Bonjour, futurs magiciens JavaScript ! Aujourd'hui, nous plongeons dans le monde magique des propriétés d'objets JavaScript. En tant que votre professeur de sciences informatiques du coin, je suis là pour vous guider dans cette aventure passionnante. Alors, sortez vos baguettes virtuelles (claviers), et lançons quelques sorts de code !

Propriétés d'Objet JavaScript

Les objets en JavaScript sont comme des coffres au trésor - ils contiennent des informations précieuses sous forme de propriétés. Chaque propriété est une paire clé-valeur, où la clé est comme une étiquette, et la valeur est le trésor lui-même. Créons notre premier objet :

let mage = {
name: "Harry",
age: 17,
house: "Gryffindor"
};

Ici, nous avons créé un objet mage avec trois propriétés : name, age, et house. Chaque propriété a une clé (comme "name") et une valeur (comme "Harry").

Accès aux Propriétés de l'Objet

Maintenant que nous avons notre objet mage, comment accédons-nous à ses propriétés ? Il y a deux façons de faire cela :

1. Notation de point
2. Notation de bracket

Essayons les deux :

// Notation de point
console.log(mage.name);  // Output : Harry

// Notation de bracket
console.log(mage["house"]);  // Output : Gryffindor

La notation de point est plus simple et plus couramment utilisée. Cependant, la notation de bracket est pratique lorsque les noms de propriété ont des espaces ou des caractères spéciaux, ou lorsque vous utilisez une variable pour accéder à la propriété.

let propriete = "age";
console.log(mage[propriete]);  // Output : 17

Accès aux Propriétés de l'Objet Nested

Parfois, les objets peuvent contenir d'autres objets. C'est comme une poupée russe magique ! Étendons notre objet mage :

let mage = {
name: "Harry",
age: 17,
house: "Gryffindor",
wand: {
wood: "Houx",
core: "Plume de phénix",
length: 11
}
};

Pour accéder aux propriétés imbriquées, nous simplement chaînons nos notations de point ou de bracket :

console.log(mage.wand.wood);  // Output : Houx
console.log(mage["wand"]["core"]);  // Output : Plume de phénix

Ajout ou Mise à Jour des Propriétés de l'Objet

Les objets en JavaScript sont muables, ce qui signifie que nous pouvons les changer après leur création. Donnons à notre mage quelques nouvelles compétences :

// Ajout d'une nouvelle propriété
mage.skill = "Quidditch";

// Mise à jour d'une propriété existante
mage.age = 18;

console.log(mage.skill);  // Output : Quidditch
console.log(mage.age);  // Output : 18

Suppression des Propriétés de l'Objet

Parfois, nous devons faire disparaître des propriétés. Pour cela, nous utilisons l'opérateur delete :

delete mage.house;
console.log(mage.house);  // Output : undefined

Pouf ! La propriété "house" est partie. Souvenez-vous, utiliser delete ne fait que supprimer la propriété de l'objet, cela n'affecte pas les variables qui pourraient avoir contenu la valeur de cette propriété.

Énumération des Propriétés de l'Objet

Que faire si nous voulons voir toutes les propriétés d'un objet ? Nous pouvons utiliser une boucle for...in :

for (let cle in mage) {
console.log(cle + ": " + mage[cle]);
}

Cela énumérera toutes les propriétés enumerable de l'objet mage. Mais attendez, il y a plus ! Nous pouvons également utiliser Object.keys(), Object.values(), ou Object.entries() pour obtenir des tableaux des clés, des valeurs ou des paires [clé, valeur] de l'objet :

console.log(Object.keys(mage));    // Output : ["name", "age", "wand", "skill"]
console.log(Object.values(mage));  // Output : ["Harry", 18, {wood: "Holly", core: "Phoenix feather", length: 11}, "Quidditch"]
console.log(Object.entries(mage)); // Output : [["name", "Harry"], ["age", 18], ["wand", {...}], ["skill", "Quidditch"]]

Attributs de Propriété

Chaque propriété en JavaScript a certains attributs qui définissent son comportement. Ces attributs sont comme les traits de personnalité de la propriété. Rencontrons-les :

1. value : La valeur de la propriété (évidemment !)
2. writable : Peut-on changer la valeur de la propriété ?
3. enumerable : Cette propriété doit-elle apparaître lorsque nous énumérons les propriétés de l'objet ?
4. configurable : Peut-on supprimer cette propriété ou modifier ses attributs ?

Par défaut, tous ces attributs sont définis sur true pour les propriétés que nous créons normalement. Mais nous pouvons les modifier en utilisant Object.defineProperty() :

Object.defineProperty(mage, "name", {
writable: false,
enumerable: false
});

mage.name = "Ron";  // Cela ne fonctionnera pas
console.log(mage.name);  // Output : Harry

for (let cle in mage) {
console.log(cle);  // "name" ne s'affichera pas ici
}

Voici un tableau récapitulatif des méthodes de propriété que nous avons apprises :

Méthode	Description
object.property	Accéder à une propriété en utilisant la notation de point
object["property"]	Accéder à une propriété en utilisant la notation de bracket
object.property = value	Ajouter ou mettre à jour une propriété
delete object.property	Supprimer une propriété
for...in	Énumérer les propriétés de l'objet
Object.keys(object)	Obtenir un tableau des clés de l'objet
Object.values(object)	Obtenir un tableau des valeurs de l'objet
Object.entries(object)	Obtenir un tableau des paires [clé, valeur] de l'objet
Object.defineProperty()	Définir une nouvelle propriété ou modifier une propriété existante

Et voilà, jeunes codeurs ! Vous avez vient de terminer votre cours intensif sur les propriétés d'objets JavaScript. Souvenez-vous, la pratique rend parfait, donc continuez à expérimenter avec ces concepts. Avant de savoir, vous serez capable de invoquer des objets complexes comme un véritable sorcier JavaScript !

Credits: Image by storyset