Classes et attributs

Notre dernière notion porte sur la façon d'organiser ses données. En effet jusque là nous avons utilisé des types fournis par JavaScript : des Number, des String, des tableaux, des objets. Mais JavaScript nous permet également de créer nos propres types de données en utilisant un paradigme très répandu dans beaucoup de langages : La Programmation Orientée Objet.

La Programmation Orientée Objet en très bref

Vous aurez l'occasion de découvrir la Programmation Orientée Objet plus en détails quand nous aborderons le PHP, c'est pourquoi aujourd'hui, nous allons juste survoler le principe général et nous concentrer sur son implémentation en JavaScript.

La Programmation Orientée Objet est ce qu'on appelle un paradigme de programmation. Elle repose sur l'idée de réunir en blocs de code des fonctionnalités qui vont ensemble et de les stocker dans des types de variables sur mesure appelées des classes.

Les classes que vous avez déjà croisées

Vous avez déjà un peu utilisé des classes en JavaScript sans le savoir. En effet, les Array et les Promises sont des classes fournies par le langage. En général, vous pouvez repérer que vous utilisez une classe si vous utilisez le mot clé new pour créer la variable :

let tableau = new Array(); // array est une classe

return new Promise(resolve, reject); // Promise en une classe

Les classes et les instances

Lorsque vous codez une classe en JavaScript, vous ne codez pas une variable. Vous codez un bout de code qui donne la recette pour une variable. Une fois que cette recette existe vous pouvez créer autant de variables que vous voulez en utilisant cette recette. On parle d'instance de classe.

Quand utiliser les classes ?

En JavaScript, contrairement à d'autres langages, l'utilisation des classes est optionnelle. Elles sont utilisées quand vous voulez regrouper des fonctionnalités. Imaginons par exemple que vous ayez réuni des données et des fonctions dans un fichier que vous importez avec le système de modules :

export const users = [
    {
        firstName : "Mari",
        lastName : "Doucet",
        grades : [13, 12, 15] 
    },
    {
        firstName : "Hugues",
        lastName : "Froger",
        grades : [14, 11, 17]
    }
];

export function getUserFullName(user)
{
    return `${user.firstName} ${user.lastName}`;
}

export function getUserAverage(grades)
{
    let sum = 0;
    
    for(let grade of grades)
    {
        sum += grade;
    }
    
    return sum / grades.length;
}

Plutôt que d'avoir mes 3 exports qui concernent tous les mêmes types de données, les users, je pourrais décider de créer une classe User qui contient trois variables :

firstName
lastName
grades

et deux fonctions :

getUserFullName
getUserAverage

Les classes et les attributs

Pour vous montrer la syntaxe de l'utilisation des classes je vais réutiliser l'exemple ci-dessus avec les users.

Déclarer une classe

Pour déclarer une classe, on utilise le mot clé class suivi du nom de la classe. Le nom dúne classe a toujours une Majuscule à chaque mot du nom :

class User
{
    
}

Les attributs d'une classe

Une classe a la possibilité de contenir des variables, qu'on appelle les attributs.

Dans notre exemple, la classe User contient les attributs firstName, lastName et grades.

class User {
    firstName;
    lastName;
    grades;
}

Donner une valeur de départ aux attributs avec le constructeur

Pour donner une valeur de départ aux attributs de notre classe nous allons déclarer une fonction spéciale à l'intérieur de la classe : la fonction constructor:

class User {

    firstName;
    lastName;
    grades;

    constructor(firstName, lastName, grades)
    {
        
    }
} 

Et dans cette fonction spéciale, nous allons lui indiquer de copier les valeurs envoyées dans les attributs de la classe :

class User {

    firstName;
    lastName;
    grades;

    constructor(firstName, lastName, grades)
    {
        this.firstName = firstName;
        this.lastName = lastName;
        this.grades = grades;
    }
} 

Vous pouvez remarquer que l'on utilise un mot clé que nous ne connaissions pas jusque là : le mot clé this. Ce mot clé dans une classe, nous permet de faire comprendre au code que nous parlons de l'attribut de cette classe. Même si ailleurs une variable firstName, lastName ou grades existe, cela fait comprendre au code que l'on parle bien de l'attribut à l'intérieur de cette classe.

Appeler le constructeur de la classe

La fonction constructor d'une classe est celle qui va nous permettre de créer une instance de classe, donc une variable, à partir du modèle de la classe. Pour faire ça nous allons utiliser le mot clé new:

let mari = new User('Mari', 'Doucet', [13, 12, 15]);
let hugues = new User('Hugues', 'Froger', [14, 11, 17]);

Vous pouvez tout à fait créer un tableau qui contient plusieurs instances de la même classe en l'écrivant ainsi :

let users = [
    new User('Mari', 'Doucet', [13, 12, 15]),
    new User('Hugues', 'Froger', [14, 11, 17]),
];

Lire les attributs d'une classe

Une fois que vous avez créé une instance de votre classe, vous pouvez accéder à ses attributs en utilisant l'opérateur ..

let mari = new User('Mari', 'Doucet', [13, 12, 15]);
let hugues = new User('Hugues', 'Froger', [14, 11, 17]);

console.log(mari.firstName); // Mari
console.log(hugues.lastName); // Froger

Modifier les attributs d'une classe

Une fois que vous avez créé une instance de votre classe, vous pouvez modifier ses attributs en utilisant l'opérateur . et l'opérateur =.

let mari = new User('Marie', 'Doucet', [13, 12, 15]);
let hugues = new User('Hugues', 'Froge', [14, 11, 17]);

mari.firstName = 'Mari';
hugues.lastName = 'Froger';

19 January 2026