ECMASCRIPT6

Introduction à ES6:
ES6 est l’acronyme de ECMAScript 6, a été créé pour normaliser JavaScript, et
es6 est la 6e version d'ECMAScript, elle a été publiée en 2015 et est également
connue sous le nom d'ECMAScript 2015.
React utilise ES6, et vous devriez être familiarisé avec certaines des nouvelles
fonctionnalités qui sont très utilisables telles que :
● Fonctions fléchées
● Variables (let, const, var)
● Méthodes de tableau map()
● Déstructuration
● Opérateur de propagation
● Opérateur ternaire
● Modules

Les fonctions fléchées (Arrow Functions):
Les fonctions fléchées nous permettent d'écrire une syntaxe de fonction plus courte :
nomDeLaFonction = (arguments) => expression
Sans ES6
hello = function() {
return "Hello World!";
}
avec ES6
hello = ()=> {
return "Hello World!";
}

Les fonctions fléchées (Arrow Functions):
Exemple:

Les fonctions fléchées (Arrow Functions):
Exemple2:

Les fonctions fléchées (Arrow Functions):
Exercice:
Convertir la fonction suivante en JavaScript ES5 en une fonction fléchée en JavaScript ES6
:

Les fonctions fléchées (Arrow Functions):
Solution:

Les variables:
Avant ES, il n'y avait qu'une seule façon de définir vos variables : avec le mot-clé var. Si
vous ne les aviez pas définis, ils seraient affectés à l'objet global. Sauf si vous étiez en mode
strict, vous obtiendrez une erreur si vos variables n'étaient pas définies.
Maintenant, avec ES6, il existe trois façons de définir vos variables :
1. Var:
● Si vous l'utilisez var en dehors d'une fonction, elle appartient à la portée globale.
● Si vous utilisez var l'intérieur d'une fonction, il appartient à cette fonction.
● Si vous utilisez var l'intérieur d'un bloc, c'est-à-dire une boucle for, la variable est toujours disponible en dehors
de ce bloc.
2. Let :
● let à portée de bloc de var, et est limitée au bloc (ou à l'expression) où elle est définie.
● Si vous utilisez let à l'intérieur d'un bloc, c'est-à-dire une boucle for, la variable n'est disponible qu'à l'intérieur de
cette boucle.
3. Const:
● Il ne définit pas une valeur constante. Il définit une référence constante à une valeur.

Méthode de tableau map():
● Il existe de nombreuses méthodes de tableaux JavaScript, L'une des plus utiles dans
React est la méthode map().
● La méthode .map() permet d'exécuter une fonction sur chaque élément du tableau,
renvoyant un nouveau tableau comme résultat.
● Exemple1:
La méthode map() crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

Exemple2:
Nous avons déclaré un tableau products contenant des objets représentant des produits. Ensuite,
nous avons utilisé la méthode map pour créer un nouveau tableau productNames contenant les
noms de chaque produit.

Exercice:
1. Créez une fonction nommée "carrés" qui prend un tableau
de nombres comme argument.
2. Utilisez la méthode map pour parcourir le tableau de
nombres et renvoyer un nouveau tableau contenant les
carrés de chaque nombre.
3. Retournez le nouveau tableau contenant les carrés.