Introduction à ES6

ECMAScript 2015, également connu sous le nom de ES6 (ECMAScript 6), est une mise à jour importante de JavaScript, introduisant une nouvelle syntaxe et des fonctionnalités qui rendent le codage plus efficace et plus facile à gérer. JavaScript est l'un des langages de programmation les plus populaires utilisés pour le développement Web, et les améliorations apportées à ES6 améliorent considérablement ses capacités.

Ce guide couvrira les fonctionnalités importantes introduites dans ES6, avec un accent particulier sur les Fonctions fléchées, une nouvelle façon puissante d'écrire des fonctions.

Principales fonctionnalités de ES6

1. laisser et const

ES6 a introduit deux nouvelles façons de déclarer des variables : let et const.

• let : déclare une variable de portée bloc, ce qui signifie que la variable n'est disponible que dans le bloc dans lequel elle a été déclarée.
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const : Déclare une variable constante qui ne peut pas être réaffectée. Cependant, cela ne rend pas la variable immuable : les objets déclarés avec const peuvent toujours voir leurs propriétés modifiées.
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

2. Fonctions fléchées

L'une des fonctionnalités dont on parle le plus d'ES6 est la Fonction Flèche. Il fournit une syntaxe plus courte et plus concise pour l’écriture de fonctions.

#### Comparaison de syntaxe :

Fonction traditionnelle (ES5) :

   var add = function(x, y) {
     return x   y;
   };

Fonction fléchée (ES6) :

   const add = (x, y) => x   y;

Voici ce qui différencie les fonctions fléchées :

• Syntaxe plus courte : vous n'avez pas besoin d'écrire le mot-clé de fonction et vous pouvez omettre les accolades {} si la fonction a une seule instruction.
• Retour implicite : si la fonction ne contient qu'une seule expression, le résultat de cette expression est renvoyé automatiquement.
• Pas de liaison avec cette liaison : les fonctions fléchées n'ont pas leur propre ceci, ce qui les rend inadaptées aux méthodes objet.

Exemple de fonction de flèche sur une seule ligne :

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

Les fonctions fléchées peuvent également être utilisées sans paramètres :

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

Pour les fonctions comportant plusieurs lignes, des accolades {} sont requises et l'instruction return doit être explicite :

   const sum = (a, b) => {
     let result = a   b;
     return result;
   };

Fonctions fléchées et ceci
Une distinction importante est la manière dont cela se comporte dans les fonctions fléchées. Contrairement aux fonctions traditionnelles, les fonctions fléchées ne lient pas leur propre ceci : elles héritent de cela de leur contexte environnant.

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

Dans l'exemple ci-dessus, la fonction Arrow à l'intérieur de setTimeout hérite de cela de la méthode sayName, qui fait correctement référence à l'objet personne.

3. Mission de déstructuration

La déstructuration nous permet d'extraire des valeurs de tableaux ou d'objets et de les affecter à des variables de manière plus concise.

Déstructuration d'objet :

   const person = { name: "John", age: 30 };
   const { name, age } = person;
   console.log(name); // "John"
   console.log(age);  // 30

Déstructuration de tableaux :

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. Opérateur de propagation et de repos (...)

L'opérateur ... peut être utilisé pour développer des tableaux en éléments individuels ou pour rassembler plusieurs éléments dans un tableau.

• Spread : étend un tableau en éléments individuels.
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

• Rest : rassemble plusieurs arguments dans un tableau.
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc   curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5. Promesses

Les promesses sont utilisées pour gérer les opérations asynchrones en JavaScript. Une promesse représente une valeur qui peut être disponible maintenant, dans le futur ou jamais.

Exemple:

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

Dans cet exemple, la promesse est résolue après 1 seconde et la méthode then() gère la valeur résolue.

6. Paramètres par défaut

Dans ES6, vous pouvez définir des valeurs par défaut pour les paramètres de fonction. Ceci est utile lorsqu'un paramètre n'est pas fourni ou n'est pas défini.

Exemple:

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. Méthodes de chaîne (inclut (), démarreAvec(), termineAvec())

De nouvelles méthodes ont été ajoutées aux chaînes pour faciliter les tâches courantes :

• includes() : vérifie si une chaîne contient une valeur spécifiée.
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

• startsWith() : vérifie si une chaîne commence par une valeur spécifiée.
  

   console.log(str.startsWith("Hello")); // true
  

• endsWith() : vérifie si une chaîne se termine par une valeur spécifiée.
  

   console.log(str.endsWith("!")); // true
  

8. Méthodes de tableau (find(), findIndex(), from())

ES6 a introduit de nouvelles méthodes pour travailler avec des tableaux :

• find() : renvoie le premier élément qui satisfait une condition.
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findIndex() : renvoie l'index du premier élément qui satisfait une condition.
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. Cours

ES6 a introduit des classes dans JavaScript, qui sont un sucre syntaxique par rapport à l'héritage existant basé sur des prototypes de JavaScript. Les classes permettent une programmation orientée objet plus propre et plus compréhensible.

Exemple:

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

Conclusion

ES6 a transformé JavaScript, le rendant plus efficace et plus facile à utiliser. L'introduction des Fonctions fléchées simplifie la syntaxe des fonctions, tandis que de nouvelles fonctionnalités telles que la déstructuration, les promesses, les classes et l'opérateur de propagation permettent aux développeurs d'écrire du code plus propre et plus expressif. Que vous soyez débutant ou développeur avancé, comprendre ces fonctionnalités ES6 est essentiel pour écrire du JavaScript moderne.

En maîtrisant ces concepts, vous serez mieux équipé pour relever les défis de codage du monde réel et créer des applications Web efficaces et évolutives.

Suivi du projet Arrow Functions sur GitHub

Références

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements