Fonctions JavaScript ES6: les bonnes parties

ES6 offre de nouvelles fonctionnalités intéressantes qui rendent la programmation en JavaScript beaucoup plus flexible. Parlons de certains d'entre eux - en particulier, les paramètres par défaut, les paramètres de repos et les fonctions fléchées.

Astuce amusante : vous pouvez copier et coller n'importe lequel de ces exemples / code dans Babel REPLet vous pouvez voir comment le code ES6 se transforme en ES5.

Valeurs des paramètres par défaut

Les fonctions JavaScript ont une fonctionnalité unique qui vous permet de passer n'importe quel nombre de paramètres pendant l'appel de fonction (paramètres réels) quel que soit le nombre de paramètres présents dans la définition de fonction (paramètres formels). Vous devez donc inclure des paramètres par défaut au cas où quelqu'un oublierait de passer l'un des paramètres.

Comment les paramètres par défaut seraient implémentés dans ES5

Ce qui précède semble bien lorsque nous l'exécutons. number2n'a pas été passé et nous l'avons vérifié en utilisant l' ||opérateur ' ' pour renvoyer le deuxième opérande si le premier est faux. Ainsi, «10» a été attribué comme valeur par défaut car il number2n'est pas défini.

Il y a juste un problème cependant. Que faire si quelqu'un passe «0» comme deuxième argument? ⚠

L'approche ci-dessus échouerait car notre valeur par défaut «10» serait attribuée à la place de la valeur transmise, telle que «0». Pourquoi? Parce que «0» est évalué comme faux!

Améliorons le code ci-dessus, d'accord?

Agh! C'est trop de code. Pas cool du tout. Voyons comment ES6 le fait.

Paramètres par défaut dans ES6

