Javascript futur : opérateurs de pipeline Javascript

Exploitants de pipelines sont une fonctionnalité à venir de Javascript qui nous donne un autre moyen de transmettre des valeurs à travers une série de transformations. Cela donne plus de contexte à ce que les développeurs essayaient de réaliser lorsqu’ils ont écrit leur code et nous permet de faire des choses intéressantes pour démarrer. Ici, nous allons jeter un rapide coup d’œil aux exploitants de pipelines, à leur fonctionnement et à la manière dont vous pouvez les utiliser aujourd’hui.

Opérateurs de pipeline Javascript : assistance

Actuellement, aucune implémentation ECMAScript côté navigateur ou côté serveur (comme Node.JS) ne prend en charge les opérateurs de pipeline. Vous pouvez cependant les faire fonctionner en utilisant Babel 7.15. Vous pouvez en savoir plus sur l’installation de Babel ici, mais il suffit de dire que cela vous permettra d’ajouter des opérateurs de pipeline dans votre code.

Opérateurs de pipeline Javascript : comment fonctionnent-ils ?

Les opérateurs de pipeline sont simplement un autre moyen de manipuler les valeurs en Javascript. L’exploitant du pipeline est |>. Supposons que nous ayons 3 fonctions mathématiques qui ajoutent des nombres à une valeur d’entrée :

// Adds 1 to a number
let addOne = function(x) {
    return x + 1;
}

// Multiplies a number by 2
let multiplyByTwo = function(x) {
    return x * 2;
}

// Divides a number by 6
let divideBySix = function(x) {
    return x / 6;
}

Si nous voulions appliquer toutes ces fonctions à un nombre que nous avons, nous pourrions faire quelque chose comme ceci aujourd’hui :

let number = 6;
let calculate = addOne(multiplyByTwo(divideBySix(number)));

console.log(calculate); // Returns 3.

Bien que cela fonctionne, lorsque vous utilisez plusieurs fonctions, cela peut devenir assez compliqué – et peut souvent prendre plusieurs lignes. En tant que tel, nous pouvons simplifier ce qui précède avec un opérateur de pipeline comme celui-ci:

let number = 6;
let calculate = number |> divideBySix(%) |> multiplyByTwo(%) |> addOne(%);

console.log(calculate); // Returns 3.

Comme vous pouvez le voir, cela simplifie le traitement des nombres et des valeurs afin que nous puissions clairement voir ce qui se passe. Décomposons ce que nous avons fait :

• D’abord, nous utilisons le nombre et le passons avec un opérateur pipe à divideBySix(). Nous utilisons % pour représenter la valeur d’avant l’opérateur du tuyau, dans ce cas, 6 qui est dans notre variable numérique.
• Ensuite, nous passons le numéro de divideBySix() à multiplyByTwo(). Encore une fois, nous utilisons % pour représenter le résultat de l’opération précédente, c’est-à-dire la valeur du divideBySix() fonction.
• Enfin, on recommence et addOne() à notre valeur. Le résultat est le même, donc nous obtenons toujours 3 à la fin.

Simplifier le mappage d’objets avec les opérateurs de pipeline

Évidemment, l’exemple ci-dessus est une application très simple, mais nous pouvons également utiliser des opérateurs de pipeline pour faire des choses plus cool, comme les tableaux de cartes d’une manière plus cohérente. Par exemple, ce qui suit prend un objet de requêtes URL et les fusionne dans une chaîne de texte qui peut être ajoutée à la fin d’une URL :

let URLParams = {
    'x' : '10245',
    'linkId': 'eojff-efekv-ef0kw',
    'author' : 'john-smith',
    'featured' : false
}

let getURLQuery = Object.keys(URLParams).map((key) => `${key}=${URLParams[key]}`) |> %.join('&') |> `?${%}`;

// Returns ?x=10245&linkId=eojff-efekv-ef0kw&author=john-smith&featured=false
console.log(getURLQuery);

Conclusion sur les opérateurs de pipeline Javascript

Étant donné que les opérateurs de canalisation ne sont pas largement pris en charge, vous ne pouvez utiliser cette fonctionnalité qu’avec Babel installé. Cela dit, les opérateurs de pipeline ajoutent beaucoup de contexte à votre code et simplifient les opérations afin que vous puissiez les développer plus tard. En tant que tel, cela peut valoir la peine d’essayer Babel pour l’intégrer dans votre base de code. Si vous souhaitez lire la spécification complète de l’opérateur de pipeline, cliquez ici.