Оператор пайплайна JavaScript: Революція у функціональному програмуванні

Фото від Joan Gamell на Unsplash

Функціональне програмування набуває все більшої популярності в JavaScript, особливо через потребу в чистішому, більш зрозумілому та зручному для підтримки коді. В основі цього стилю програмування лежить принцип ланцюжка функцій для перетворення даних крок за кроком, процес, який традиційно спирався на вкладені виклики функцій або ланцюжки методів. І ось з'являється Оператор пайплайна JavaScript (|>)—пропозиція, яка має на меті зробити функціональне програмування в JavaScript більш інтуїтивно зрозумілим та легким для читання.

Ця стаття розгляне, що таке оператор пайплайна, його переваги, як він вписується в контекст функціонального програмування, а також практичні приклади його використання.

Що таке оператор пайплайна?

Оператор пайплайна — це новий синтаксичний елемент JavaScript (поточного етапу Stage 2 у процесі пропозицій TC39), який позначається символом |>.
Цей оператор дозволяє передавати результат однієї функції безпосередньо в іншу, усуваючи необхідність у глибоко вкладених функціях. Натхненний оператором пайпу (|) з командного рядка Unix, який передає виведення однієї команди до наступної, оператор пайплайна має на меті забезпечити подібний потік для функцій у JavaScript.

Основний синтаксис

За допомогою оператора пайплайна можна переписати вирази, які зазвичай вимагали б ланцюжків або вкладених функцій, у просту послідовність зліва направо:

value |> functionA |> functionB |> functionC

Тут value передається у functionA, результат functionA передається у functionB, і так далі, поки кінцевий результат не буде виведений через functionC.

Чому оператор пайплайна важливий

Оператор пайплайна має кілька переваг, особливо для розробників, які впроваджують функціональне програмування в JavaScript:

1. Покращена читаність: Завдяки усуненню вкладених викликів, код стає простішим для розуміння, що полегшує виконання складних трансформацій.
   2.
2. Покращена композиційність: Функції можна комбінувати в більш лінійному, зручному для людини порядку, що відповідає тому, як ми мислимо про трансформації даних.
3. Знижене когнітивне навантаження: Завдяки оператору пайплайна розробники не повинні "розпаковувати" вкладені функції, що робить код легшим для розуміння.
   4.
4. Відповідність принципам функціонального програмування: Оператор пайплайна є природним доповненням до шаблонів функціонального програмування, дозволяючи передавати дані через чисті функції більш інтуїтивно.

Використання оператора пайплайна: до і після

Давайте подивимося на кілька прикладів, щоб зрозуміти, як оператор пайплайна покращує читаність і спрощує код.

Приклад 1: Без оператора пайплайна

Розглянемо наступний приклад, де ми хочемо взяти рядок, перетворити його на малі літери, видалити пробіли та зробити першу літеру великою:

const capitalizeFirstLetter = (str) =>  
 str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();  

const processString = (str) =>  
 capitalizeFirstLetter(str.trim().toLowerCase());  
console.log(processString(" Hello World "));

Хоча це і зрозуміло, з ростом складності функцій вкладені виклики можуть ставати важкими для управління і розуміння.

Приклад 1: З оператором пайплайна

Використовуючи оператор пайплайна, ми можемо виразити ту ж саму функціональність з більш природним потоком:

const result = " Hello World "  
 |> (str) => str.trim()  
 |> (str) => str.toLowerCase()  
 |> capitalizeFirstLetter;  

console.log(result);

Код став більш читабельним, рухаючись зліва направо, що дозволяє простежити етапи трансформації даних з мінімальними зусиллями.
Кожен крок стає незалежною, модульною трансформацією, яку легко зрозуміти окремо.

Розширене використання пайплайна з функціями та бібліотеками

Оператор пайплайна є особливо потужним, коли його комбінувати з бібліотеками, що підтримують функціональне програмування, такими як lodash або Ramda.
Давайте розглянемо, як оператор пайплайна може спростити такий код.

Приклад 2: Обробка даних з Lodash

Розглянемо обробку списку чисел, де ми хочемо відфільтрувати непарні числа, піднести кожне число до квадрату та знайти їхню суму:

Без оператора пайплайна

import _ from "lodash";  

const result = _.sum(  
 _.map(  
 _.filter([1, 2, 3, 4, 5], (n) => n % 2 === 0),  
 (n) => n * n  
 )  
);  
console.log(result);

Цей підхід з вкладеними викликами працює, але він громіздкий і швидко стає важким для читання у складних пайплайнах.