function counts(number1 = 5, number2 = 10) { // do anything here}

number1et se number2voient attribuer des valeurs par défaut de «5» et «10» respectivement.

Eh bien oui, c'est à peu près tout. Court et doux. Aucun code supplémentaire pour vérifier un paramètre manquant. Cela rend le corps de la fonction agréable et court. ?

REMARQUE: lorsqu'une valeur de undefinedest transmise pour un paramètre avec l'argument par défaut, comme prévu, la valeur transmise n'est pas valide et la valeur de paramètre par défaut est affectée . Mais si nullest passé, il est considéré comme valide et le paramètre par défaut n'est pas utilisé et null est affecté à ce paramètre.

Une fonctionnalité intéressante des paramètres par défaut est que le paramètre par défaut ne doit pas nécessairement être une valeur primitive, et nous pouvons également exécuter une fonction pour récupérer la valeur du paramètre par défaut. Voici un exemple:

Les paramètres précédents peuvent également être des paramètres par défaut pour les paramètres qui les suivent comme ceci:

function multiply(first, second = first) { // do something here}

Mais l'inverse générera une erreur. Autrement dit, si le second paramètre est affecté comme valeur par défaut pour le premier paramètre, cela entraîne une erreur car le second paramètre n'est pas encore défini lors de son affectation au premier paramètre.

function add(first = second, second) { return first + second;}console.log(add(undefined, 1)); //throws an error

Paramètres de repos

Un paramètre de repos est simplement un paramètre nommé qui est précédé de trois points (…). Ce paramètre nommé devient un tableau qui contient le reste des paramètres (c'est-à-dire en dehors des paramètres nommés) passés lors de l'appel de fonction.

Gardez simplement à l'esprit qu'il ne peut y avoir qu'un seul paramètre de repos et que ce doit être le dernier paramètre. Nous ne pouvons pas avoir de paramètre nommé après un paramètre de repos.

Voici un exemple:

Comme vous pouvez le voir, nous avons utilisé le paramètre rest pour obtenir toutes les clés / propriétés à extraire de l'objet passé, qui est le premier paramètre.

La différence entre un paramètre rest et l '«objet arguments» est que ce dernier contient tous les paramètres réels passés lors de l'appel de fonction, tandis que le «paramètre rest» ne contient que les paramètres qui ne sont pas nommés paramètres et sont passés lors de l'appel de fonction.

Fonctions fléchées ➡

Les fonctions fléchées, ou «fonctions fléchées grasses», introduisent une nouvelle syntaxe pour définir des fonctions qui est très concise. Nous pouvons éviter de taper des mots-clés tels que function, returnet même des accolades { }et des parenthèses ().

Syntaxe

La syntaxe se décline en différentes saveurs, en fonction de notre utilisation. Toutes les variations ont une chose en commun , c'est-à-dire qu'elles commencent par les arguments , suivis de la flèche ( =>), suivie de la fonction b ody.

Les arguments et le corps peuvent prendre différentes formes. Voici l'exemple le plus basique:

let mirror = value => value;
// equivalent to:
let mirror = function(value) { return value;};

L'exemple ci-dessus prend un seul argument «valeur» (avant la flèche) et renvoie simplement cet argument ( => value;). Comme vous pouvez le voir , il n'y a que la valeur de retour, donc pas besoin de mot-clé de retour ou de bra ces bouclés pour envelopper le corps de la fonction.

Puisqu'il n'y a qu'un seul argument , il n'est pas non plus nécessaire de placer les parenthèses «()».

Voici un exemple avec plus d'un argument pour vous aider à comprendre ceci:

let add = (no1, no2) => no1 + no2;
// equivalent to:
let add = function(no1, no2) { return no1 + no2;};

S'il n'y a aucun argument, vous devez inclure des parenthèses vides comme ci-dessous:

let getMessage = () => 'Hello World';
// equivalent to:
let getMessage = function() { return 'Hello World';}

Pour un corps de fonction avec juste une instruction return, les accolades sont facultatives .

Pour un corps de fonction ayant plus qu'une simple instruction return, vous devez envelopper le corps entre accolades, tout comme les fonctions traditionnelles.

Voici une fonction de calcul simple avec deux opérations - ajouter et soustraire. Son corps doit être enveloppé d'accolades:

let calculate = (no1, no2, operation) => { let result; switch (operation) { case 'add': result = no1 + no2; break; case 'subtract': result = no1 - no2; break; } return result;};

Et si nous voulons une fonction qui renvoie simplement un objet? Le compilateur ne sait pas si les accolades sont de l'objet ( er}) ou des accolades du corps de la fonction.()=>{id: numb

La solution consiste à mettre l'objet entre parenthèses. Voici comment:

let getTempItem = number => ({ id: number});
// effectively equivalent to:
let getTempItem = function(number) { return { id: number };};

Let’s have a look at the final example. In this we’ll use filter function on a sample array of numbers to return all numbers greater than 5,000:

// with arrow functionlet result = sampleArray.filter(element => element > 5000);
// without arrow functionlet result = sampleArray.filter(function(element) { return element > 5000;});

We can see how much less code is necessary compared to the traditional functions.

A few things about arrow functions to keep in mind though:

  • They can’t be called with new, can’t be used as constructors (and therefore lack prototype as well)
  • Arrow functions have their own scope, but there’s no ‘this’ of their own.
  • No arguments object is available. You can use rest parameters however.

Since JavaScript treats functions as first-class, arrow functions make writing functional code like lambda expressions and currying much easier.

«Les fonctions fléchées étaient comme le carburant de la fusée pour l'explosion de la programmation fonctionnelle en JavaScript.» - Éric Elliott

Eh bien, voilà! Il est peut-être temps pour vous de commencer à utiliser ces fonctionnalités.

Les fonctionnalités ES6 comme celles-ci sont une bouffée d'air frais et les développeurs adorent les utiliser.

Voici le lien vers mon article précédent sur les déclarations de variables et le levage!

J'espère que cela vous motive à affronter l'ES6 si vous ne l'avez pas déjà fait!

Paix ✌️️