Javascript

ES6 : les objets

On va voir bientôt que la principale avancée de ES6 au niveau des objets est l’arrivée de la syntaxe des classes. Mais avant d’aborder ce sujet on va commencer par voir quelques nouvelles possibilités pour les objets.

Les initialisateurs d’objets (objets littéraux)

Simplification pour les propriétés

Vous utilisez sans doute beaucoup d’initialisateurs d’objets de ce genre :

let identite = { 
  nom: "Durand", 
  prenom: "Louis", 
  caracteristiques: {
     age: 20,
     poids: 75
  } 
};

C’est une syntaxe simple et rapide.

Avec ES6 vous pouvez initialiser les propriétés avec des variables existantes :

let nom = "Durand";
let prenom = "Louis"; 
let age = 20;
let poids = 75;
let identite = { 
  nom, 
  prenom, 
  caracteristiques: {
    age,
    poids
  } 
};

Simplification pour les méthodes

Avec ES5 vous déclarez une méthode ainsi :

let nom = "Durand";
let identite = { 
  	nom, 
  	getNom: function() {
     	    return this.nom; 
        }
};
console.log(identite.getNom());  // Durand

Avec ES6 vous avez une syntaxe simplifiée (on évite function) :

let nom = "Durand";
let identite = { 
  	nom, 
  	getNom() {
     	    return this.nom; 
        }
};
console.log(identite.getNom());  // Durand

Propriété calculée

On peut maintenant avoir un nom de propriété déterminé par une expression. Il suffit d’utiliser des crochets :

let identifiant = "no";
let identite = { 
  	[identifiant + "m"]: "Durand", 
};
console.log(identite.nom);  // Durand

Les nouvelles méthodes pour Object

Object.assign

Regardez ce code :

const identite = { nom: "Durand" };
Object.assign(identite, { prenom: "Louis" });
console.log(identite);  // {"nom":"Durand","prenom":"Louis"}

On effectue une composition d’objets en ajoutant à l’objet identite les propriétés d’un autre objet.

On ne copie que les propriétés énumérables et non héritées.

Que se passe-t-il si des propriétés ont le même nom ?

Et bien on va faire un essai :

const identite = { nom: "Durand", prenom : "Louis" };
Object.assign(identite, { prenom: "Alfred" });
console.log(identite);  // {"nom":"Durand","prenom":"Alfred"}

On a une surcharge de la propriété.

Et les accesseurs ?

const identite = { 
  	nom: "Durand", 
  	prenom: "Louis",
  	get nomComplet() { return this.nom + " " + this.prenom }
};
let copie = Object.assign({}, identite);
console.log(copie);  // {"nom":"Durand","prenom":"Louis","nomComplet":"Durand Louis"}

On se retrouve avec une propriété dont la valeur est celle retournée par l’accesseur.

Object.is

Lorsqu’on veut comparer deux valeurs on utilise == ou ===. La seconde syntaxe est la plus sûre parce qu’elle ne se contente pas de comparer les valeurs mais aussi le type. Mais même avec cette syntaxe on a deux petits soucis :

  • -0 === +0 est considéré comme vrai,
  • NaN === NaN est considéré comme faux.

ES6 introduit la méthode is pour avoir un vrai contrôle de l’identité de deux valeurs :

Object.is([], []);     // false
Object.is(null, null); // true
Object.is(0, -0);      // false
Object.is(-0, -0);     // true
Object.is(NaN, 0/0);   // true

En résumé

  • ES6 apporte une simplification de la syntaxe pour les propriétés et les méthodes des initialisateurs d’objets.
  • ES6 enrichi Object des méthodes assign et is.
Print Friendly, PDF & Email

Laisser un commentaire