Les principales nouveautés de JavaScript ES6

Dans ce tutoriel nous allons découvrir les nouvelles fonctionnalités de l’ES6 avec des exemples. ECMAScript 6, également appelé ECMAScript 2015, est la dernière version du standard ECMAScript. ES6 est une mise à jour importante du langage, et la première mise à jour du langage depuis que ES5 a été normalisé en 2009. L’implémentation de ces fonctionnalités dans les principaux moteurs JavaScript est en cours.
 
 

Paramètres par défaut

C’est une pratique assez courante de définir des paramètres par défaut pour remplir automatiquement les valeurs clés d’une fonction, avant l’ES6, l’option n’était pas disponible en JavaScript. Au lieu de cela, vous deviez définir vos propres valeurs par défaut avec une sorte de hack dans la fonction elle-même. Avec ES6, vous avez la possibilité d’ajouter des paramètres par défaut comme vous le feriez dans la plupart des autres langages.
 
Avant ES6:

function add(a, b){
    var x = a || 2;
    var y = b || 2;

    return x+y;
}

Après ES6:

function add(a=1, b=1){
     return x+y;
}
10 Bonnes pratiques de codage en Javascript10 Bonnes pratiques de codage en JavascriptJavaScript fait presque partie de toutes les pages Web. un code JavaScript mal écrit peut rendre difficile la garantie d’une expérience cohérente pour les utilisateurs.…Lire plus
Chaînes de caractères multilignes

Dans ES6, JavaScript introduit une nouvelle façon de créer des chaînes de caractères en utilisant les littéraux de modèle où vous pouvez également créer des chaînes multilignes.

Pour créer une chaîne multiligne, on utilise l’accent grave `` au lieu des guillemets simples ou doubles.
 
Avant ES6:

var str = "Lorem ipsum dolor sit amet\n"
+ "consectetur adipiscing elit,\n"
+ "In dictum, quam eget tristique facilisis."

Après ES6:

var str = `Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
In dictum, quam eget tristique facilisis.`

 
 

Littéraux de gabarits (template literals)

Les littéraux de gabarits sont une autre fonctionnalité courante dans d’autres langages qui vous permet d’injecter des variables directement dans des chaînes. Avant ES6, vous deviez vous fier à une concaténation de chaînes pour obtenir un effet similaire.
 
Avant ES6:

var str = "Hi " + firstname + " " + lastname +", Welcome to WayToLearnX!";

Après ES6:

var str = "Hi ${firstname} ${lastname}, Welcome to WayToLearnX!";
Fonctions pures en JavaScriptFonctions pures en JavaScriptDans ce tutoriel, nous allons découvrir un principe important dans la programmation fonctionnelles en Javascript, « des fonctions pures ». Dans ce tutoriel, vous allez apprendre ce…Lire plus
Const et let

Les constantes ont une portée de bloc (disponible uniquement en locale). Vous ne pouvez pas réaffecter la valeur d’une variable const, mais les propriétés peuvent être changées, par exemple :

const c = {
   name : "Alex Babtise"
}
// ceci n'est pas autorisé
c = {  
   name : "Yohan Doglas"
}
// ceci est autorisé
c.name = "Yohan Doglas"

Let a également une portée de bloc mais vous pouvez réaffecter la valeur d’une variable let et vous pouvez également changer leur valeur.
 
 

Fonctions fléchées

Les fonctions fléchées sont un moyen plus rapide et plus simple d’écrire certaines des fonctions habituelles.

Par exemple pour une fonction anonyme:
 
Avant ES6:

function(x){ 
     console.log(x)
     return 1
}

Après ES6:

(x) => { 
     console.log(x)
     return 1
}
Qu'est-ce qu'une fermeture en JavaScript ?Qu’est-ce qu’une fermeture en JavaScript ?Les fermetures (Closure) permettent aux programmeurs JavaScript d’écrire un code lisible. Nous utilisons fréquemment des fermetures en JavaScript et, quelle que soit votre expérience en…Lire plus
Classe

Les classes en JavaScript ne sont que des « fonctions spéciales ». Il n’introduit pas un modèle d’héritage. Une Classe donne à votre code une structure agréable. Voir l’exemple ci-dessous :

class Person{
   constructor(name, gender, age){ 
        this.name = name
        this.gender = gender 
        this.age = age
   }
}
const p = new Person("Yohan Doglas", "Male", 22)
console.log(p.name) // Yohan Doglas

Le mot-clé « Extends » est utilisé pour l’héritage.

class Employee extends Person {
     ....
}
Fonctions Callback en JavaScriptFonctions Callback en JavaScriptLes fonctions callbacks sont une excellentes façon de gérer l’exécution d’une fonction après que l’exécution d’une autre fonction ait été complété. Si nous voulons exécuter…Lire plus

Laisser un commentaire

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