• 12 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 22/04/2024

Structurez des données grâce aux objets

Dans le chapitre précédent, vous avez appris à reconnaître différents types de variables qui permettent d’identifier une valeur à la fois. Mais comment faire pour identifier un élément avec plusieurs valeurs ? C’est le moment d’utiliser les objets !

Découvrez les objets en JavaScript

Déclarez un objet en JavaScript

Pour déclarer un objet en JavaScript, vous devez utiliser les accolades  { }  . Les propriétés d’un objet ont un nom et une valeur qui sont assignées avec deux points: . Les propriétés sont séparées entre elles par des virgules, .

Par exemple, pour déclarer l’objet monPersonnage qui représente le personnage fictif Bruce Wayne, 35 ans, dont la couleur préférée est le noir et qui adore sortir la nuit, vous écrirez :

let monPersonnage = {
nom: "Wayne",
prenom: "Bruce",
age: 35,
couleurPreferee: "noir",
hobbies: "sortir la nuit"
}

Ajoutez une propriété à un objet JavaScript

Un objet JavaScript peut être mis à jour au fur et à mesure de son évolution dans le code.

Par exemple, si vous vous rendez compte que l’objet monPersonnage a désormais un véhicule préféré, il vous faudra lui ajouter cette nouvelle propriété.

Pour ajouter une propriété, vous devez écrire le nom de votre objet, séparé par un point  .  avec le nom de votre nouvelle propriété :

monPersonnage.vehiculePrefere = "Batmobile"

Accédez à une propriété d’un objet JavaScript

Lorsque vous manipulez des objets JavaScript, vous avez également besoin d’accéder à leurs propriétés pour les stocker dans des variables, et les utiliser dans la suite de votre code ou dans un autre contexte.

Vous pouvez accéder à la valeur d’une propriété en utilisant le point  .  et par exemple, la stocker dans une variable.

Dans le cadre de l’objet monPersonnage, vous écrirez :

const nomDeMonPersonnage = monPersonnage.nom

// Vérification
console.log(nomDeMonPersonnage)
console.log(monPersonnage.nom)

Récapitulons en vidéo

Retrouvez les démonstrations de ce chapitre dans la vidéo ci-dessous :

À vous de jouer !

Et maintenant, entraînez-vous à manipuler des variables avec cet exercice CodePen.

Déclarez le nouveau ticket de cinéma

Un ticket de cinéma a plusieurs propriétés : un nom de film, un prix, un numéro de salle.

  • Déclarez un objet ticket avec les propriétés suivantes :

    • nomFilm ;

    • prix ;

    • numeroSalle.

  • Déclarez une variable nom avec votre nom. 

Affichez les informations sur la borne

  • Affichez un message sur la borne : “Bonjour NOM, votre film NOMDEFILM est en salle NUMERODELASALLE”.

  • Créez une variable texteAffichage qui contient cette phrase, avec NOM, NOMDEFILM et NUMERODELASALLE remplacés par leur vraie valeur.

  • Vérifiez le résultat avec un console.log

Corrigé

Vous pouvez vérifier votre travail en consultant le corrigé et la vidéo ci-dessous : 

En résumé

  • Un objet en JavaScript peut posséder plusieurs propriétés qui auront pour chacune d’elles une valeur.

  • Pour déclarer un objet en JavaScript, vous devez utiliser les accolades  { }  .

  • Pour ajouter ou récupérer une propriété, vous devez utiliser le point  .  .

Vous savez maintenant comment structurer des données grâce aux objets. Suivez-moi dans le chapitre suivant pour découvrir comment créer des tableaux.

Exemple de certificat de réussite
Exemple de certificat de réussite