З оператором пайплайна

import _ from "lodash";  

const result = [1, 2, 3, 4, 5]  
 |> (_data) => _.filter(_data, (n) => n % 2 === 0)  
 |> (_data) => _.map(_data, (n) => n * n)  
 |> (_data) => _.sum(_data);  
console.log(result);

Тут кожен крок трансформації чітко виражений, і читач може легко простежити потік даних на кожному етапі без занурення в вкладені структури.

Обробка більш складних трансформацій з оператором пайплайна

Припустимо, ви працюєте з даними користувачів і потрібно отримати користувачів з API, відфільтрувати їх за віком, відсортувати за ім'ям і відобразити тільки їхні імена.

Без оператора пайплайна

fetch("https://api.example.com/users")  
 .then((response) => response.json())  
 .then((data) => data.filter((user) => user.age >= 18))  
 .then((filteredUsers) => filteredUsers.sort((a, b) => a.name.localeCompare(b.name)))  
 .then((sortedUsers) => sortedUsers.map((user) => user.name))  
 .then((names) => console.log(names));

З оператором пайплайна

const fetchUsers = () => fetch("https://api.example.com/users").then(res => res.json());  

fetchUsers()  
 |> (data) => data.filter((user) => user.age >= 18)  
 |> (filteredUsers) => filteredUsers.sort((a, b) => a.name.localeCompare(b.name))  
 |> (sortedUsers) => sortedUsers.map((user) => user.name)  
 |> (names) => console.log(names);

Цей підхід на основі пайплайна є більш зрозумілим, дозволяючи зосередитись на кроках трансформації без необхідності працювати з глибоко вкладеним кодом.
Кожна функція є модульною та може бути змінена незалежно, що додатково сприяє практикам чистого коду.

Додаткові можливості оператора пайплайна

Оператор пайплайна JavaScript має потенціал підтримувати додаткові синтаксичні можливості, що підвищують гнучкість.
Два значущі підходи, які наразі розглядаються — це чисті пайпи та пайпи стилю теми.

Чисті пайпи

Чисті пайпи дозволяють передавати кожне значення як окремий аргумент без упаковки в стрілкову функцію:

" Hello World "   
 |> String.prototype.trim  
 |> String.prototype.toLowerCase  
 |> capitalizeFirstLetter;

Цей синтаксис дозволяє безпосередньо викликати методи існуючих прототипів, зменшуючи кількість шаблонного коду та покращуючи зручність читання для простих перетворень.

Пайпи стилю теми

У пайпах стилю теми заповнювач, такий як #, представляє вхідне значення на кожному етапі, пропонуючи додаткову гнучкість для складніших перетворень:

" Hello World "  
 |> (str) => str.trim()  
 |> (str) => str.toLowerCase()  
 |> (str) => str.charAt(0).toUpperCase() + str.slice(1);

Прийняття функціонального програмування з оператором пайплайна

Оператор пайплайна особливо підходить для функціональних патернів програмування (functional programming), які акцентують увагу на незмінності (immutability), трансформації даних та чистих функціях (pure functions).
У функціональному програмуванні дані проходять через серію перетворень, і оператор пайплайна надає природний синтаксис для підтримки цього процесу.

Функціональні бібліотеки та парадигми часто просувають код, що є модульним, тестованим і повторно використовуваним — якості, які підвищуються завдяки зручності читання та композиційності, яку пропонує оператор пайплайна. Комбінування оператора пайплайна з бібліотеками, такими як RxJS, Lodash чи Ramda, які є за своєю суттю функціональними, дозволяє розробникам JavaScript використовувати ці патерни більш інтуїтивно.

Висновок

Оператор пайплайна є значним кроком до того, щоб зробити JavaScript більш сумісним з парадигмами функціонального програмування. Дозволяючи функціям ланцюжитися в чіткий потік зліва направо, цей оператор може зробити складні трансформації даних більш доступними, зрозумілими та підтримуваними.
Хоча це все ще пропозиція, її потенціал для покращення якості та зрозумілості коду очевидний, і розробники JavaScript з нетерпінням слідкують за її розвитком.

Підготовлюючись до того, що оператор пайплайна стане частиною стандарту JavaScript, варто подумати, як функціональні патерни програмування можуть покращити вашу кодову базу, зробивши її більш модульною та адаптивною. Прийнявши оператор пайплайна, ви будете готові повністю використати еволюційні можливості JavaScript для чистішого, більш зрозумілого та легшого для підтримки коду.

Перекладено з: The JavaScript Pipeline Operator: Revolutionizing Functional Programming