Objets JavaScript

Qu'est-ce qu'un objet ?

JavaScript est un langage basé sur des objets et en JavaScript presque tout est un objet ou agit comme un objet. Ainsi, pour travailler avec JavaScript de manière efficace et efficiente, nous devons comprendre comment les objets fonctionnent ainsi que comment créer vos propres objets et les utiliser.

Un objet JavaScript est juste une collection de valeurs nommées. Ces valeurs nommées sont généralement appelées propriétés de l'objet. Si vous vous souvenez du chapitre sur les tableaux JavaScript, un tableau est une collection de valeurs, où chaque valeur a un index (une clé numérique) qui commence à zéro et s'incrémente de un pour chaque valeur. Un objet est similaire à un tableau, mais la différence est que vous définissez vous-même les clés, telles que le nom, l'âge, le sexe, etc. Dans les sections suivantes, nous en apprendrons plus sur les objets.

Création d'objets

Un objet peut être créé avec des accolades {} avec une liste facultative de propriétés. Une propriété est une paire "clé : valeur", où la clé (ou le nom de la propriété ) est toujours une chaîne, et la valeur (ou la valeur de la propriété ) peut être n'importe quel type de données, comme des chaînes, des nombres, des booléens ou des types de données complexes comme des tableaux, fonctions et autres objets. De plus, les propriétés avec des fonctions comme valeurs sont souvent appelées méthodes pour les distinguer des autres propriétés. Un objet JavaScript typique peut ressembler à ceci :

 

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

L'exemple ci-dessus crée un objet appelé person qui a trois propriétés name, ageet gender et une méthode displayName(). La méthode displayName() affiche la valeur de this.name, qui se résout en person.name. C'est le moyen le plus simple et préféré de créer un nouvel objet en JavaScript, connu sous le nom de syntaxe des littéraux d'objet .

Les noms de propriété n'ont généralement pas besoin d'être mis entre guillemets, sauf s'ils sont des mots réservés, ou s'ils contiennent des espaces ou des caractères spéciaux (autres que des lettres, des chiffres et les caractères _et $), ou s'ils commencent par un chiffre, comme indiqué dans le exemple suivant :

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

Remarque : depuis ECMAScript 5, les mots réservés peuvent être utilisés comme noms de propriété d'objet sans guillemets. Cependant, vous devriez éviter de le faire pour une meilleure compatibilité.

Accéder aux propriétés de l'objet

Pour accéder ou obtenir la valeur d'une propriété, vous pouvez utiliser la notation point ( .) ou crochet ( []), comme illustré dans l'exemple suivant :

var book = {
    "name": "Harry Potter and the Goblet of Fire",
    "author": "J. K. Rowling",
    "year": 2000
};

/* Dot notation */
document.write(book.author);  // Affiche: J. K. Rowling

/* Bracket notation */
document.write(book["year"]); // Affiche: 2000

La notation par points est plus facile à lire et à écrire, mais elle ne peut pas toujours être utilisée. Si le nom de la propriété n'est pas valide (c'est-à-dire s'il contient des espaces ou des caractères spéciaux), vous ne pouvez pas utiliser la notation par points ; vous devrez utiliser la notation entre crochets, comme illustré dans l'exemple suivant :

 

var book = {
    name: "Harry Potter and the Goblet of Fire",
    author: "J. K. Rowling",
    "publication date": "8 July 2000"
};

/* Bracket notation */
document.write(book["publication date"]); // Affiche: 8 July 2000

La notation entre crochets offre beaucoup plus de souplesse que la notation par points. Il vous permet également de spécifier des noms de propriété en tant que variables au lieu de simplement des littéraux de chaîne, comme indiqué dans l'exemple ci-dessous :

 

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};

var key = prompt("Enter any property name to get its value");
alert(person[key]); // Affiche: Peter (Si vous taper "name")

Boucler dans les propriétés de l'objet

Vous pouvez parcourir les paires clé-valeur d'un objet à l'aide de la boucle for...in. Cette boucle est spécialement optimisée pour itérer sur les propriétés de l'objet. Voici un exemple :

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};


/* parcourir les propriétés de l'objet */
for(var i in person) {  
    document.write(person[i] + "<br>"); // Affiche: name, age and gender
}

Définition des propriétés de l'objet

De même, vous pouvez définir les nouvelles propriétés ou mettre à jour celles existantes à l'aide de la notation point ( .) ou crochet ( []), comme illustré dans l'exemple suivant :

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};


/* ajouter une propriété */
person.country = "United States";
document.write(person.country); // Affiche: United States

person["email"] = "[email protected]";
document.write(person.email); // Affiche : [email protected]

/* Modiffier une propriété */
person.age = 30;
document.write(person.age); 

person["name"] = "Peter Parker";
document.write(person.name); 

Suppression des propriétés de l'objet

L'opérateur delete peut être utilisé pour supprimer complètement les propriétés d'un objet. La suppression est le seul moyen de supprimer réellement une propriété d'un objet. La définition de la propriété sur undefined ou null modifie uniquement la valeur de la propriété. Il ne supprime pas la propriété de l'objet.

 

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

delete person.age;
alert(person.age); // Affiche : undefined

Remarque : L'opérateur  delete supprime uniquement une propriété d'objet ou un élément de tableau. Il n'a aucun effet sur les variables ou les fonctions déclarées. Cependant, vous devez éviter l'opérateur delete pour supprimer un élément de tableau, car il ne modifie pas la longueur du tableau, il laisse juste un trou dans le tableau.

Appel des méthodes de l'objet

Vous pouvez accéder à la méthode d'un objet de la même manière que vous accéderiez aux propriétés, en utilisant la notation par points ou en utilisant la notation entre crochets. Voici un exemple :

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        alert(this.name);
    }
};

person.displayName(); // Affiche: Peter
person["displayName"](); // Affiche : Peter

Manipulation par valeur vs référence

Les objets JavaScript sont des types de référence, ce qui signifie que lorsque vous en faites des copies, vous ne faites que copier les références à cet objet. Alors que les valeurs primitives telles que les chaînes et les nombres sont attribuées ou copiées comme une valeur entière. Pour mieux comprendre tout cela, regardons l'exemple suivant :

var message = "Hello World!";
var greet = message; /* Assigne la variable message à une nouvelle variable */
greet = "Hi, there!";
document.write(message);  /* affiche: Hello World! */
document.write(greet);  / * Affiche : Hi, there! */

Dans l'exemple ci-dessus, nous avons fait une copie d'une variable messageet modifié la valeur de cette copie (c'est-à-dire variable greet). Les deux variables restent distinctes et séparées. Mais, si nous faisons la même chose avec un objet, nous obtiendrons un résultat différent, comme vous le voyez dans l'exemple suivant :

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};
var user = person; /* Assign person à une nouvelle variable */
user.name = "Harry";
document.write(person.name);  // Affiche: Harry
document.write(user.name);  // Affiche: Harry

Vous pouvez clairement voir que toute modification apportée à la variable usermodifie également la variable person; cela se produit parce que les deux variables référencent le même objet. Ainsi, copier simplement l'objet ne le clone pas réellement mais copie la référence à cet objet.