ES6 : quelques nouveautés de la prochaine version de JavaScript – Part II

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 :

la suite au prochain épisode …

1 réflexion sur « ES6 : quelques nouveautés de la prochaine version de JavaScript – Part II »

  1. Bonjour, je trouve vos articles passionnants. Serait-il possible d’être prévenu par mail lors de la parution d’un nouvel article ?
    Merci.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *