davidbgk
/
larlet-fr-david-cache

<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>The Two Pillars of JavaScript - Pt 2: Functional Programming (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  The Two Pillars of JavaScript - Pt 2: Functional Programming (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4">Source originale du contenu</a></h3>
    <p name="0c25" id="0c25" class="graf--p graf--first">In the very beginnings of the computing revolution, decades before the invention of the microprocessor, a man named <strong class="markup--strong markup--p-strong">Alonzo Church</strong> did groundbreaking work in theoretical computer science. You may have heard of his student and collaborator, <strong class="markup--strong markup--p-strong">Alan Turing</strong>. Together, they created a theory of computable functions called the <strong class="markup--strong markup--p-strong">Church-Turing Thesis</strong>, which described the nature of computable functions.</p>

<p name="8024" id="8024" class="graf--p">Two foundational models of computation emerged from that work. The famous <strong class="markup--strong markup--p-strong">turing machine</strong>, and <strong class="markup--strong markup--p-strong">lambda calculus</strong>.</p>

<p name="d6ac" id="d6ac" class="graf--p">Today, the turing machine is frequently cited as the baseline of requirements for a modern programming language. A language or processor / VM instruction set is said to be <strong class="markup--strong markup--p-strong">turing complete</strong> if it can be used to simulate a universal turing machine. The first famous example of a turing-complete system was lambda calculus, described by Alonzo Church in 1936.</p>

<p name="35bf" id="35bf" class="graf--p">Lambda calculus went on to inspire one of the first high-level programming languages, and the second-oldest high-level language in common use today: Lisp.</p>

<p name="4f4d" id="4f4d" class="graf--p">Lisp was (and remains) extremely influential and popular in academic circles, but it has also been very popular in productivity applications, particularly those that work on <strong class="markup--strong markup--p-strong">continuous data</strong> such as scalable vector graphics. Lisp was originally specified in 1958, and it’s still often embedded in many complex applications. Notably, almost all popular CAD applications support AutoLISP, a dialect of Lisp used in AutoCAD, which (including its many specialized derivatives) is still the most widely used CAD application in the world.</p>

<blockquote name="44c4" id="44c4" class="graf--blockquote">Continuous data: Data that must be measured rather than counted, and could take any value within a range. Contrast with discrete data, which can be counted and accurately indexed. All values come from a specific set of valid values. For instance, the frequencies that can be produced by a violin must be represented by continuous data, because the string can be stopped at any point along the fingerboard. The frequencies that can be produced by a piano are discrete, because each string is tuned to a specific pitch and can’t be stopped at different points depending on the performer’s will. There are usually 88 notes on a piano keyboard. It’s impossible to count the number of notes that could be produced by a violin player, and violin players frequently take advantage of that by sliding the pitch up or down between different notes.</blockquote>

<p name="18ed" id="18ed" class="graf--p">Lisp and its derivatives birthed an entire family of <strong class="markup--strong markup--p-strong">functional programming languages</strong> which includes Curry, Haskell, Erlang, Clojure, ML, OCaml, etc…</p>

<p name="bacb" id="bacb" class="graf--p">As popular as many of those languages are, JavaScript has exposed a whole new generation of programmers to functional programming concepts.</p>

<p name="c0cc" id="c0cc" class="graf--p">Functional programming is a natural fit for JavaScript, because JavaScript offers a few important features: First-class functions, closures, and simple lambda syntax.</p>

<p name="f937" id="f937" class="graf--p">JavaScript makes it easy to assign functions to variables, pass them into other functions, return functions from other functions, compose functions, and so on. JavaScript also offers immutable values for primitive types, and features that make it easy to return new objects and arrays rather than manipulate properties of those that are passed in as arguments.</p>

<p name="7c23" id="7c23" class="graf--p"><em class="markup--em markup--p-em">Why is all that important?</em></p>

<p name="a97b" id="a97b" class="graf--p">Functional programming glossaries contain a large number of large words, but at its core, the essence of FP is really very simple; programs are built mostly with a handful of very small, very reusable, very predictable <strong class="markup--strong markup--p-strong">pure functions.</strong></p>

<p name="3a35" id="3a35" class="graf--p">Pure functions have a few properties that make them extremely reusable and extremely useful for a variety of applications:</p>

<p name="d41a" id="d41a" class="graf--p"><strong class="markup--strong markup--p-strong">Idempotence:</strong> Given the same inputs, a pure function will always return the same output, regardless of the number of times the function is called. You may have heard this word used to describe HTTP GET requests. <strong class="markup--strong markup--p-strong">Idempotence is an important feature for building RESTful web services,</strong> but it also serves the very useful purpose of separating computation from dependency on both time and order of operations — <strong class="markup--strong markup--p-strong">extremely valuable for parallel &amp; distributed computation </strong>(think horizontal scaling).</p>

<p name="6aba" id="6aba" class="graf--p">Because of idempotence, pure functions are also a great fit when you need to operate on continuous data sets. For instance, automated fade-ins and fade-outs in video or audio. Typically they’re designed as linear or logarithmic curves independent of framerates or sample rates, and only applied at the last possible moment to produce discrete data values. In graphics, this is analogous to scalable vector images like SVG, fonts, and Adobe Illustrator files. Key frames or control points are laid out relative to each other or to a timeline, rather than keyed to fixed pixels, frames, or samples.</p>

<p name="a412" id="a412" class="graf--p">Because idempotent functions don’t have any dependency on time or sample resolution, it’s possible to treat continuous data as unbounded (virtually infinite) data streams, which allows free scaling of data across time, (sampling rates), pixel resolution, audio volume, and so on.</p>

<p name="4d99" id="4d99" class="graf--p"><strong class="markup--strong markup--p-strong">Free from Side-effects:</strong> Pure functions can be safely applied with no side-effects, meaning that they do not mutate any shared state or mutable arguments, and other than their return value, they don’t produce any observable output, including thrown exceptions, triggered events, I/O devices, network, console, display, logs, etc...</p>

<p name="5e95" id="5e95" class="graf--p">Because of the lack of shared state and side-effects, pure functions are much less likely to conflict with each other or cause bugs in unrelated parts of the program.</p>

<p name="5599" id="5599" class="graf--p">In other words, for the OOP coding audience, <strong class="markup--strong markup--p-strong">pure functions produce stronger guarantees of encapsulation than objects without function purity,</strong> and those guarantees provide many of the same benefits as encapsulation in OOP: The ability to change implementation without impacting the rest of the program, a self-documenting public interface (the function signature), independence from outside code, the ability to move code around freely between files, modules, projects, and so on.</p>

<p name="781a" id="781a" class="graf--p">Function purity is FP’s answer to the gorilla/banana problem from OOP:</p>

<blockquote name="5219" id="5219" class="graf--blockquote graf--startsWithDoubleQuote">“The problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong</blockquote>

<p name="a100" id="a100" class="graf--p">Obviously, most programs need to produce output, so complex programs usually can’t be composed using <strong class="markup--strong markup--p-strong">only </strong>pure functions, but wherever it’s practical, it’s a good idea to make your functions pure.</p>

<p name="f3ae" id="f3ae" class="graf--p graf--empty"><br/></p>

<h4 name="a1a8" id="a1a8" class="graf--h4">Working in FP</h4>

<p name="8d49" id="8d49" class="graf--p graf--empty"><br/></p>

<p name="05f8" id="05f8" class="graf--p">FP provides several kinds of functions that are extremely reusable. Various implementations will have a different set using different names. This list is mostly pulled from Haskell documentation. Haskell is one of the more popular functional languages, but you’ll find functions similar to these in several popular JavaScript libraries:</p>

<p name="f43d" id="f43d" class="graf--p"><strong class="markup--strong markup--p-strong">List utilities:</strong></p>

<ul class="postList"><li name="e656" id="e656" class="graf--li">head() — get first element</li><li name="dc8a" id="dc8a" class="graf--li">tail() — get all but first elements</li><li name="23be" id="23be" class="graf--li">last() — get last element</li><li name="3d8a" id="3d8a" class="graf--li">length() — count of elements</li></ul>

<p name="8663" id="8663" class="graf--p"><strong class="markup--strong markup--p-strong">Predicates / comparators (test an element, return boolean)</strong></p>

<ul class="postList"><li name="0347" id="0347" class="graf--li">equal()</li><li name="77d4" id="77d4" class="graf--li">greaterThan()</li><li name="770e" id="770e" class="graf--li">lessThan()</li></ul>

<p name="0adc" id="0adc" class="graf--p"><strong class="markup--strong markup--p-strong">List transformations:</strong></p>

<ul class="postList"><li name="d849" id="d849" class="graf--li">map() ([x]) -&gt; [y] take list x and apply a transformation to each element in that list, return new list y</li><li name="9c6e" id="9c6e" class="graf--li">reverse() ([1, 2, 3]) -&gt; [3, 2, 1]</li></ul>

<p name="a195" id="a195" class="graf--p"><strong class="markup--strong markup--p-strong">List searches:</strong></p>

<ul class="postList"><li name="903d" id="903d" class="graf--li">find() ([x]) -&gt; x take list x and return first element that matches a predicate</li><li name="a674" id="a674" class="graf--li">filter() ([x]) -&gt; [y] take list x and return all items matching predicate</li></ul>

<p name="1c1b" id="1c1b" class="graf--p"><strong class="markup--strong markup--p-strong">List Reducers / folds:</strong></p>

<ul class="postList"><li name="7922" id="7922" class="graf--li">reduce() — ([x], function[, accumulator]) -&gt; apply function to each element and accumulate the results as a single value</li><li name="d780" id="d780" class="graf--li">any() — true if any values match predicate</li><li name="331b" id="331b" class="graf--li">all() — true if all values match predicate</li><li name="b387" id="b387" class="graf--li">sum() — total of all values</li><li name="2ee0" id="2ee0" class="graf--li">product() — product of all values</li><li name="9c64" id="9c64" class="graf--li">maximum() — highest value</li><li name="571a" id="571a" class="graf--li">minimum() — lowest value</li><li name="fc0f" id="fc0f" class="graf--li">concat() — take a list of lists and return a single, concatenated list in list order</li><li name="b475" id="b475" class="graf--li">merge() — take a list of lists and return a single, merged list in element order</li></ul>

<p name="0441" id="0441" class="graf--p"><strong class="markup--strong markup--p-strong">Iterators / Generators / Collectors (infinite lists)</strong></p>

<ul class="postList"><li name="1528" id="1528" class="graf--li">sample() — return current value of continuous input source (temperature, form input, toggle switch state, etc…)</li><li name="302e" id="302e" class="graf--li">repeat() — (1) -&gt; [1, 1, 1, 1, 1, 1,…]</li><li name="dd71" id="dd71" class="graf--li">cycle() / loop() — When the end of the list is reached, wrap around to the beginning again.</li></ul>

<p name="8646" id="8646" class="graf--p">Some of these common utility extras got added to JavaScript with the ECMAScript 5 Array extras. e.g.:</p>

<pre name="959d" id="959d" class="graf--pre">// Using ES6 syntax. () =&gt; means function () {}<br/>var foo = [1, 2, 3, 4, 5];<br/>var bar = foo.map( (n) =&gt; n + 1 ); // [2, 3, 4, 5, 6]<br/>var baz = bar.filter( (n) =&gt; n &gt;=3 &amp;&amp; n &lt;=5); // [3,4,5]<br/>var bif = baz.reduce( (n, el) =&gt; n += el); // 12</pre>

<p name="dd77" id="dd77" class="graf--p graf--empty"><br/></p>

<h4 name="2ad2" id="2ad2" class="graf--h4">Lists as a Generic Interface</h4>

<p name="2d63" id="2d63" class="graf--p graf--empty"><br/></p>

<p name="5615" id="5615" class="graf--p">You might notice that most of the functions above are utilities for managing or reasoning about <strong class="markup--strong markup--p-strong">lists</strong>. Once you start doing a lot of functional programming, you might start to see virtually everything as a <strong class="markup--strong markup--p-strong">list</strong>, an <strong class="markup--strong markup--p-strong">element</strong> of a list, a <strong class="markup--strong markup--p-strong">predicate</strong> used to test list values, or a <strong class="markup--strong markup--p-strong">transformation</strong> based on list values. That thinking lays the foundation for extremely reusable code.</p>

<p name="f4f1" id="f4f1" class="graf--p"><strong class="markup--strong markup--p-strong">Generics</strong> are functions that are capable of working on a range of different data types. In JavaScript, many functions that operate on collections are generic. For example, you can use the same function on both strings and arrays, because a string can be treated as an array of characters.</p>

<p name="be52" id="be52" class="graf--p">The process of changing a function that only works with a single type to one that works with many types is called <strong class="markup--strong markup--p-strong">lifting</strong>.</p>

<p name="9de2" id="9de2" class="graf--p">The key to all these functions working on every type of data you feed to them is that data is processed in lists which <strong class="markup--strong markup--p-strong">all share the same interface</strong>. I discussed lifting a bit towards the end of my Fluent 2014 talk, “Static Types are Overrated” (see below).</p>

<p name="edc5" id="edc5" class="graf--p graf--empty"><br/></p>

<h4 name="686b" id="686b" class="graf--h4">How to Stop Micromanaging Everything</h4>

<p name="017f" id="017f" class="graf--p graf--empty"><br/></p>

<p name="9900" id="9900" class="graf--p">In OO and imperative programming, we micromanage everything. We micromanage state, iteration counters, the timing of what happens when using things like event emitters and callbacks. What If I told you that all of that work is completely unnecessary — that you could literally delete entire categories of code from your programs?</p>

<p name="07d6" id="07d6" class="graf--p">You may have heard of <strong class="markup--strong markup--p-strong">functional reactive programming</strong>. Here’s the gist: FRP uses functional utilites like map, filter, and reduce to create and process data flows which propogate changes through the system: hence, <strong class="markup--strong markup--p-strong">reactive</strong>. When input <em class="markup--em markup--p-em">x</em> changes, output <em class="markup--em markup--p-em">y</em> updates <em class="markup--em markup--p-em">automatically</em> in response.</p>

<p name="3f3e" id="3f3e" class="graf--p">In OO, you might set up some object (say, a form input), and turn that object into an event emitter, and set up an event listener that jumps through some hoops and maybe produces some output whenever the event is triggered.</p>

<p name="2aad" id="2aad" class="graf--p">In FRP, you instead specify data dependencies in a more declarative fashion, and most of the heavy lifting is offloaded to standard functional utilities so you don’t have to reinvent the wheel over and over again.</p>

<p name="f364" id="f364" class="graf--p">Imagine that <strong class="markup--strong markup--p-strong">every list is a stream</strong>: An array is a stream of values in element order. A form input can be a stream of values sampled with each change. A button is a stream of clicks.</p>

<blockquote name="5eb5" id="5eb5" class="graf--pullquote pullquote">A stream is just a list expressed over time.</blockquote>

<p name="b924" id="b924" class="graf--p">In Rx (reactive extensions) nomenclature, you create <strong class="markup--strong markup--p-strong">observable streams </strong>and then process those streams using a set of functional utilities like the ones described above.</p>

<p name="6b8b" id="6b8b" class="graf--p">Similar to Node streams, <strong class="markup--strong markup--p-strong">observables</strong> can feature optional shared <strong class="markup--strong markup--p-strong">backpressure</strong>. Like <strong class="markup--strong markup--p-strong">generators</strong>, your program can consume observable values at its own pace, as it becomes ready to handle them.</p>

<p name="27a6" id="27a6" class="graf--p">Imagine you want to watch all your social media feeds for a particular hash tag. You could collect a list of lists, merge them in the order they’re received, and then use any combination of the utility functions above to process them.</p>

<p name="be92" id="be92" class="graf--p">That might look something like this:</p>

<pre name="1634" id="1634" class="graf--pre">var messages = merge(twitter, fb, gplus, github)</pre>

<pre name="fe81" id="fe81" class="graf--pre">messages.map(normalize) // convert to single message format<br/>  .filter(selectHashtag) // cherry pick messages that use the tag<br/>  .pipe(process.stdout) // stream output to stdout</pre>

<p name="56bf" id="56bf" class="graf--p graf--empty"><br/></p>

<h4 name="dc94" id="dc94" class="graf--h4">Better Async</h4>

<p name="d765" id="d765" class="graf--p graf--empty"><br/></p>

<p name="1aed" id="1aed" class="graf--p">You may have heard of promises. A <strong class="markup--strong markup--p-strong">promise </strong>is an object that provides a standard interface for dealing with values that may or may not be available at the time the promise is used. In other words, a promise wraps a potential value that may be resolved in the future. Typically, a function call will return a promise that may resolve with some future value:</p>

<pre name="56f2" id="56f2" class="graf--pre">fetchFutureStockPrices().then(becomeAMillionaire);</pre>

<p name="d85f" id="d85f" class="graf--p">Well, it doesn’t work exactly like that, because `.then()` will only be called when the stock prices become available, so when `becomeAMillionaire` finally gets run, the “future” stock prices will be the present stock prices.</p>

<p name="dd2e" id="dd2e" class="graf--p">A promise is basically a stream that only emits a single value (or rejection). Observables can replace promises in your code and provide all of the standard functional utilities you may have grown accustomed to with libraries like Underscore or Lo-Dash.</p>

<p name="ed06" id="ed06" class="graf--p">Now would be a great time to learn more about functional programming, the benefits of function purity, lazy evaluation, and a lot more. I promise you’re going to hear a lot more about these topics over the next few years.</p>

<p name="8bf3" id="8bf3" class="graf--p">Here we are, coming up on 2015, returning to computer science roots planted in the 1930's so that we can more easily manage the software of future.</p>

<h4 name="a48a" id="a48a" class="graf--h4">Higher Order Learning</h4>

<p name="58e2" id="58e2" class="graf--p graf--empty"><br/></p>

<p name="0654" id="0654" class="graf--p">I really loved this talk by Jafar Husain, Technical Lead at Netflix. It’s called, “Asynchronous Programming at Netflix” and it was delivered at <a target="_blank" href="http://atscaleconference.com/" data-href="http://atscaleconference.com/" class="markup--anchor markup--p-anchor" rel="nofollow">@Scale 2014</a>.</p>

<figure name="9583" id="9583" class="graf--figure graf--iframe"><p class="iframeContainer"/><figcaption class="imageCaption"><a target="_blank" href="https://www.youtube.com/watch?v=gawmdhCNy-A" data-href="https://www.youtube.com/watch?v=gawmdhCNy-A" class="markup--anchor markup--figure-anchor" rel="nofollow">https://www.youtube.com/watch?v=gawmdhCNy-A</a></figcaption></figure>

<p name="6f66" id="6f66" class="graf--p">James Coglan gave a good talk that touches on some key topics such as the roles of promises and laziness:</p>

<figure name="9107" id="9107" class="graf--figure graf--iframe graf--last"><p class="iframeContainer"/></figure>

<p name="1bd9" id="1bd9" class="graf--p graf--first">If you’re ready to take FRP for a spin, check out the <a target="_blank" href="https://github.com/Reactive-Extensions/RxJS" data-href="https://github.com/Reactive-Extensions/RxJS" class="markup--anchor markup--p-anchor" rel="nofollow">Reactive Extensions for JavaScript</a>, <a target="_blank" href="http://www.reactivemanifesto.org/" data-href="http://www.reactivemanifesto.org/" class="markup--anchor markup--p-anchor" rel="nofollow">The Reactive Manifesto</a>, and work through these <a target="_blank" href="http://jhusain.github.io/learnrx/" data-href="http://jhusain.github.io/learnrx/" class="markup--anchor markup--p-anchor" rel="nofollow">interactive lessons</a>.</p>

<p name="97ab" id="97ab" class="graf--p">For node-centric streams, check out <a target="_blank" href="http://caolanmcmahon.com/posts/how_i_want_to_write_node_stream_all_the_things_new/" data-href="http://caolanmcmahon.com/posts/how_i_want_to_write_node_stream_all_the_things_new/" class="markup--anchor markup--p-anchor" rel="nofollow">“How I Want to Write Node: Stream All the Things!”</a> and <a target="_blank" href="http://highlandjs.org/" data-href="http://highlandjs.org/" class="markup--anchor markup--p-anchor" rel="nofollow">Highland.js</a>.</p>

<p name="a4ba" id="a4ba" class="graf--p">For a much more detailed overview of concepts related to reactivity, see Kris Kowal’s excellent <a target="_blank" href="https://github.com/kriskowal/gtor" data-href="https://github.com/kriskowal/gtor" class="markup--anchor markup--p-anchor" rel="nofollow">“General Theory of Reactivity”</a> (aka gtor).</p>

<p name="026b" id="026b" class="graf--p">My talk from Fluent 2014 demonstrates lifting and discusses how dynamic or inferred types can actually be beneficial to functional programming because it makes it trivial to write generic functions.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
      Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
    </p>
    <p>
      Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>