Apprenez à programmer avec JavaScript

Les objets JavaScript sont écrits en JSON (JavaScript Object Notation). Ce sont des séries de paires clés-valeurs séparées par des virgules, entre des accolades. Les objets peuvent être enregistrés dans une variable :

let myBook = {
    title: 'The Story of Tau',
    author: 'Will Alexander',
    numberOfPages: 250,
    isAvailable: true
};

Chaque clé est une chaîne (title, author, numberOfPages...), et les valeurs associées peuvent avoir tout type de données (nombre, chaîne, etc.).

Construire des objets présente un avantage essentiel : cela permet de regrouper les attributs d'une chose unique à un même emplacement, que ce soit un livre, un profil d'utilisateur ou la configuration d'une application, par exemple.

Pratiquez la création d'un objet

Dans un exercice précédent, vous avez créé trois variables pour décrire l'épisode d'une série. On dirait la situation parfaite pour créer un seul objet  episode  : créons-le maintenant !

Rendez-vous sur cet exercice CodePen.

1. Créez un objet (Object, en anglais) et stockez-le dans une variable appelée   episode  . Utilisez bien des accolades  {}  et mettez les trois attributs suivants :

• title  : le titre de l'épisode ;

• duration  : la durée de l'épisode ;

• hasBeenWatched  : si l'épisode a été visionné ou non.

Associez des valeurs appropriées à chaque attribut.

N'oubliez pas d'utiliser des paires clé-valeur séparées par des virgules. Votre code ira entre les commentaires "===" sur l'exercice.

Si vous n'y arrivez pas du premier coup, ne vous découragez pas, poursuivez vos efforts ! L'apprentissage de la programmation se fait en pratiquant et en apprenant de ses erreurs. 😎

Solution

Voici un nouveau CodePen avec une solution à l’exercice.

Accédez aux données d'un objet

Maintenant que vous savez comment créer un objet en JavaScript, voyons comment accéder aux données dans un objet avec la notation pointée (dot notation), expliquée ci-dessous.

Une fois qu'un objet est enregistré dans une variable, vous pouvez accéder à ses données comme dans l'exemple ci-dessous.

let myBook = {
    title: "L'Histoire de Tao",
    author: "Will Alexander",
    numberOfPages: 250,
    isAvailable: true
};
let bookTitle = myBook.title;  // "L'Histoire de Tao"
let bookPages = myBook.numberOfPages  // 250

Pour cela, utilisez le nom de la variable qui contient l'objet, un point (  .  ), puis le nom de la clé dont vous souhaitez récupérer la valeur.

La notation bracket (bracket notation)

Pour accéder à un sous élément vous pouvez utiliser les brackets avec la valeur du sous élément. Par exemple :

let myBook = {
   title: "L'Histoire de Tao",
   author: "Will Alexander",
   numberOfPages: 250,
   isAvailable: true
};
let bookTitle = myBook["title"];  // "L'Histoire de Tao"
let bookPages = myBook["numberOfPages"];  // 250

L'intérêt ici c’est qu’on va pouvoir mettre entre bracket une variable qui contient en string le nom de la propriété que l’on souhaite atteindre. Par exemple :

let myBook = {
   title: "L'Histoire de Tao",
   author: "Will Alexander",
   numberOfPages: 250,
   isAvailable: true
};
let propertyToAccess = "title";
let bookTitle = myBook[propertyToAccess];  // "L'Histoire de Tao"

Pratiquez la récupération de valeurs depuis un object

Voici une occasion de mettre en pratique la dot notation. Rendez-vous sur cet éditeur CodePen.

Dans l’exercice précédent, quand vous avez construit l'Object episode  , le code de votre collègue en a extrait les données pour les afficher dans son composant. Maintenant, c'est à vous d'extraire les informations pour les fournir au composant avec la notation  .  ou "dot".

1. Créez les trois variables suivantes :

