Cet article est la suite de ES6 : quelques nouveautés de la prochaine version de JavaScript.
Modules
La gestion de modules/dépendances est un vrai manque dans JavaScript. Des solutions comme AMD ou CommonJs ont permis de combler ce manque. La nouvelle version de JavaScript apporte une gestion native des modules.
Un module est défini dans un fichier. Les fonctions de ce fichier ne sont pas visibles des autres fichier à moins de les exporter explicitement. Cela se fait via l’introduction de 2 nouveaux mots clés : import et export. Export permet de définir ce que vous voulez exposer. A l’opposé, import permet de d’importer tout ou partie d’un module.
Déclarons un fichier utils.js qui contient une fonction permettant de générer un Uuid
function generateUUID () { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); }; export { generateUUID }
Importons la méthode generateUUID dans un autre module
import { generateUUID } from 'utils'; var uuid = generateUUID();
On peut même importer le module complet
import 'utils' as utils; console.log(utils.generateUUID());
Quelques liens pour aller plus loin :
Angular 2.0 utilisera les modules ES6.
Classes
ES6 apporte la gestion des classes via le mot clé class (avec d’autres comme constructor et extends). JavaScript est déjà objet via les prototypes mais peu de gens savent les utiliser.
Les nouveaux mots clés sont juste du « sucre syntaxique » au dessus des prototypes afin de faciliter l’écriture sous forme de classes, plus familier des personnes venant de Java, C#, ….
Pour ceux qui s’intéressent au développement objet via les prototypes, je conseille la présentation de Christophe Porteneuve, portant notamment sur les prototypes, à Paris Web : slides et vidéo.
Voici un exemple de la définition d’une classe Employee héritant de Person.
class Person { constructor(firstName, lastName, age) { //constructors! this.firstName = firstName; this.lastName = lastName; this.age = age; } fullName(){ console.log(this.firstName + " " + this.lastName); } } class Employee extends Person { //inheritance constructor(firstName, lastName, age, salary) { super(firstName, lastName, age); //call the parent constructor with super this.salary = salary; } printSalary(){ console.log('Salary : ' + this.salary); } } let julien = new Employee('Julien', 'Roy', '33', 150000); julien.fullName(); julien.printSalary();
Quelques liens pour aller plus loin avec les classes ES6.
Améliorations sur les objets
ES6 apporte également des raccourcis concernant la création d’objet concernant :
la création de méthode
//ES5 var obj = { myMethod: function () { ··· } }; //ES6 var obj = { myMethod() { ··· } };
les propriétés
Il n’est plus necessaire de spécifier la valeur si on créer une propriété à partir d’une variable.
let x = 4; let y = 1; let obj = { x, y }; //ES6 let es5Obj = { x : x; y : y};
Computed property keys
Il est maintenant possible de créer des propriétés ayant une clé composé lors de la création d’un objet.
let obj = { [propKey]: true, ['b'+'ar']: 123 };
De nouvelles méthodes sont également disponible :
Object.is()
Object.is permet une comparaison supprimant des cas bizarres en js lors des comparaison avec ===
(NaN !== NaN) //false -0 === +0 //false
var isSame = Object.is(value1, value2);
Object.assign()
La méthode assign permet la copie les propriétés d’un objet source dans un autre objet (idéal pour les options par défaut ou le clone d’objet).
Cette méthode existait dans plusieurs librairies comme $.extend en jQuery ou _.defaults pour Underscore/lodash.
Exemple de copie d’un objet avec Object.assign()
var obj = { a: 1 }; var copy = Object.assign({}, obj);
Quelques liens pour aller plus loin :
Symbols
ES6 apporte un nouveau type primitif : les Symbols. Ils sont uniques (2 symbols ne sont jamais égaux) et immutables (non modifiables). Ils peuvent être utilisés pour définir une propriétés d’un objet par exemple (on utilisera la méthode Object.getOwnPropertySymbols() pour obtenir les propriétés de type symbole d’un objet).
//Création d'un symbol let symbol1 = Symbol(); //Utilisation d'un symbol comme propriété d'un objet const MY_KEY = Symbol(); let obj = { [MY_KEY]: 123 };
Quelques liens sur le sujet :
Références
Quelques liens en complément de ceux de l’article précédent :
- Table de compatibilité
- Understanding ECMAScript 6 : un e-book sur ES6
- ES6 Shim : une librairie qui permet d’utiliser des fonctionnalités ES6 dans les vieux navigateurs
- Des équivalences de code ES5 / ES6
la suite au prochain épisode …
Tweet
Bonjour, je trouve vos articles passionnants. Serait-il possible d’être prévenu par mail lors de la parution d’un nouvel article ?
Merci.