Aller au contenu principal

Objets

Les objets en JavaScript

Notions théoriques​

En JavaScript, un objet est une collection de propriétés.

Chaque propriété est une association entre un nom (ou une clé) et une valeur.

astuce
  • Les objets en JavaScript peuvent être pensés comme des conteneurs pour les valeurs.
  • Une propriété d'un objet peut être expliquée comme une variable qui est attachée à l'objet.

Pour créer un objet, nous utilisons :

  • des accolades {}
  • et une liste de propriétés.

Chaque propriété est suivie d'une virgule, sauf la dernière.

let voiture = {
    marque: "Toyota",
    modele: "Corolla",
    annee: 2005
};

Ici, voiture est un objet avec trois propriétés : marque, modele et annee.

En JavaScript, on peut accéder aux propriétés d'un objet en utilisant la notation point . ou la notation avec des crochets [].

console.log(voiture.marque);  // Affiche "Toyota"
Comment accéder aux propriétés d'un objet en JavaScript avec des crochets

La notation avec des crochets est très utile lorsque le nom de la propriété est stocké dans une variable ou lorsque le nom de la propriété n'est pas un identifiant JavaScript valide (par exemple, s'il contient des espaces ou des caractères spéciaux).

Voici un exemple d'utilisation de la notation avec des crochets :

let voiture = {
    marque: "Toyota",
    modele: "Corolla",
    annee: 2005
};

console.log(voiture["marque"]);  // Affiche "Toyota"

La notation avec des crochets est également nécessaire lorsque le nom de la propriété contient des espaces ou des caractères spéciaux.

Exemple pratique​

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 18,
    notes: {
        maths: 15,
        francais: 12,
        physique: 14
    }
};

console.log(etudiant.nom);  // Affiche "Dupont"
console.log(etudiant.notes.maths);  // Affiche 15

Dans cet exemple, etudiant est un objet avec quatre propriétés : nom, prenom, age et notes.

La propriété notes est elle-même un objet avec trois propriétés : maths, francais et physique.

Nous pouvons accéder aux propriétés de l'objet notes de la même manière que nous accédons aux propriétés de l'objet etudiant.

Quelques méthodes à connaître​

JavaScript fournit plusieurs méthodes intégrées pour travailler avec les objets.

  • Object.keys(objet) : Cette méthode retourne un tableau contenant les noms des propriétés de l'objet.
  • Object.values(objet) : Cette méthode retourne un tableau contenant les valeurs des propriétés de l'objet.
  • Object.entries(objet) : Cette méthode retourne un tableau de tableaux. Chaque sous-tableau contient deux éléments : le nom de la propriété et sa valeur.

Test de mémorisation/compréhension​


Qu'est-ce qu'un objet en JavaScript ?


Comment accède-t-on aux propriétés d'un objet en JavaScript ?


Quelle méthode retourne un tableau contenant les noms des propriétés d'un objet ?


Quelle méthode retourne un tableau contenant les valeurs des propriétés d'un objet ?


Quelle méthode retourne un tableau de tableaux, chaque sous-tableau contenant le nom d'une propriété et sa valeur ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, vous allez créer un objet pour représenter un étudiant.

  • L'objet devra avoir les propriétés suivantes : nom, prenom, age et notes.

  • La propriété notes sera elle-même un objet avec les propriétés suivantes : maths, francais, anglais, physique et chimie.

Ensuite, vous allez écrire une fonction calculerMoyenne(etudiant) qui prendra un objet étudiant en argument et retournera la moyenne de ses notes.

let etudiant = {
    nom: "Dupont",
    prenom: "Jean",
    age: 18,
    notes: {
        maths: 15,
        francais: 12,
        anglais: 14,
        physique: 16,
        chimie: 13
    }
};

function calculerMoyenne(etudiant) {
    ...
}

console.log(calculerMoyenne(etudiant));  // Affiche la moyenne des notes
Une solution