ECMAScript 6

Nuggets est entièrement réécrit avec ECMAScript 6.

Également connu sous le nom d'ES6 ou ECMAScript 2015, ES6 représente une étape significative dans l'évolution du langage de programmation JavaScript. Adoptée en 2015, cette version marque une mise à jour majeure du standard ECMAScript, le document qui spécifie le langage JavaScript. ES6 a introduit de nouvelles fonctionnalités, des améliorations de la syntaxe, et des paradigmes de programmation modernes pour rendre le développement en JavaScript plus efficace, lisible et puissant.

Avant l'arrivée d'ES6, les développeurs JavaScript devaient souvent recourir à des bibliothèques tierces pour bénéficier de fonctionnalités avancées. ES6 a changé la donne en intégrant nativement de nombreuses fonctionnalités qui améliorent la productivité du développeur et permettent de créer un code plus propre et modulaire.

Cette version a apporté des concepts tels que les fonctions fléchées, les classes, les modules, les destructurations, les paramètres par défaut, les fonctions génératrices, et bien d'autres, offrant aux développeurs des outils puissants pour structurer leurs applications de manière plus robuste et élégante. L'introduction d'ES6 a été accueillie favorablement par la communauté des développeurs, stimulant l'adoption de pratiques de codage modernes et favorisant une meilleure maintenabilité des projets JavaScript.

Fonctions fléchées

Les fonctions fléchées sont une fonctionnalité introduite en ECMAScript 6 (ES6), la sixième édition de la norme ECMAScript qui définit le langage JavaScript.

Voici quelques avantages à utiliser les fonctions fléchées :

Syntaxe concise

Les fonctions fléchées offrent une syntaxe concise, ce qui permet de réduire la quantité de code nécessaire. Cela est particulièrement utile pour les fonctions simples.

JavaScript

// Fonction classique
function addition(a, b) {
    return a + b;
}
// Fonction fléchée
const addition = (a, b) => a + b;

Liaison du contexte this automatique

Les fonctions fléchées capturent le contexte dans lequel elles sont créées, éliminant ainsi le besoin de lier explicitement le mot-clé this. Cela peut résoudre des problèmes courants liés à la perte de contexte dans les fonctions classiques.

JavaScript

// Fonction classique avec liaison explicite du "this"
function exemple() {
    this.valeur = 0;

    setInterval(function() {
        this.valeur++;
        console.log(this.valeur);
    }.bind(this), 1000);
}

// Fonction fléchée avec liaison automatique du "this"
function exemple() {
    this.valeur = 0;

    setInterval(() => {
        this.valeur++;
        console.log(this.valeur);
    }, 1000);
}

Pas de mot-clé arguments

Les fonctions fléchées n'ont pas leur propre objet arguments. Cela peut simplifier le code et éviter des comportements inattendus, car elles héritent des arguments de la fonction englobante.

JavaScript

// Fonction classique avec "arguments"
function exemple() {
    console.log(arguments);
}

// Fonction fléchée sans "arguments"
const exemple = () => {
    // Error: "arguments" is not defined
    console.log(arguments);
}

Idéales pour les fonctions courtes et simples

En raison de leur syntaxe concise, les fonctions fléchées sont particulièrement adaptées pour les fonctions courtes et simples, ce qui améliore la lisibilité du code.

JavaScript

// Fonction classique
const carre = function(x) {
    return x * x;
}

// Fonction fléchée
const carre = x => x * x;

Meilleure intégration avec les fonctions de rappel

Les fonctions fléchées sont souvent plus claires et plus élégantes lorsqu'elles sont utilisées comme fonctions de rappel, notamment dans des opérations telles que map, filter et reduce.

JavaScript

const nombres = [1, 2, 3, 4];

// Utilisation de fonction fléchée avec "map"
const carres = nombres.map(x => x * x);

En résumé, les fonctions fléchées offrent une syntaxe concise, résolvent des problèmes liés au contexte (this), simplifient la gestion des arguments, conviennent aux fonctions courtes et s'intègrent bien avec les fonctions de rappel, contribuant ainsi à un code JavaScript plus propre et plus lisible

Inversion des arguments comparés

Systématiquement, Nuggets permute les arguments de gauche à droite lorsqu'ils sont comparés dans des expressions conditionnelles.

JavaScript

if ( 'myValue'==myArgument ) { /*  instruction */ }

Inverser les arguments dans une expression conditionnelle permet de simuler un typage fort et évite bien des bugs dus à l'oubli d'un signe =.

Dans cet exemple, on tente d'effectuer la comparaison avec un seul signe = ; ce n'est plus une comparaison mais une attribution.

JavaScript

if ( myArgument='myValue' ) { /*  instruction toujours exécutée puisque toujours VRAI */ }

La variable myArgument stocke la valeur myValue et le code ne relève aucune erreur. Pourtant, l'ensemble du code ne peut pas fonctionner correctement puisque l'action de stocker retourne Vrai à la condition ; l'instruction est exécutée quel que soit myArgument.

En permutant la variable à droite avec un seul signe =, le code retourne une erreur : MyArgument est une variable dont la valeur peut être changée, mais il est impossible de changer la valeur de la chaîne de caractères elle-même. C'est aussi vrai pour les nombres mais aussi les mots réservés : null, undefined, true, false et NaN.

JavaScript

if ( null=myArgument ) { /*  retourne une erreur */ }
if ( true=myArgument ) { /*  retourne une erreur */ }
if ( 123=myArgument ) { /*  retourne une erreur */ }
// etc.

Opérateurs stricts

Les opérateurs == et != effectuent une comparaison sans vérifier le type des valeurs.

Nuggets les délaisse et utilise plutôt les opérateurs === et !==. La comparaison est effectuée aussi bien sur les valeurs que sur le type des valeurs.

Opérateur ternaire ?

L'opérateur ternaire offre une syntaxe concise pour exprimer des conditions en une seule ligne de code. Par exemple : condition ? expressionSiVraie : expressionSiFausse.

Il évalue la condition et renvoie la première expression si la condition est vraie, sinon il renvoie la deuxième expression.

Il est souvent utilisé comme une alternative compacte aux structures if-else pour des opérations simples. Son utilisation permet d'améliorer la lisibilité du code en réduisant la quantité de texte, ce qui est particulièrement utile lorsque la condition et les expressions associées sont succinctes.

Les opérateurs ternaires peuvent être une alternative élégante pour éviter l'imbrication excessive de structures if-else lorsqu'il s'agit de conditions simples, contribuant ainsi à un code plus clair et plus facile à comprendre.