Objets JavaScript
Introduction aux objets JavaScript
Dans JavaScript, les objets sont des éléments fondamentaux qui aident à organiser et stocker des données. Imaginez un objet JavaScript comme une boîte spéciale où vous pouvez ranger divers éléments. Chaque élément à l'intérieur de cette boîte est stocké dans un petit compartiment étiqueté avec un nom (on appelle cela le nom de la propriété), et l'élément lui-même est la valeur. Par exemple, si nous avons une boîte représentant un livre, elle pourrait avoir des compartiments étiquetés "titre", "auteur" et "nombre de pages", chaque compartiment contenant les informations respectives sur le livre.
Création d'objets
Utilisation des littéraux d'objet
Il s'agit d'une méthode simple où vous définissez directement l'objet et ses propriétés à l'aide d'accolades {} :
Dans cet exemple, user est un objet qui possède deux propriétés : name et age. Vous pouvez voir immédiatement ce que contient l'objet, ce qui rend cette méthode très transparente et facile à utiliser.
Utilisation de la syntaxe new Object()
Alternativement, vous pouvez commencer par un objet vide, puis ajouter les propriétés une par une :
Cette méthode consiste d'abord à créer un objet vide (user), puis à ajouter des propriétés (name et age). Elle est utile lorsque les propriétés de l'objet dépendent d'une logique conditionnelle ou lorsqu'elles sont déterminées au moment de l'exécution.
Pourquoi les objets sont-ils importants ?
Maintenant que nous avons présenté les objets JavaScript, vous vous demandez peut-être quelle est leur importance pratique. Explorons pourquoi la maîtrise des objets JavaScript est essentielle pour quiconque commence son parcours dans le développement web.
- Organisation : Les objets vous aident à regrouper des données liées, rendant votre code plus propre et plus facile à comprendre. Au lieu d'avoir de nombreuses variables séparées, vous pouvez regrouper des données liées dans un seul objet.
Cet objet book conserve toutes les informations liées au livre, soigneusement organisées sous une seule variable.
- Réutilisabilité : Une fois que vous avez créé un objet, vous pouvez le réutiliser dans tout votre code. Cela simplifie la gestion des données et des fonctionnalités courantes.
L'objet user peut être transmis à différentes fonctions comme displayUserInfo sans avoir besoin de redéfinir les informations de l'utilisateur.
- Flexibilité : Les objets en JavaScript sont très flexibles. Vous pouvez ajouter de nouvelles propriétés, modifier les valeurs des propriétés existantes ou supprimer des propriétés si nécessaire.
- Fonctionnalité : Les objets peuvent également contenir des fonctions. Ces fonctions (appelées méthodes) peuvent effectuer des actions en utilisant les données contenues dans l'objet.
L'objet person possède une méthode greeting qui utilise ses propres données pour générer une salutation. Vous vous demandez peut-être ce que signifie le mot-clé this dans cet exemple, vous trouverez plus d'informations à ce sujet dans notre article sur le mot-clé this en JavaScript.
- Prototypes : Chaque objet JavaScript possède un prototype. Un prototype est un objet modèle à partir duquel l'objet hérite de méthodes et de propriétés. Cela permet des modèles d'héritage puissants.
Ici, dog hérite de animal, il a donc accès à la propriété isAlive définie dans animal, ainsi qu'à sa propre méthode bark.
Accès et modification des propriétés
Les objets vous permettent d'accéder à leurs propriétés et de les modifier en utilisant la notation pointée ou la notation entre crochets.
Accès aux propriétés
user.name accède à la propriété name en utilisant la notation pointée, qui est simple et facile à lire. user["age"] utilise la notation entre crochets, utile lorsque le nom de la propriété est stocké dans une variable ou n'est pas un identifiant valide.
Vous pouvez également récupérer toutes les clés ou toutes les valeurs d'un objet en utilisant Object.keys() et Object.values() :
Ces méthodes sont utiles pour itérer sur les propriétés d'un objet ou les convertir en tableaux.
Modification des propriétés
Vous pouvez également modifier les propriétés d'un objet ou en ajouter de nouvelles :
L'exemple montre l'ajout d'une nouvelle propriété booléenne (isAdmin), la modification de la valeur d'une propriété existante (name) et la suppression d'une propriété (age). Cela démontre la nature mutable des objets JavaScript.
Let vs Const avec les objets
Let
L'utilisation de let permet de réaffecter l'objet à un nouvel objet. Cette flexibilité est utile lorsque l'intégralité de l'objet doit être remplacée.
Const
Avec const, vous pouvez modifier les propriétés de l'objet, mais vous ne pouvez pas assigner un nouvel objet à la variable. Cela garantit que la référence à l'objet reste constante.
Déstructuration d'objets et opérateur de repos
Déstructuration
La déstructuration vous permet de décompresser les propriétés d'un objet dans des variables séparées :
Cette syntaxe extrait les propriétés firstName, lastName et age de l'objet person dans des variables individuelles, simplifiant l'accès à ces propriétés.
Opérateur de repos
L'opérateur de repos (...) est utilisé pour regrouper les propriétés restantes qui n'ont pas été décompressées :
Après avoir extrait age, l'opérateur de repos regroupe les propriétés restantes dans un nouvel objet nameDetails, qui ne contient que firstName et lastName.
Attributs et méthodes de propriétés avancés
Getters et Setters
Les getters et les setters sont des fonctions qui contrôlent comment vous accédez et définissez les propriétés d'un objet :
La propriété fullName est contrôlée par un getter et un setter. Le getter renvoie le nom complet en combinant firstName et lastName. Le setter prend un nom complet, le divise en deux parties et les assigne respectivement à firstName et lastName.
Conclusion
Les objets JavaScript offrent un moyen structuré, efficace et puissant de gérer et de manipuler les données, ce qui est essentiel pour créer des applications web interactives et dynamiques. Comprendre comment utiliser efficacement les objets est crucial pour quiconque souhaite perfectionner ses compétences en JavaScript.
Pratique
Quelles sont les façons de créer un objet en JavaScript ?