Ach te internety!
  • React
  • Angular
  • JS
  • CSS
  • html
  • WP
  • A11Y
  • dev.
  • tools
  • off-topic
  • O mnie
Home  /  JS  /  Pipeline Operator

Pipeline Operator

Styczeń 15, 2018 JS

Znacie taką javascriptową wisienkę jak pipeline operator? Ja sama wpadłam na tę konstrukcję całkiem niedawno! Jeszcze tydzień temu myślałam, że szczytem kunsztu designerskiego w kodzie JS są funkcje strzałki. A tymczasem patrzę i widzę takie coś (źródło):

const square = (n) => n * n;
const increment = (n) => n + 1;

// without pipeline operator
square(increment(square(2))); // 25

// with pipeline operator
2 |> square |> increment |> square; // 25

Wow! Buzia sama się uśmiecha na ten widok! Nie wiem jak Wy sądzicie, ale na moje taka konstrukcja niesamowicie przyspieszy kodowanie takich zagnieżdżonych funkcji.

A właśnie. Zagnieżdżone funkcje. One mają swoją nazwę w JS, mianowicie pipe functions. Więcej o nich przeczytacie np. TUTAJ.

Warto wspomnieć, że ten operator to wcale nie jest świeża sprawa. Od dawna znany jest w innych językach programowania. Również od lat próbuje się go przemycić do Javascriptu. Miał wejść do ES7, a tu 2 wiosny minęły i nic. Wydaje się jednak, że już niedługo nasz pipeline operator wyjdzie z javascriptowych podziemi. Na razie leży w drafcie (szczegółu TU i TU). Mimo to Babel oferuje plugin, dzięki któremu możecie skorzystać z owego dobrodziejstwa już dziś.

Jeden z moich najulubieńszych javascriptowych youtuberów nagrał świetny filmik o operatorze pipeline oraz generalnie o programowaniu funkcyjnym. Gorąco polecam Wam na niego zerknąć.


Co sądzicie o tej konstrukcji? Bajer czy błogosławieństwo? Piszcie w komentarzach!

 

Tagi: functional programming, pipeline operator, tc39 proposal
Poprzedni artykuł
Następny artykuł

Może Cię zainteresować...

  • CASE STUDY: strona FAQ

    4 stycznia 2019
  • CASE STUDY: kolejność zdarzeń w JS

    19 grudnia 2018
  • React – o mutacji stanu jeszcze raz. Aż do skutku.

    14 października 2018

Najnowsze wpisy

  • Semantyczne wersjonowanie – ściąga do pobrania
  • Czy znasz te możliwości Chrome DevTools?
  • Webstorm – 3 funkcjonalności, które musi znać każdy front-end developer!
  • Narzędzia do szukania narzędzi
  • Projekt Matka Programistka: Reaktywacja #3

Tagi

5-minut-js a11y AngularJS asynchroniczność BDD BEM box-decoration-break compile css dyrektywy es6 freebies html5 js jsfiddle kompilacja konwencje link matka programistka mobile ngRoute niezmiennosc plunkr podstawy-js post-link pre-link Progressive Web Apps PWA react routing rss sass scss Service Worker setState slice splice tc39 proposal TDD testowanie title ui.router wlasnosci wordpress zmiana nazwy zakładki

Podoba Ci się tutaj?