javascript 01. ECMAScript 6

Posted 2021-05-03

/* Les classes (ES5) */

function Vehicle(color, drivingWheel) {
    this.color = color;
    this.drivingWheel = drivingWheel;
    this.isEngineStart = false;
}

Vehicle.prototype.start = function start(){
    this.isEngineStart = true;
}

Vehicle.prototype.stop = function stop(){
    this.isEngineStart = false;
}

/* Les classes (ES6) */

class Vehicle {
    
    constructor(color, drivingWheel) {
        this.color = color;
        this.drivingWheel = drivingWheel;
        this.isEngineStart  = false;
    }
    
    start() {
        this.isEngineStart  = true;
    }
    
    stop() {
        this.isEngineStart  = false;
    }
     
}

/* L'héritage (ES5) */

function Vehicle(color, drivingWheel) {
    this.color = color;
    this.drivingWheel = drivingWheel;
    this.isEngineStart  = false;
}

Vehicle.prototype.start = function start() {
    this.isEngineStart = true;
}

Vehicle.prototype.stop = function stop() {
    this.isEngineStart = false;
};

// Une voiture est un véhicule.
function Car(color, drivingWheel, seatings) {
  Vehicle.call(this, color, drivingWheel);
  this.seatings = seatings;
}

Car.prototype = Object.create(Vehicle.prototype);

// Une moto est un véhicule également.
function Motorbike(color, drivingWheel, unleash) {
  Vehicule.call(this, color, drivingWheel);
  this.unleash = unleash;
}

Motorbike.prototype = Object.create(Vehicle.prototype);

/* L'héritage (ES6) */

class Vehicle  {
  constructor(color, drivingWheel, isEngineStart = false) {
    this.color = color;
    this.drivingWheel = drivingWheel;
    this.isEngineStart = isEngineStart; 
  }
  
  start() {
    this.isEngineStart = true;
  }
  
  stop() {
    this.isEngineStart = false;
  }
}

class Car extends Vehicle {
  constructor(color, drivingWheel, isEngineStart = false, seatings) {
    super(color, drivingWheel, isEngineStart);
    this.seatings = seatings;
  } 
}

class Motorbike extends Vehicle {
  constructor(color, drivingWheel, isEngineStart = false, unleash) {
    super(color, drivingWheel, isEngineStart);
    this.unleash = unleash;
  } 
}

/* Les paramètres par défaut (ES5) */

function sum(){
    var result = 0;
    for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result;
}

/* Les paramètres par défaut (ES5) */

function multiply(a, b) {
  var b = typeof b !== 'undefined' ? b : 1; // b est facultatif

  return a*b;
}

multiply(2, 5); // 10
multiply(1, 5); // 5
multiply(5); // 5

/* Les paramètres par défaut (ES6) */

function multiply(a, b = 1) {
  return a*b;
}

multiply(5); // 5

/* Le mot-clef 'let' (ES6) */

// Exemple d'utilisation de 'let' avec une condition.
var x = 1;

if(x < 10) {
  let v = 1;
  v = v + 21;
  v = v * 100;
  v = v / 8;
	
  console.log(v);
}

console.log(v); // v n'est pas définie, car v a été déclarée avec 'let' et non 'var'.

// Exemple d'utilisation de 'let' avec une boucle.
for (let i = 0; i < 10; i++) {
  console.log(i); // 0, 1, 2, 3, 4 ... 9
}

console.log(i); // i n'est pas défini hors du contexte de la boucle

/* Le mot-clef 'const' (ES6) */

// Déclaration d'une constante.
const PI = 3.141592;

// Tentive de modification d'une constante.
PI = 3.146; // Erreur : la valeur de PI ne peut plus être modifié.

// Modification d'une constante de type tableau.
const MATHEMATICAL_CONSTANTS = {PI: 3.141592, e: 2,718281};
MATHEMATICAL_CONSTANTS.PI = 3.146; // Aucun problème.

/* Les promesses (ES5) */

// Utilisation de base
getUser(userId, function(user) {
  getFriendsList(user, function(friends) {
    showFriends(friends);
  });
});

// Utilisation avec des Promesses
getUser(userId)
.then(function(user) {
  getFriendsList(user);
})
.then(function(friends) {
  showFriends(friends);
});

// Déclarer une Promesse
let getUser = function(userId) {
  return new Promise(function(resolve, reject) {
  // appel asynchrone au serveur pour récupérer les informations d'un utilisateur...
  // à partir de la réponse du serveur, j'extrais les données de l'utilisateur :
  let user = response.data.user;

  if(response.status === 200) {
    resolve(user);
  } else {
    reject('Cet utilisateur n\'existe pas.');
  }
})
}

// Traiter une Promesse
getUser(userId)
  .then(function (user) {
    console.log(user); // en cas de succés
  }, function (error) {
    console.log(error); // en cas d'erreur
});

/* Les fonction fléchées (ES6) */

// Cas n°1 : Confusion sur 'this'
class Person {
    constructor(firstName, email, button) {
        this.firstName = firstName;
        this.email = email;
        
        button.onclick = function() {
            sendEmail(this.email); // ce 'this' fait référence au bouton, et non à une instance de Personne.
        }
    }
}

// Cas n°2 : Utilisation d'une variable intermédiaire
class Person {
    constructor(firstName, email, button) {
        this.firstName = firstName;
        this.email = email;
        var that = this; // 'this' fait référence ici à l'instance de Personne
        
        button.onclick = function() {
            sendEmail(that.email); // 'that' fait référence à la même instance de Personne
        }
    }
}

// Cas n°3 : Utilisation des fonctions fléchées
bouton.onclick = () => { envoyerEmail(this.email); }


// Exemple d'utilisation des fonctions fléchées avec des Promesses
getUser(userId)
  .then(user => getFriendsList(user))
  .then(friends => showFriends(friends));

/* Les dictionnaires et les listes (ES6) */

// Les Dictionnaires avec Map

let zlatan = {rank: 1, name: 'Zlatan'};

let players = new Map(); // Je crée une nouveau dictionnaire
players.set(zlatan.rank, zlatan.name); // J'ajoute lobjet 'zlatan' à la clé '1'

// Les listes avec Set

let players = new Set(); // Je crée une nouvelle liste
players.add(zlatan); // j'ajoute un joueur dans cette liste

// Méthodes pour Map et Set

players.size; // affiche le nombre d'éléments dans la collection

players.has(zlatan.rang); // Dictionnaire: affiche si le dictionnaire contient la clé (le rang) de Zlatan.
players.has(zlatan); // Liste: affiche si la liste contient le joueur Zlatan.

players.delete(zlatan.rang); // Dictionnaire: supprime un élément d'après une clef.
players.delete(zlatan); // Liste: supprime l'élément passé en paramètre.

/* Les Template Strings (ES5) */

let someText = "duTexte";
let someOtherText = "unAutreTexte";

let embarrassingString = someText;
embarrassingString += " blabla";
embarrassingString += someOtherText;
embarrassingString += "blabla";

return embarrassingString;

/* Les Template Strings (ES6) */

// On peut écrire des strings sur plusieurs ligne grâce au backtick
let severalLinesString = `bla
blablalbalblalballb
balblablalabla
b
ablablablabbl`;

// .. mais pas avec des guillemets !
// Regardez la couleur syntaxique, vous comprendrez que ce code risque
// de lever une erreur !
let severalLinesStringWithError = "bla
blba
blbla
blabla"

// Concaténation avec les Template Strings
return `${this.name} a pour email : ${this.email}`;