Les objets en JavaScript /
découvrez le monde merveilleux des objets

29/02/2016

Les objets en JS sont des concepts relativement simple. Un objet vous permettra de stocker des pair clé valeur ainsi que des méthodes (des functions).

Un petit exemple pour que vous voyiez bien de quoi je parle ici


var bookArray = ["Big Brother", "1984", "Peter Pan"]; var myBox = { height: 6, width: 10, length: 730, meterial : "cardboard", content : bookArray };

Accéder à une propriété / de l'objet

Pour accéder à une propriété de l’objet, c’est très simple. Imaginons que nous voulons afficher la hauteur de notre boite.

Il suffit de faire

console.log(myBox.height);

Mais nous pourrions aussi faire légèrement différemment

console.log(myBox["height"]);

Les deux notations fonctionneront parfaitement, je vous conseille cependant de privilégier la notation pointée (la première) qui est plus répandue.

Créer / une propriété

Nous pouvons ajouter une propriété à notre objet pour ce faire nous pouvons utiliser la notation pointée. Mais si la clé de notre propriété contient des espaces, il faudra absolument utiliser la notation entre crochets.


myBox.nbStops = 2; // avec des espaces dans le nom de la propriété myBox["# of stops"] = 2;

Construire dynamiquement / des propriétés


for (var i = 1; i <= myBox["# of stops"]; i++){ console.log(myBox["destination"+i] = "Orlando"); }

Va rajouter les propriétés suivantes à l’objet :


destination1: "Orlando-1" destination2: "Orlando-1"

Supprimer / une propriété et son contenu

Il existe une méthode pour supprimer une propriété et son contenu dans un objet. C’est la méthode delete.

Si par exemple nous voulons supprimer la propriété contents de l’objet.

delete myBox.contents;

La méthode delete supprimera la propriété dans son ensemble pas seulement son contenu, mais sa clé et sa valeur.

Attention à la valeur de retour de delete

il est important de faire attention à la valeur de retour de delete en effet celle si retournera true si une suppression s’est effectuée sur une propriété existante dans l’objet ,mais aussi sur une propriété qui n’existait pas

Si j’effectue une suppression d’une propriété non existante


delete myBox.proprioeteInconnue // retourne true

Ajouter dynamiquement une propriété / avec comme valeur un objet

Pour ce faire nous allons créer une fonction


var myBox = { '# of books' : 2, height: 6, width: 10, length: 730, meterial : "cardboard" }; function addBook(box,name,writer){ box["# of books"]++; // on incrémente de 1e nb de livre box["book" + box["# of books"]] = {title : name, author: writer}; // ajoute une propriété bookN avec comme paramètre un objet contenant le title et le writer } addBook(myBox,"Le title du livre","Good Writer");

Accéder à une valeur / contenue dans un sous objet


var myBox = { book1 : { title : "Le title du livre", writer : "Good Writer" } }

Pour accéder à la valeur title il suffit de faire :


myBox.book1.title; // retourne "Le title du livre"

Il est aussi possible d’utilise la notation entre crochet pour obtenir le même résultat


myBox['book1']['title']; // retourne "Le title du livre"

Les functions / dans les objets

Les objets JavaScript peuvent contenir des valeurs (string, interger, bloeen) rattachées à une clé.,Mais les objets peuvent aussi contenir des functions plus exactement des functions anonymes rattachées à une clé.

Petit exemple


var aquarium = { Nemo : {type : "fish", species : "clownfish", length: 3.7}, Marlin : {type : "fish", species : "clownfish", lenght: 4.2}, addCritter : function (name, type,species,lenght){ this[name] = {type: type, species: species, lenght: lenght}; } }

Ici nous avons un objet avec une function addCriter permettant d’ajouter une nouvelle propriété à l’objet.
Il est important de remarquer que nous utilisons le mot clé ‘this’ qui fait référence à l’objet à l’intérieur de celui-ci.

Appeler une function contenue dans un objet


aquarium.addCritter('Bubbles','fish','yellow tang',5.6);

supprimer une propriété d’un objet

Pour supprimer une propriété d’un objet nous pouvons utiliser un fonction anonyme.

exemple


aquarium.takeOut = function(name){ var temp = this[name]; delete this[name]; return temp } var fishOutofWater = aquarium.takeOut("Marlin"); console.log(fishOutofWater); // retourne l'objet supprimé (temp)

Cependant l’objet supprimé de contient pas la clé (le nom de notre valeur).
Comment pouvons-nous donc faire pour récupérer le nom ?

Voilà comment


aquarium.takeOut = function(name){ this[name].name = name; // On rajoute une valeur name dans la valeure var temp = this[name]; delete this[name]; return temp }

Itérer / un objet

Lorsque l’on souhaite connaitre le nombre de valeurs d’un array il est très simple d’utiliser length.


var monArray = ["Hello","Wor","ld"]; monArray.length; // retourne 2

Mais length ne marche pas sur les objet, pas de chance… Nous pourrions par contre faire une boucle sur l’objet.
Mais si nous voulions connaitre le nombre de propriété avec une valeur précise ?

C’est là que rentre en jeux la loop for-in ! Petite démonstration :


var aquarium = { Nemo : {type : "fish", species : "clownfish", length: 3.7}, Marlin : {type : "fish", species : "clownfish", lenght: 4.2}, addCritter : function (name, type,species,lenght){ this[name] = {type: type, species: species, lenght: lenght}; } } for (key in aquarium){ console.log(key); }

la boucle for in va ittérer notre objet en transposant chaque propriété dans la variable key.
A noté que la variable key peut changer de nm pour n’importe quoi.

Donc si nous voulions savoir exactement le nombre de propriétés avec une valeur particulières c’est assez simple.

Par exemple si nous voulons connaitre le nombre de propriété de type « fish » il nous suffit de mettre en place cette loop.


var numFish = 0; for (key in aquarium){ if(aquarium[key].type == "fish"){ numFish++ } } console.log('Le Nombre de poissons dans l\'objet est : '+numFish);

Nous pourrions aussi améliorer notre objet en intégrant une fonction qui permettrait de comptabiliser le nombre de poissons dans notre objet.


aquarium.countFish = function(){ // on rajoute une function à l'objet var numFish = 0; for (key in this){ if(this[key].type == "fish"){ numFish++ } } return numFish; }

Ensuite nous pouvons appeler cette function de l’objet

aquarium.countFish();