Les objets JavaScript
En JavaScript, les objets sont des conteneurs pour stocker des collections de données indexées et des entités plus complexes, comme une boîte à compartiments.
Introduction aux objets JavaScript
En JavaScript, les objets sont des éléments fondamentaux qui permettent d'organiser et de stocker des données. Imaginez un object JavaScript comme une boîte spéciale dans laquelle vous pouvez ranger différents éléments. Chaque élément à l'intérieur de cette boîte est stocké dans un petit compartiment étiqueté avec un nom (que l'on appelle le nom de propriété), et l'élément lui-même est la valeur. Contrairement aux types de données primitifs (comme les nombres et les string), un object est un type référence qui peut regrouper de nombreuses valeurs liées entre elles. 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 », chacun contenant l'information correspondante sur le livre.
Créer des objets
Utiliser les littéraux d'objet
Il s'agit d'une méthode simple dans laquelle vous définissez directement l'object et ses propriétés à l'aide d'accolades {} :
Dans cet exemple, user est un object qui possède deux propriétés : name et age. Vous pouvez immédiatement voir ce que contient l'object, ce qui rend cette méthode très transparente et facile à utiliser.
Utiliser la syntaxe new Object()
Vous pouvez également partir d'un object vide et y ajouter des propriétés une par une :
Cette méthode consiste d'abord à créer un object vide (user), puis à y ajouter des propriétés (name et age). Elle est utile lorsque les propriétés de l'object dépendent d'une logique conditionnelle ou sont déterminées à l'exécution.
Raccourcis de propriétés et de méthodes
Lorsqu'un nom de variable correspond au nom de propriété souhaité, vous pouvez éviter la répétition grâce au raccourci de valeur de propriété. Les méthodes disposent également d'une syntaxe plus courte — vous pouvez omettre la partie : function :
name équivaut à écrire name: name, et greet() {} équivaut à greet: function() {}. Les deux formes permettent de garder les littéraux d'objet concis.
Noms de propriétés calculés
Les noms de propriétés n'ont pas besoin d'être codés en dur. En entourant une expression de crochets [...] à l'intérieur du littéral, vous calculez la clé à l'exécution :
C'est particulièrement pratique lorsque le nom de propriété provient d'une saisie utilisateur, d'un argument de fonction ou d'une constante définie ailleurs.
Objets imbriqués
La valeur d'une propriété peut être un autre object, ce qui vous permet de modéliser des données structurées et hiérarchiques. Accédez aux valeurs profondes en chaînant la notation pointée ou la notation à crochets :
Chaque niveau est simplement un autre object, donc les mêmes règles d'accès s'appliquent à tous les niveaux.
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. Voyons pourquoi maîtriser les objets JavaScript est essentiel pour quiconque débute son parcours dans le développement web.
- Organisation : Les objets vous aident à regrouper les données connexes, ce qui rend votre code plus propre et plus facile à comprendre. Au lieu d'avoir de nombreuses variables séparées, vous pouvez regrouper les données liées dans un seul object.
Cet object book regroupe de manière ordonnée toutes les informations relatives au livre sous une seule variable.
- Réutilisabilité : Une fois que vous avez créé un object, vous pouvez le réutiliser dans tout votre code. Cela simplifie la gestion des données et des fonctionnalités communes.
L'object user peut être passé à différentes fonctions comme displayUserInfo sans avoir à 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 de propriétés existantes ou supprimer des propriétés selon vos besoins.
- 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'object.
L'object person possède une méthode greeting qui utilise ses propres données pour produire un message de salutation. Vous vous interrogez peut-être sur 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 object JavaScript possède un prototype. Un prototype est un object modèle dont l'object hérite des méthodes et des propriétés. Cela permet de créer de puissants modèles d'héritage.
Ici, dog hérite de animal, et a donc accès à la propriété isAlive définie dans animal, en plus de sa propre méthode bark.
Accéder aux propriétés et les modifier
Les objets vous permettent d'accéder à leurs propriétés et de les modifier à l'aide de la notation pointée ou de la notation à crochets.
Accéder 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 à crochets, utile lorsque le nom de 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 valeurs d'un object avec Object.keys() et Object.values() :
Ces méthodes sont utiles pour itérer sur les propriétés d'un object ou les convertir en array. Pour une étude plus approfondie de l'extraction de données, notamment Object.entries(), consultez Object.keys, values, entries.
Vérifier si une propriété existe
Pour tester si une propriété existe, utilisez l'opérateur in. Il est plus fiable que la comparaison avec undefined, car une propriété peut légitimement avoir la valeur undefined :
L'opérateur in retourne true dès lors que la clé est présente, même si sa valeur est undefined. La vérification === undefined ne permet pas de distinguer une propriété absente d'une propriété explicitement définie à undefined.
Modifier des propriétés
Vous pouvez également modifier les propriétés d'un object ou en ajouter de nouvelles :
L'exemple montre l'ajout d'une nouvelle propriété boolean (isAdmin), la modification de la valeur d'une propriété existante (name) et la suppression d'une propriété (age). Cela illustre la nature mutable des objets JavaScript.
Let et Const avec les objets
Let
L'utilisation de let permet de réassigner l'object à un nouvel object. Cette flexibilité est utile lorsque l'ensemble de l'object doit être remplacé.
Const
Avec const, vous pouvez modifier les propriétés de l'object mais vous ne pouvez pas assigner un nouvel object à la variable. Cela garantit que la référence à l'object reste constante.
Déstructuration d'objet et opérateur rest
Déstructuration
La déstructuration vous permet d'extraire des propriétés d'un object dans des variables distinctes :
Cette syntaxe extrait les propriétés firstName, lastName et age de l'object person dans des variables individuelles, simplifiant ainsi l'accès à ces propriétés.
Opérateur rest
L'opérateur rest (...) est utilisé pour rassembler les propriétés restantes qui n'ont pas été extraites :
Après avoir extrait age, l'opérateur rest regroupe les propriétés restantes dans un nouvel object nameDetails, qui ne contient que firstName et lastName.
Attributs et méthodes de propriétés avancés
Getters et Setters
Les getters et setters sont des fonctions qui contrôlent la façon dont vous accédez aux propriétés d'un object et les définissez :
La propriété fullName est contrôlée par un getter et un setter. Le getter retourne 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.
Au-delà des getters et setters, chaque propriété possède également des attributs cachés tels que writable, enumerable et configurable. Pour apprendre à inspecter et affiner ces attributs, consultez Indicateurs et descripteurs de propriétés.
Conclusion
Les objets JavaScript offrent une manière structurée, efficace et puissante de gérer et de manipuler des 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 approfondir ses compétences en JavaScript.