• episodeTitle  : le titre de l'épisode (string) ;

• episodeDuration  : la durée de l'épisode (number) ;

• episodeHasBeenWatched  : si l'épisode a été regardé ou non (boolean).

Assignez-y les valeurs correspondantes de l'objet  episode  en utilisant la notation "dot".

Solution

Voici un nouveau CodePen avec une solution à l’exercice.

La construction d'un objet à la main, par la notation à accolades vue précédemment, convient bien à des objets simples et uniques. Mais vous aurez souvent besoin de beaucoup d'objets du même type. C'est là que les classes sont utiles.

Comme expliqué précédemment, une classe est un modèle pour un objet dans le code. Elle permet de construire plusieurs objets du même type (appelés instances de la même classe) plus facilement, rapidement et en toute fiabilité.

Voyons comment construire une classe dans le code.

Pour créer une classe dans JavaScript, utilisez le mot clé   class  , suivi par un nom. Encadrez ensuite le code de la classe entre accolades :

class Book {
}

Pour cette classe, nous souhaitons que chaque   Book  ait un titre, un auteur et un nombre de pages. Pour cela, vous utilisez ce qu'on appelle un constructor.

class Book {
    constructor(title, author, pages) {
    }
}

Il y a un ensemble d'instructions à suivre à l'intérieur du  constructor  pour créer une instance de la classe   Book  . Pour attribuer le titre, l'auteur et le nombre de pages reçus à cette instance, utilisez le mot clé   this  et la notation dot.

class Book {
    constructor(title, author, pages) {
        this.title = title;
        this.author = author;
        this.pages = pages;
    }
}

Ici, le mot clé   this  fait référence à la nouvelle instance. Donc, il utilise la notation dot pour attribuer les valeurs reçues aux clés correspondantes.

Maintenant que la classe est terminée, vous pouvez créer des instances par le mot clé   new  :

let myBook = new Book("L'Histoire de Tao", "Will Alexander", 250);
//Cette ligne crée l'objet suivant :
{
    title: "L'Histoire de Tao",
    author: "Will Alexander",
    pages: 250
}

Avec une classe Book  , vous pouvez créer facilement et rapidement de nouveaux objets Book  .

Pratiquez les classes

La meilleure façon d'apprendre les classes est d'en créer une vous-même. Rendez-vous sur cet éditeur CodePen.

Maintenant que vous savez créer des classes, il est temps d'en profiter pour notre composant épisode. Cette fois-ci, il y a trois composants épisodes, donc la manière logique de procéder serait de créer une classe   Episode  , et puis en créer trois instances – une pour chaque épisode.

1. Créez une classe   Episode  avec le mot clé  class  .

2. Créez un constructor pour votre classe  Episode  qui devra accepter trois arguments :

• title  : le titre de l'épisode (string) ;

• duration  : la durée de l'épisode (number) ;

• hasBeenWatched  : si l'épisode a été regardé ou non (boolean).

En utilisant le mot clé   this  , assignez les propriétés  title  ,  duration  et  hasBeenWatched  via un constructor .

Avec le mot clé   new  , créez trois instances de la classe   Episode  :

• firstEpisode  ;

• secondEpisode  ;

• thirdEpisode  .

N'oubliez pas de passer des arguments appropriés à chaque instance.

Solution

Vous avez terminé ? Voici un nouveau CodePen avec une solution à l’exercice. 

Vous avez fait beaucoup de chemin dans ce chapitre ! Vous avez découvert :

• les objets avec les paires clés-valeurs en notation JSON. Ils permettent d'enregistrer plusieurs éléments de données associés dans une même variable ;

• la notation pointée (dot) qui donne accès aux valeurs d'un objet et à la possibilité de les modifier ;

• les classes, et comment l'utilisation de classes peut vous permettre de créer des objets plus facilement et de façon plus lisible.

Nous allons maintenant voir comment regrouper plusieurs variables avec les collections.