Vous voulez vous mettre à jour sur les dernières pratiques JS ? Dans cet article, découvrez les principales nouveautés apportées par la version majeure ES6.
Nouveaux mot-clés
Let
Le mot-clé let permet de déclarer une variable limitée à la portée du bloc, donc elle n'existe que dans le bloc ou elle a été déclarée contrairement à une variable déclarée avec le mot-clé var.
Exemple
1
2
3
4
5
6
7
8
9
10
function swop(x, y) {
if (x != y) {
var test = x;
let temp = x;
x = y;
y = temp;
}
console.log(typeof(test)); // number
console.log(typeof(temp)); // undefined
}
Exemple d'utilisation de let
Le console.log() est en dehors du bloc de la fonction. On remarque que la variable test déclarée avec var existe en dehors du bloc de la fonction, ce qui n’est pas le cas de temp.
Pourquoi il ne faut plus utiliser le mot-clé var
Il y a quelques problèmes avec le mot-clé var. Par exemple :
- la variable continue d'exister en dehors du bloc.
- la référence de la variable existe dès l'entrée dans la fonction donc avant la ligne de déclaration !
Les développeurs sont habitués à des scopes qui s'arrêtent au niveau du bloc d'instruction dans lequel ils sont définis.
Afin d'éviter des effets de bords difficiles à déceler dans votre code, il est donc vivement déconseillé d'utiliser var.
Const
Si vous utilisez une variable qui n'est jamais réassignée, préférez utiliser le mot-clé const.
Une constante ne peut pas être réassignée. Déclarer une variable avec const vous permet de limiter les risques d'erreur par réassignation, et améliore vos performances.
Par défaut, à moins d'avoir besoin spécifiquement d'une variable réassignable (comme un compteur par exemple), vous devriez utiliser const au lieu de let.
Exemple
1
const ENV = "dev";
Exemple d'utilisation de const
Template literal (ou template string)
Interpolation
Les templates literals à la différence d’une chaîne de caractère classique, utilisent les back-quotes (`) à la place des simples ou double quotes pour être déclarés.
Le string literal vous permet d’évaluer du JavaScript à l’intérieur de la chaîne : c’est ce qu’on appelle une interpolation.
Exemple
1
2
3
const name = 'Pierre';
const age = 28;
const result = `Je m’appelle ${name} et j'ai ${age} ans.`;
Exemple d'utilisation de template literal
Pour interpoler la variable, vous devez l'entourer d’accolades précédées du symbole dollar.
L’interpolation n’est pas réservé qu’aux variables, elle peut contenir n'importe quel code JavaScript : des opérations, des appels de fonctions et autres.
1
2
3
const name = 'Pierre';
let age = 28;
const result = `Je m’appelle ${name.toUpperCase()} et j'aurai ${++age} ans dans un an.`;
Exemple d'interpolation complexe
Chaîne de caractères multi-ligne
Avec ES6, vous n'avez plus besoin de concaténer des chaînes avec un saut de ligne.
Les template literals résolvent le problème avec la prise en charge de chaîne multiligne.
Exemple
1
2
3
4
5
6
7
8
9
10
11
12
13
const modele = `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>`
Template literal multiligne
Paramètres par défaut
Avec ES6, vous pouvez utiliser des paramètres par défaut dans vos fonctions :
1
2
3
let sum = function (x = 0, y = 0) {
return x + y;
};
Paramètres par défaut
Cela peut vous éviter des erreurs ou d'effectuer des tonnes de gestions d'erreur pour les cas ou vous recevez des paramètres sans valeur. Du genre if (x === undefined) { ... }
Boucle for-of
Vous pouvez désormais itérer sur un tableau, un objet ou tout autre objet itérable avec la notation simplifiée for .. of.
Exemple
1
2
3
4
5
let fruits = [ "banana", "apple", "strawberry", "orange" ];
for (const fruit of fruits) {
console.log(fruit);
}
Boucle for .. of
Évolution des objets littéraux
Depuis ES6, vous pouvez utiliser une écriture plus légère concernant la déclaration de méthode pour les objets littéraux.
Plus besoin d’écrire le mot-clé function.
Exemple
1
2
3
4
5
6
7
8
let literalObject = {
init() {
this.display("Hello !") ;
},
display(message) {
console.log(message);
}
};
Méthode dans un objet littéral
Les classes
Jusqu'à ES5, le mot-clé class n'existe pas. En réalité, les classes n'existent pas à proprement parler en JavaScript. Une classe JavaScript est simplement une utilisation détournée des fonctions.
Notation simplifiée
Voici un exemple de classe codé en JavaScript version ES5 :
Classe ES5
Pas très lisible, mais c'est ainsi que fonctionne réellement une classe JS.
Pour contrer le manque de lisibilité, la version ES6 a fait apparaitre le keyword class. Ne vous méprenez pas, il s'agit toujours d'une fonction en arrière-plan ! C'est simplement un confort syntaxique.
Voici un exemple de classe ES6 :
Classe ES6
Comme pour un objet littéral vous n'avez plus besoin d’écrire le mot-clé function pour déclarer une méthode.
Vous avez également accès au mot clé constructor.
Cependant, notez que l’encapsulation des données n’est pas effective ce qui fait que vos attributs et méthodes sont accessibles depuis l'extérieur de la classe.
Héritage
Avec ES6 vous pouvez désormais utiliser l’héritage simple, en utilisant le mot-clé extends sur la classe qui doit hériter.
Exemple
1
2
3
4
5
6
class Developer extends Person {
constructor(name, age, skills) {
super(name, age);
this.skills = skills;
}
}
Héritage ES6
Remarquez aussi que vous pouvez appeler une méthode parente avec le mot-clé super.
Arrow function
Les fonctions fléchées ou arrow functions permettent d’avoir une syntaxe plus courte que les fonctions classiques.
Elles sont anonymes et ne sont pas faites pour être utilisées en tant que méthode.
La plupart du temps, vous devriez les utiliser pour passer une fonction en tant que paramètre.
Exemple
ES5 :
1
2
3
hello = function() {
return 'Hello World!';
}
Fonction anonyme ES5
ES6 :
1
2
3
hello = () => {
return 'Hello World!';
}
Fonction fléchée ES6
Si votre fonction ne fait rien de plus qu'une instruction return, vous pouvez utiliser la notation simplifiée :
1
hello = () => 'Hello World!';
Fonction fléchée simplifiée
Conclusion
Vous venez de découvrir les principales nouveautés d’ES6 qui vous permettront de créer des applications web plus facilement. Si vous voulez savoir si un navigateur prend en charge une fonctionnalité d’ES6 consulter cette page .
J'espère que vous avez apprécié cet article. Faites-nous signe dans les commentaires si vous pensez qu'il y a d'autres évolutions importantes à ajouter !
Sources
- Wanadev : Introduction à ECMAScript 6 : Le JavaScript de demain
- W3school : Javascript ES6
- Wikipedia : ECMAScript
Auteur
