JavaScript - Objets : Un Guide Pour Les Débutants

Salut à toi, futur.e programmeur.se ! Je suis ravi.e de devenir ton guide sur ce voyage passionnant dans le monde des objets JavaScript. En tant que quelqu'un qui enseigne la programmation depuis des années, je peux te dire que comprendre les objets, c'est comme déverrouiller un superpouvoir secret dans JavaScript. Alors, mettons-nous à l'eau !

Qu'est-ce Que les Objets JavaScript ?

Imaginons que tu décris ton chien. Tu pourrais dire qu'il a un nom, un âge, une race et un jouet préféré. En JavaScript, nous pouvons représenter ce chien sous forme d'un objet, avec toutes ces caractéristiques comme ses propriétés. Créons notre premier objet :

let monChien = {
name: "Buddy",
age: 3,
breed: "Golden Retriever",
favoriteToy: "balle qui fait du bruit"
};

C'est ce que nous appelons un littéral d'objet. C'est comme un conteneur qui garde des informations liées. Chaque morceau d'information est une propriété, avec un nom (comme "name" ou "age") et une valeur ("Buddy" ou 3).

Propriétés des Objets

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

1. Notation pointée :

   console.log(monChien.name); // Affiche : Buddy

2. Notation par crochets :

   console.log(monChien["age"]); // Affiche : 3

Les deux font la même chose, mais la notation par crochets est pratique lorsque le nom de la propriété est stocké dans une variable ou contient des espaces.

Nous pouvons également ajouter de nouvelles propriétés à notre objet :

monChien.isGoodBoy = true;
console.log(monChien.isGoodBoy); // Affiche : true

Ou modifier les existantes :

monChien.age = 4;
console.log(monChien.age); // Affiche : 4

Méthodes des Objets

Les méthodes sont des fonctions qui appartiennent à un objet. Elles sont comme les actions que notre objet peut effectuer. Ajoutons une méthode à notre objet monChien :

monChien.bark = function() {
console.log("Wouf wouf !");
};

monChien.bark(); // Affiche : Wouf wouf !

Maintenant, notre chien peut aboyer ! N'est-ce pas génial ?

Création de Nouveaux Objets

Nous avons vu comment créer des objets en utilisant des littéraux d'objets, mais il y a une autre manière en utilisant le constructeur Object() :

let monChat = new Object();
monChat.name = "Whiskers";
monChat.age = 5;
monChat.meow = function() {
console.log("Miaou !");
};

monChat.meow(); // Affiche : Miaou !

Cette méthode est moins courante, mais il est bon de savoir qu'elle existe.

Définir des Méthodes pour un Objet

Nous pouvons définir des méthodes lorsque nous créons l'objet, tout comme nous le faisons avec les propriétés :

let monPerroquet = {
name: "Polly",
age: 2,
speak: function() {
console.log("Polly wants a cracker !");
}
};

monPerroquet.speak(); // Affiche : Polly wants a cracker !

Il y a aussi une manière abrégée de définir des méthodes :

let monHamster = {
name: "Fuzzy",
age: 1,
run() {
console.log("Course sur la roue !");
}
};

monHamster.run(); // Affiche : Course sur la roue !

Le Mot-clé with

Le mot-clé with peut rendre ton code plus court lorsque tu travailles avec les propriétés du même objet plusieurs fois :

with(monChien) {
console.log(name);
console.log(age);
bark();
}

Cependant, sois prudent avec with car il peut rendre ton code moins clair et n'est pas recommandé en mode strict.

Objets Natifs JavaScript

JavaScript vient avec plusieurs objets intégrés qui fournissent des fonctionnalités utiles. Voici quelques-uns des plus courants :

Objet	Description
String	Représente et manipule du texte
Number	Représente des valeurs numériques
Boolean	Représente des valeurs vraies/fausses
Array	Représente une liste de valeurs
Math	Fournit des opérations mathématiques
Date	Représente des dates et des heures

Voyons quelques exemples :

let salutation = "Hello, World!";
console.log(salutation.length); // Affiche : 13

let pi = Math.PI;
console.log(pi); // Affiche : 3.141592653589793

let today = new Date();
console.log(today); // Affiche : date et heure actuelle

Méthodes des Objets JavaScript

Les objets JavaScript viennent avec quelques méthodes intégrées. Voici quelques-unes des plus importantes :

Méthode	Description
Object.keys()	Retourne un tableau des noms des propriétés d'un objet
Object.values()	Retourne un tableau des valeurs des propriétés d'un objet
Object.entries()	Retourne un tableau des paires [clé, valeur] d'un objet
Object.assign()	Copie les propriétés d'un objet vers un autre

Voyons ces méthodes en action :

let keys = Object.keys(monChien);
console.log(keys); // Affiche : ["name", "age", "breed", "favoriteToy", "isGoodBoy", "bark"]

let values = Object.values(monChien);
console.log(values); // Affiche : ["Buddy", 4, "Golden Retriever", "balle qui fait du bruit", true, ƒ]

let entries = Object.entries(monChien);
console.log(entries); // Affiche : [["name", "Buddy"], ["age", 4], ...]

let nouveauChien = Object.assign({}, monChien);
console.log(nouveauChien); // Affiche : une copie de monChien

Et voilà ! Tu viens de faire tes premiers pas dans le monde des objets JavaScript. Souviens-toi, la pratique rend parfait, donc n'hesite pas à expérimenter avec la création de tes propres objets et méthodes. Avant de t'en rendre compte, tu seras un(e) programmeur.se chevronné.e manipulant les objets comme un pro !

Bonne programmation, et puisses-tu toujours avoir des objets sans bugs !

Credits: Image by storyset