<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title type="text">CFGR</title>
  <id>http://fa7ad.postach.io/feed.xml</id>
  <updated>2020-06-13T06:07:22.649000Z</updated>
  <link href="http://fa7ad.postach.io/" />
  <link href="http://fa7ad.postach.io/feed.xml" rel="self" />
  <generator>Werkzeug</generator>
  <entry xml:base="http://fa7ad.postach.io/feed.xml">
    <title type="text">Part 3: Some Higher-Order Functions. A Fool's guide to writing Functional JS</title>
    <id>https://fa7ad.postach.io/post/part-3-some-higher-order-functions</id>
    <updated>2020-06-13T06:07:22.649000Z</updated>
    <published>2020-06-13T05:45:13Z</published>
    <link href="https://fa7ad.postach.io/post/part-3-some-higher-order-functions" />
    <author>
      <name>Fahad Hossain</name>
    </author>
    <content type="html">&lt;div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;In the &lt;a href=&quot;https://fa7ad.postach.io/post/part-2-functions-a-fool-s-guide-to-writing-functional-js&quot;&gt;last article&lt;/a&gt; we discussed the basics of &lt;span style=&quot;font-weight: bold;&quot;&gt;Functions&lt;/span&gt;. We saw some definitions and examples of &lt;span style=&quot;font-style: italic;&quot;&gt;Higher-Order Functions&lt;/span&gt;. But that might have left you high and dry.&lt;/div&gt;&lt;/div&gt;

&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;You could be wondering,&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;How is any of this terminology useful to me?&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Sure, now I know what functions are. How do I use them?&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;All these are very valid responses to that article, I didn't cover any day-to-day uses for Higher-Order Functions (&lt;span style=&quot;font-style: italic;&quot;&gt;the article was already getting too long&lt;/span&gt;).&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;So, in this article, we will try to use some common higher-order functions. Namely, &lt;span style=&quot;font-style: italic;&quot;&gt;map&lt;/span&gt;, &lt;span style=&quot;font-style: italic;&quot;&gt;filter&lt;/span&gt;, and &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt;(reduce).&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt; &lt;/div&gt;&lt;h2&gt;A little refresher&lt;/h2&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;A function is a mapping between some input and some output&lt;/span&gt;&lt;/div&gt;&lt;/blockquote&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;A Higher-Order function is a function that maps between function(s) and data (as either input and/or output)&lt;/span&gt;&lt;/div&gt;&lt;/blockquote&gt;&lt;h3&gt;Let's get to it!&lt;/h3&gt;&lt;h2&gt;map&lt;/h2&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;We'll get right to the definition.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;According to wikipedia (and most literature),&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;map&lt;/span&gt; is the name of a higher-order function that applies a given function to each element of a functor&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;You might be cursing and saying&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&quot;What the F@#$ is a functor?&quot;&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's ignore that for now, and try to define map in a way that sounds (&lt;span style=&quot;font-style: italic;&quot;&gt;a bit more&lt;/span&gt;) human,&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;map&lt;/span&gt; is a function that takes a container data structure and applies a function to &lt;span style=&quot;font-style: italic;&quot;&gt;each&lt;/span&gt; value and creates a new container with the results of said application&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Or,&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;map&lt;/span&gt; is a thing that takes a collection of things and gives you a new collection of things by applying a function over each thing&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-style: italic;&quot;&gt;Notice how I'm trying to avoid naming any data structures?&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;That's partially to not piss of the FP neckbeards and the Lambda gods, but also to make it clear that map can be implemented in any data structure*. Like most FP concepts, it's very abstract and can be applied to a whole grocery list of things.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;JavaScript only implements &lt;span style=&quot;font-style: italic;&quot;&gt;map&lt;/span&gt; (natively) in only one Data Structure, &lt;span style=&quot;font-weight: bold;&quot;&gt;Array&lt;/span&gt;. It's implemented as a function on the Array prototype. &lt;span style=&quot;font-style: italic;&quot;&gt;But, it doesn't have to be tied down to Arrays (😉)&lt;/span&gt;&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;NOTE&lt;/span&gt;: If you are already familiar with Array.prototype.map, try not to think of it as a 1:1 implementation of the concept of map&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's look at an example of using JavaScript's map.&lt;/div&gt;
&lt;div&gt;&lt;div&gt;&lt;font face=&quot;Monaco&quot; style=&quot;font-size: 14px;&quot;&gt;let fruits = [&quot;apple&quot;, &quot;banana&quot;, &quot;carrot&quot;] // The collection&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-family: Monaco; font-size: 14px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-family: Monaco; font-size: 14px;&quot;&gt;let firstLetter = str =&gt; str[0] // Our transformation&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-family: Monaco; font-size: 14px;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-family: Monaco; font-size: 14px;&quot;&gt;let firstLetters = fruits.map(firstLetter) // The new collection.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 14px; font-family: Monaco;&quot;&gt;// =&gt; ['a', 'b', 'c']&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div lang=&quot;javascript&quot; xml:lang=&quot;javascript&quot;&gt;So, what's happening here?&lt;br /&gt;&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's start from the top, we defined an array named fruits and stored a few strings in it.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Next, we defined a function named firstLetter that takes a string input and return's its first character.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Then, we make a call to &lt;span style=&quot;font-style: italic;&quot;&gt;Array.prototype.map&lt;/span&gt; by invoking fruits.map with the argument firstLetter. What this is doing is, telling the map function to iterate over every element contained by fruits and &lt;span style=&quot;font-style: italic;&quot;&gt;apply&lt;/span&gt; firstLetter to each element, store the results in a new array, and then return the new resulting array. This return value is what we assign to firstLetters.&lt;/div&gt;&lt;table style=&quot;border-collapse: collapse; min-width: 100%;&quot;&gt;&lt;colgroup&gt;&lt;col style=&quot;width: 130px;&quot; /&gt;&lt;/colgroup&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; width: 130px; padding: 8px; border: 1px solid;&quot;&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/6f751342-a9ff-42c4-922f-c570c86c0510/180fe622-2f2b-43cf-b99a-94fd45127ddc.png&quot; /&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; width: 130px; padding: 8px; border: 1px solid;&quot;&gt;&lt;span style=&quot;font-style: italic;&quot;&gt;Illustration adapted from &lt;/span&gt;&lt;a href=&quot;https://atendesigngroup.com/blog/array-map-filter-and-reduce-js&quot; style=&quot;font-style: italic;&quot;&gt;John Ferris' article&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Note:&lt;/span&gt; Libraries like &lt;span style=&quot;font-style: italic;&quot;&gt;Ramda&lt;/span&gt;(seriously awesome, check it out) allow you to map over additional data structures such as objects. Let's try to implement a map (using mutable code) that works for both containers (object &amp; array).&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let map = function (func, ftor) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  let result&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  try {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    result = ftor.constructor()&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  } catch (e) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    result = {} // Some exotic container given, degrade to Object&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  }&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  for (let k in ftor)&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    result[k] = func(ftor[k])&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  return result&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;}&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 286px;&quot;&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;With this map there's a bunch of different things happening, but keep in mind that for an ordinary array, its functionally same.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Lets try to break it down,&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Arguments:&lt;/span&gt; this function takes two arguments, func and ftor. As the name might imply, func is our function (the transformation). ftor might seem like a weird name for the second argument, this argument is your data structure (array, object, etc.).&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;So why is it called ftor and not something like data or array? Remember that word we used in the first definition (from Wikipedia)? Yeah &lt;span style=&quot;font-weight: bold;&quot;&gt;Functor&lt;/span&gt;, ftor is my way of writing functor. A &lt;span style=&quot;font-weight: bold;&quot;&gt;Functor&lt;/span&gt; is basically any data structure that you can map over*. So, in our case Object and Array (and potentially other data structures that store key-&gt;value) are both Functors from the perspective of our map function even though natively, only Arrays might be considered &lt;span style=&quot;font-style: italic;&quot;&gt;Functors&lt;/span&gt;.&lt;/div&gt;&lt;/blockquote&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Congrats! Now you know another FP buzzword/jargon.&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Line 8-9:&lt;/span&gt; here, we are iterating through the keys of the container (indices in case of arrays) and applying the function func to each value and associating it with the same key in the resulting container.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Result:&lt;/span&gt; this function returns a container of the same type as the functor (by calling its constructor), in cases where it fails, I've decided to degrade down to a plain object.&lt;/div&gt;&lt;h3&gt;Usage&lt;/h3&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;This comes in handy when you need to make a collection of things from an existing collection by &lt;span style=&quot;font-style: italic;&quot;&gt;transforming&lt;/span&gt; each value.&lt;/div&gt;&lt;h2&gt;filter&lt;/h2&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Once again, here goes the wikipedia definition&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;filter&lt;/span&gt; is a higher-order function that processes a data structure (usually a list) in some order to produce a new data structure containing exactly those elements of the original data structure for which a given predicate returns the boolean value true&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;This time, I think the wiki definition is very expressive. Put differently,&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;filter&lt;/span&gt; is a function that goes through a &lt;span style=&quot;font-style: italic;&quot;&gt;Filterable&lt;/span&gt; collection and makes a new collection that contains only the values for which the &lt;span style=&quot;font-style: italic;&quot;&gt;predicate&lt;/span&gt; returns true&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;That might sound like a mouthful, but the concept is simple (you will see for yourself once we go through an example).&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Once again, JS has a native implementation of &lt;span style=&quot;font-style: italic;&quot;&gt;filter&lt;/span&gt;, but only in &lt;span style=&quot;font-weight: bold;&quot;&gt;Arrays&lt;/span&gt;. Same as &lt;span style=&quot;font-weight: bold;&quot;&gt;map&lt;/span&gt;, its implemented in the Array prototype. &lt;span style=&quot;font-style: italic;&quot;&gt;But it could be used with any &lt;/span&gt;&lt;span style=&quot;font-style: italic; font-weight: bold;&quot;&gt;Filterable&lt;/span&gt;&lt;span style=&quot;font-style: italic;&quot;&gt; data structure.&lt;/span&gt;&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Similar to &lt;span style=&quot;font-style: italic;&quot;&gt;Functors&lt;/span&gt;, a &lt;span style=&quot;font-style: italic;&quot;&gt;Filterable&lt;/span&gt; is a data structure that you can &lt;span style=&quot;font-style: italic;&quot;&gt;filter&lt;/span&gt;. Most &lt;span style=&quot;font-style: italic;&quot;&gt;Functors&lt;/span&gt; tend to be &lt;span style=&quot;font-style: italic;&quot;&gt;Filterable&lt;/span&gt; as well, but there is no guarantee that a &lt;span style=&quot;font-style: italic;&quot;&gt;Functor&lt;/span&gt; is &lt;span style=&quot;font-style: italic;&quot;&gt;Filterable&lt;/span&gt;. If we assume that &lt;span style=&quot;font-style: italic;&quot;&gt;Array.prototype.filter&lt;/span&gt;* is the only possible implementation of filter, then only &lt;span style=&quot;font-weight: bold;&quot;&gt;Array&lt;/span&gt;s can be considered &lt;span style=&quot;font-style: italic;&quot;&gt;Filterable&lt;/span&gt;. But, because we can write a function that can &lt;span style=&quot;font-style: italic;&quot;&gt;filter&lt;/span&gt; &lt;span style=&quot;font-weight: bold;&quot;&gt;objects&lt;/span&gt;, we can consider plain JS objects as &lt;span style=&quot;font-style: italic;&quot;&gt;Filterable&lt;/span&gt; too.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Now you know another Category of data structures.&lt;/div&gt;&lt;/blockquote&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;NOTE:&lt;/span&gt; It should go without saying, Array.prototype.filter may/may not be 1:1 with the spec of filter&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's look at an example of JavaScript's filter.&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// The collection&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let fruits = [&quot;apple&quot;, &quot;orange&quot;, &quot;banana&quot;]&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// The predicate (a function that returns either true or false)&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let isCitrus = fruit =&gt; /lemon|lime|orange|grapefruit/i.test(fruit)&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// The new collection&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let citrusFruits = fruits.filter(isCitrus)&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 208px;&quot;&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's start from the top, we defined an array named fruits and stored a few strings in it (same as our &lt;span style=&quot;font-style: italic;&quot;&gt;map&lt;/span&gt; example).&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Next, we defined a function named isCitrus that takes a string input and checks it against a regular expression and returns either true or false.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Then, we make a call to &lt;span style=&quot;font-style: italic;&quot;&gt;Array.prototype.filter&lt;/span&gt; by invoking fruits.filter with the argument isCitrus. What this does is, tell the filter function to iterate over every element contained by fruits and call isCitrus with each element as argument, if isCitrus returns true that elements is kept, otherwise the element is skipped over and the next element is checked. This process is repeated for all the elements of the array. An array is constructed containing only the elements for which isCitrus returned true.&lt;/div&gt;&lt;table style=&quot;border-collapse: collapse; min-width: 100%;&quot;&gt;&lt;colgroup&gt;&lt;col style=&quot;width: 130px;&quot; /&gt;&lt;/colgroup&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; width: 130px; padding: 8px; border: 1px solid;&quot;&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/6f751342-a9ff-42c4-922f-c570c86c0510/a5fe4a82-7018-4183-b5fa-34ad238b5943.png&quot; /&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; width: 130px; padding: 8px; border: 1px solid;&quot;&gt;&lt;span style=&quot;font-style: italic;&quot;&gt;Illustration adapted from &lt;/span&gt;&lt;a href=&quot;https://atendesigngroup.com/blog/array-map-filter-and-reduce-js&quot; style=&quot;font-style: italic;&quot;&gt;John Ferris' article&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's try to implement a filter (using mutable code) that works for different containers (object &amp; array).&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let filter = function (predicate, filterable) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  let result&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  try {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    result = filterable.constructor()&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  } catch (e) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    console.warn('Error on trying to call ', filterable.constructor, e)&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    result = {}&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  }&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  let arrKey = 0;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  let isArray = Array.isArray(filterable)&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  for (let key in filterable) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    if (predicate(filterable[key])) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;      let newKey = isArray ? arrKey++ : key;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;      result[newKey] = filterable[key]&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    }&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  }&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  return result&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;}&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 468px;&quot;&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;With this filter there's a bunch of different things happening, but keep in mind that for an ordinary array, its functionally the same as calling Array.protorype.filter.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Lets try to break it down,&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Arguments:&lt;/span&gt; this function takes two arguments, predicate and filterable. As the name might imply, predicate is our predicate (a function that takes a value and returns either true or false). The argument filterable is your data structure (array, object, etc.).&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Line 11-16:&lt;/span&gt; here, we are iterating through the keys of the container (indices in case of arrays) and checking if the predicate returns true for a particular value. If a value does return true, we are keeping it in the result container.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;Result:&lt;/span&gt; this function returns a container of the same type as the filterable (by calling its constructor), in cases where it fails, I've decided to degrade down to a plain object.&lt;/div&gt;&lt;h3&gt;Usage&lt;/h3&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;This comes in handy when you need to make a collection of things from an existing collection by keeping values that meet a certain criteria.&lt;/div&gt;&lt;h2&gt;fold (reduce)&lt;/h2&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;You know the drill, wiki first&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;fold&lt;/span&gt; (also termed &lt;span style=&quot;font-weight: bold;&quot;&gt;reduce&lt;/span&gt;...) are ... functions that analyze a recursive data structure and through use of a given combining operation, recombine the results of recursively processing its constituent parts, building up a return value.&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Lots of stuff to unpack there, but lets try to get to the gist of it&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;span style=&quot;font-weight: bold;&quot;&gt;fold&lt;/span&gt; is a function that goes trough a &lt;span style=&quot;font-style: italic;&quot;&gt;Foldable&lt;/span&gt; collection and accumulates a value using an &lt;span style=&quot;font-style: italic;&quot;&gt;accumulating function&lt;/span&gt; and then finally returns the accumulated value&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;To a shock to nobody, JavaScript has a native implementation of &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt; as well, its named &lt;span style=&quot;font-style: italic;&quot;&gt;Array.prototype.reduce&lt;/span&gt;. Once again we have to make the note that JS's &lt;span style=&quot;font-style: italic;&quot;&gt;reduce/fold&lt;/span&gt; can only fold arrays, &lt;span style=&quot;font-style: italic;&quot;&gt;but it doesn't have to be tied down to just JS arrays&lt;/span&gt;. A fold can be implemented for any data structure that can be classified as &lt;span style=&quot;font-style: italic;&quot;&gt;Foldable&lt;/span&gt;.&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;A data type is &lt;span style=&quot;font-style: italic;&quot;&gt;Foldable&lt;/span&gt; if we can implement some form of &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt; for it. But due to the nature of the &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt; operation, Foldables are usually list(array)-like or have a valid list-representation. While not strictly required, most &lt;span style=&quot;font-style: italic;&quot;&gt;Foldables&lt;/span&gt; tend to be &lt;span style=&quot;font-style: italic;&quot;&gt;Functor&lt;/span&gt; and &lt;span style=&quot;font-style: italic;&quot;&gt;Filterable&lt;/span&gt; as well. This is because both &lt;span style=&quot;font-style: italic;&quot;&gt;map&lt;/span&gt; and &lt;span style=&quot;font-style: italic;&quot;&gt;filter&lt;/span&gt; can be implemented using &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt;.&lt;/div&gt;&lt;/blockquote&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Another note, there are many variations of &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt; out there. The essential functionality is the same but some implementation details change the nature and name of the fold. In this article we will look at a left-fold as the native &lt;span style=&quot;font-style: italic;&quot;&gt;reduce&lt;/span&gt; method is a left-fold. This fold is also called &lt;span style=&quot;font-style: italic;&quot;&gt;foldl&lt;/span&gt; or &lt;span style=&quot;font-style: italic;&quot;&gt;fold_left&lt;/span&gt; in some languages and libraries.&lt;/div&gt;&lt;/blockquote&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Once again, disclaimer: JS reduce may not follow the spec of &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt; 100%.&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's try using &lt;span style=&quot;font-style: italic;&quot;&gt;Array.prototype.reduce&lt;/span&gt; to do something.&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// The collection&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let fruits = [&quot;apple&quot;, &quot;banana&quot;, &quot;orange&quot;]&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// The accumulating function&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let makeSalad = (salad, fruit) =&gt; `${fruit}-${salad}`&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// Inital Salad&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let saladStarter = &quot;salad&quot;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;&lt;br /&gt;&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// The Result&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let salad = fruits.reduce(makeSalad, saladStarter) //=&gt; orange-banana-apple-salad&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 286px;&quot;&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's start from the top again, we defined an array named fruits and stored a few strings in it.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Next, we defined a function named makeSalad that takes two strings and returns a string by concatenating them.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;We then define another variables, this time its a string named saladStarter.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Then, we make a call to &lt;span style=&quot;font-style: italic;&quot;&gt;Array.prototype.reduce&lt;/span&gt; by invoking fruits.reduce with the arguments makeSalad and saladStarter. What this does is, it tells the fold function to iterate over every element contained in fruits and call makeSalad with an &lt;span style=&quot;font-style: italic;&quot;&gt;accumulated value&lt;/span&gt; and an element from fruits. For the first iteration, there is no accumulated value, so makeSalad is called with saladStarter as the &lt;span style=&quot;font-style: italic;&quot;&gt;accumulated value&lt;/span&gt;. For every subsequent iteration, makeSalad is called with the return value of the previous iteration as the &lt;span style=&quot;font-style: italic;&quot;&gt;accumulated value&lt;/span&gt; and the next item in the array. This process is continued until makeSalad has been called with the accumulated value from its previous iteration and the last item in fruits. Finally the return value from the final call is passed on as the return value for the &lt;span style=&quot;font-style: italic;&quot;&gt;reduce&lt;/span&gt; call and stored in the variable named salad.&lt;/div&gt;&lt;table style=&quot;border-collapse: collapse; min-width: 100%;&quot;&gt;&lt;colgroup&gt;&lt;col style=&quot;width: 130px;&quot; /&gt;&lt;/colgroup&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; width: 130px; padding: 8px; border: 1px solid;&quot;&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/6f751342-a9ff-42c4-922f-c570c86c0510/243426e2-73cd-43dd-a194-8d5fdc1b5ca6.png&quot; /&gt;&lt;br /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td style=&quot;text-align: center; width: 130px; padding: 8px; border: 1px solid;&quot;&gt;&lt;span style=&quot;font-style: italic;&quot;&gt;Illustration adapted from &lt;/span&gt;&lt;a href=&quot;https://atendesigngroup.com/blog/array-map-filter-and-reduce-js&quot; style=&quot;font-style: italic;&quot;&gt;John Ferris' article&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Let's try to implement a &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt; of our own. Using mutable and imperative code, of course.&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let fold_left = function (folding_fn, inital_value, foldable) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  let accumulated = inital_value&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  for (let key in foldable) {&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;    accumulated = folding_fn(accumulated, foldable[key])&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  }&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;  return accumulated&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;}&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 182px;&quot;&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;You might be thinking...&lt;/div&gt;&lt;blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;What? Where is all the code?&lt;/div&gt;&lt;/blockquote&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Folds are notoriously very simple to implement, but they are so useful that you'll find yourself wondering why more people don't use them.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;I think its pretty obvious how this function works, so I won't bore you with the explanation. Let's instead come back to our claim that we can usually &lt;span style=&quot;font-style: italic;&quot;&gt;map&lt;/span&gt; and &lt;span style=&quot;font-style: italic;&quot;&gt;filter&lt;/span&gt; using a &lt;span style=&quot;font-style: italic;&quot;&gt;fold&lt;/span&gt;.&lt;/div&gt;&lt;h3&gt;map&lt;/h3&gt;&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// le folded map&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let map = (fn, ftr) =&gt; fold_left((acc, val) =&gt; acc.concat(fn(val)), ftr.constructor(), ftr)&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 52px;&quot;&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Yeah, this code is not very readable, but its not meant to be. This is a &lt;span style=&quot;font-weight: bold;&quot;&gt;one-liner&lt;/span&gt; that shows a very simple implementation of map using fold. It works because fold carries the return value from the accumulating function on to the next iteration, allowing us to successively construct a larger list of values resulting from applying fn to val. Try and tinker with it a little bit, and I have faith that you will figure it out.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;On to the next one...&lt;/div&gt;&lt;h3&gt;filter&lt;/h3&gt;&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;// le folded filter&lt;/font&gt;&lt;/div&gt;
&lt;div&gt;&lt;font face=&quot;Monaco&quot;&gt;let filter = (pred, flt) =&gt; fold_left((acc, val) =&gt; pred(val) ? acc.concat(val) : acc, flt.constructor, flt)&lt;/font&gt;&lt;/div&gt;
&lt;div style=&quot; border-bottom-width: 0px; border-bottom-style: solid; border-bottom-color: transparent; top: 52px;&quot;&gt;&lt;/div&gt;&lt;div&gt;
&lt;/div&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Once again, this is a &lt;span style=&quot;font-weight: bold;&quot;&gt;one-liner&lt;/span&gt;. This follows the same principle as map, except we are only concatenating to the list if the predicate is satisfied by the value (i.e., pred(val) returns &lt;span style=&quot;font-style: italic;&quot;&gt;true&lt;/span&gt;).&lt;/div&gt;&lt;h3&gt;Usage&lt;/h3&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Folds should come in handy when you need to,&lt;/div&gt;&lt;ul&gt;&lt;li&gt;&lt;div&gt;Iterate over a list and carry over a value to the next iteration&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;&lt;span style=&quot;font-style: italic;&quot;&gt;Fold&lt;/span&gt; a list onto itself to arrive at a single value&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Transform a list to a single value (even if the resulting value is of a completely different type, like transforming the items of a list to be items of a Map or a Set)&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h2&gt;Appendix / Additional Links&lt;/h2&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;I talk briefly about a few &lt;span style=&quot;font-style: italic;&quot;&gt;Categories&lt;/span&gt; of data types. If you wanna look at more of these categories, take a look at the wonderful &lt;a href=&quot;https://github.com/fantasyland/fantasy-land&quot; style=&quot;font-weight: bold;&quot;&gt;fantasy-land&lt;/a&gt; specifications that defines &lt;span style=&quot;font-style: italic;&quot;&gt;Algebraic&lt;/span&gt; Data Types in terminology we JS devs can understand.&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Also check out the amazing &lt;a href=&quot;https://ramdajs.com/&quot; style=&quot;font-weight: bold;&quot;&gt;ramda&lt;/a&gt; library for more useful functional utilities like &lt;span style=&quot;font-style: italic;&quot;&gt;performant&lt;/span&gt; and &lt;span style=&quot;font-style: italic;&quot;&gt;curried&lt;/span&gt; implementations of &lt;span style=&quot;font-style: italic;&quot;&gt;map&lt;/span&gt;, &lt;span style=&quot;font-style: italic;&quot;&gt;filter&lt;/span&gt;, &lt;span style=&quot;font-style: italic;&quot;&gt;reduce&lt;/span&gt; or even helper functions that help you easily combine these operations into a &lt;span style=&quot;font-style: italic;&quot;&gt;transducer&lt;/span&gt; (more on this in a later article).&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;If you are even slightly mathematically minded, lookup Category theory as well as Algebraic Data Types. These are wonderful topics to study regardless, but they also help us understand the world of FP even better.&lt;/div&gt;&lt;hr /&gt;&lt;h2&gt;That's all for today, folks.&lt;/h2&gt;&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;Peace ✌️&lt;/div&gt;
&lt;div style=&quot;margin-top: 1em; margin-bottom: 1em;-en-paragraph:true;&quot;&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/6f751342-a9ff-42c4-922f-c570c86c0510/59a4e471-133c-483e-9e85-c136aa376287.gif&quot; /&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
</content>
  </entry>
  <entry xml:base="http://fa7ad.postach.io/feed.xml">
    <title type="text">Part 2: Functions. A Fool's guide to writing Functional JS</title>
    <id>https://fa7ad.postach.io/post/part-2-functions-a-fool-s-guide-to-writing-functional-js</id>
    <updated>2020-04-25T19:13:13.637000Z</updated>
    <published>2020-04-25T18:56:08Z</published>
    <link href="https://fa7ad.postach.io/post/part-2-functions-a-fool-s-guide-to-writing-functional-js" />
    <author>
      <name>Fahad Hossain</name>
    </author>
    <content type="html">&lt;div&gt;&lt;div style=&quot;margin-top:16px;&quot;&gt;In the &lt;a href=&quot;https://fa7ad.postach.io/post/a-fool-s-guide-to-writing-functional-js-part-1-the-introduction&quot; rev=&quot;en_rl_none&quot; shape=&quot;rect&quot;&gt;last article&lt;/a&gt; I introduced some core concepts of Functional Programming. In that article we quickly glossed over Pure Functions. In this article I try to discuss functions in more details.&lt;/div&gt;&lt;/div&gt;

&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;If there is one thing that you can call absolutely necessary to do functional programming is a good understanding of &lt;i&gt;Functions&lt;/i&gt;. &lt;i&gt;(I guess you could infer that from the name, &lt;/i&gt;&lt;b&gt;&lt;i&gt;Function&lt;/i&gt;&lt;/b&gt;&lt;i&gt;al Programming)&lt;/i&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h2&gt;What is a function?&lt;/h2&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;If you are a programmer of any kind, you are probably already familiar with functions. But, I will still ask you, what is a function?&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;I hear some JS folk going, I know what a function is:&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function doSomething(x) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return x + 42;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Its this (👆) thing. Or this&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;const addTwo = function (x) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return x + 2;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Or the real clever guy thinking, its this&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;const addOne = x =&gt; x + 1&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Yes, all of those are functions. But those are examples of functions. What I want you to think about is,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;What is a function? What does it do?&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;As you may/may not be aware, the world computer science is very intertwined with the world of mathematics. Functions are one of many things that we borrow from the world of mathematics.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;However, math is very abstract (for good reason). And so, if you look for a definition of functions in mathematics, you will find multiple. One that I like is,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;A function is a relation between 2 sets&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Or in less abstract, computer science-y terms&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;A function is a mapping between an input and an output&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;So, we can say that a function is a &lt;i&gt;thing&lt;/i&gt; that takes some &lt;b&gt;input&lt;/b&gt; and gives back some &lt;b&gt;output&lt;/b&gt;.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Now there are several rules that a &lt;i&gt;thing&lt;/i&gt; must follow before it can be considered a function, the most important ones are:&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;ul&gt;&lt;li&gt;&lt;div style=&quot;margin-top:16px;&quot;&gt;Multiple inputs can map to a single output&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;// for a function fx,&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;fx(1) // =&gt; true&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;fx(-1) // =&gt; true&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div style=&quot;margin-top:16px;&quot;&gt;Same input can not map to multiple outputs.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;This is because that would lead to non deterministic behaviour and this is undesirable in both computer science and math.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;fx(1) // it should not be true once and false the next second.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Now you may be thinking,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;What about functions that don't return anything.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;I don't know (nor care for the purposes of this discussion) about the behaviour of this in other languages, but in JS your functions always return something whether you want to or not.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;If you do return something, that's well and good. However, if you don't, JS returns undefined for you.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;So your function that returns nothing, is actually a mapping from some input to undefined. But more importantly, you might be getting the results of such a function in some other place, maybe the function is pushing the result on to a variable outside its scope. In that case, &lt;b&gt;Its an impure function&lt;/b&gt; and its causing side effect. And you should probably avoid doing that (when possible).&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;But you might be thinking,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;What about functions that don't take an input.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;This can go one of two ways, either it is a function (in the pure sense of the word) or its not.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;ol&gt;&lt;li&gt;&lt;div style=&quot;margin-top:16px;&quot;&gt;Your function always returns something valuable if you call it with no input.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div style=&quot;margin-bottom:16px;&quot;&gt;Your function is a mapping from a null set (nothing) to a value, &lt;b&gt;Its a function&lt;/b&gt;.&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div style=&quot;margin-top:16px;margin-bottom:16px;&quot;&gt;Your function takes no input and returns nothing (or undefined) as we discussed.&lt;/div&gt;&lt;/li&gt;&lt;ol&gt;&lt;li&gt;&lt;div&gt;Its useless (i.e. not doing anything), but &lt;b&gt;Its a function&lt;/b&gt;.&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Its useful (i.e. gives some output), but its output is not available as a return value, &lt;b&gt;Its (probably) not a (&lt;i&gt;pure&lt;/i&gt;) function&lt;/b&gt; and you should try and avoid these as its making a &lt;i&gt;side effect!&lt;/i&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;/ol&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;So, we now know what functions are, that's it right? that's all there is to know about functions?&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;No, my dear reader. You can dig yourself into a tunnel, learning about functions. But, for our purposes of learning FP in JS. We can talk about some special types of functions that follow the rules above and do some interesting things.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h2&gt;Recursive Functions&lt;/h2&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Do you know what factorials are? Its this thing you express in math with an exclamation mark after a number like 5!.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;What's it do? Its an interesting bit of math, its useful for a lot of things that we are not going to discuss right now. The important bit is that we can not just use a number followed by and exclamation mark after it to get a factorial in code. We need to make that functionality ourselves.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Luckily, factorials are very intuitive. There's just two rules about factorials, and you can get the factorial of any number with those.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;ol&gt;&lt;li&gt;&lt;div style=&quot;margin-top:16px;margin-bottom:16px;&quot;&gt;Factorial of 0 is 1. Or, 0! = 1&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div style=&quot;margin-top:16px;&quot;&gt;Factorial of a number X is X multiplied by the factorial of (X-1).&lt;/div&gt;
&lt;div&gt;Or,&lt;/div&gt;
&lt;div style=&quot;margin-bottom:16px;&quot;&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;n! = n ✕ (n-1)! &lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;margin-bottom:16px;&quot;&gt;Example: 5! = 5 * 4!&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;So if we wanted to find the factorial of 3, it would go something like this,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;3! = 3 * 2!&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;2! = 2 * 1!&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;1! = 1 * 0!&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;0! = 1&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;Simplifying,&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;3! = 3 * 2 * 1 * 1&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;If we wanted to implement this behaviour in a function and call it fac. How would you go about doing that?&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;You're probably thinking of loops and if-else statements. But there is a very simple way where we can take the rules of factorial word for word and translate that into code and it would work.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;This is how it goes&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function fac (n) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  if (n === 0) return 1 // this is our rule number 1 being satisfied.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return n * fac(n-1) // rule number 2 being satisfied&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Thats it! This is a very simple and functioning implementation of factorial.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;So, how does it work?&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;This is an example of a &lt;b&gt;recursion&lt;/b&gt;; a function that calls itself to do something or get a result.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;In &lt;b&gt;every&lt;/b&gt; (intensional) &lt;i&gt;recursion&lt;/i&gt; in the world, there are always at least 2 logical cases.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;ol&gt;&lt;li&gt;&lt;div&gt;A base case where the function does not call itself (so the recursion is not infinitely spiralling out).&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;A recursive case where the function calls itself.&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;In the example above, Line#2 is our base case. As you might have noticed, this is usually something that's either easily computable or known. Line#3 is our recursive case, This is usually where we put the repetitive behaviour.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;b&gt;A word of warning,&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;While JavaScript is usually a good enough language for exploring functional concepts, this is one of the places where functional and JS doesn't necessarily agree.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;A recursion is usually fine for simple algorithms that don't need too many recursive calls in JS. But, if your algorithms does a recursive call way too many times, its either not gonna perform well or going to crash because of a stack overflow.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;In future, We might discuss techniques such as memoization to get over this kind of limitations or to make our code more performant than a naive recursion.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h2&gt;Higher-Order Functions&lt;/h2&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Lets get straight to the point, As previously discussed... A function is a mapping from input to an output.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;A &lt;b&gt;Higher-Order Function&lt;/b&gt; is a &lt;i&gt;function&lt;/i&gt; that maps,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;ul&gt;&lt;li&gt;&lt;div&gt;From function(s) (&lt;i&gt;input&lt;/i&gt;) to output&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;From input to function&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;From function (input) to function (output)&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Take a moment to absorb all of that. If a function does any of those 3 things, its a higher order function.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Lets see a few examples,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function propSatisfies(prop, pred, obj) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  let val = obj[prop]&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return pred(val)&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;let data = {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  age: 21&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;&lt;span style=&quot;--en-markholder:true;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function isAdult (age) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return age &gt;= 18&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;&lt;span style=&quot;--en-markholder:true;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;propSatisfies('age', isAdult, data) //=&gt; true&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;In the example above,&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Our function &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;propSatisfies&lt;/span&gt;&lt;/span&gt; takes in 3 parameters(inputs),&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;prop&lt;/span&gt;&lt;/span&gt;: a string (name of a property)&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;pred&lt;/span&gt;&lt;/span&gt;: a function that takes an input and returns true or false&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;obj&lt;/span&gt;&lt;/span&gt;: an object whose prop property will be checked against &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;pred&lt;/span&gt;&lt;/span&gt;. Our function returns a value, either &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;true&lt;/span&gt;&lt;/span&gt; or &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;false&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;On the last line, we call the propSatisfies function using 3 values,&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;prop =&gt; 'age'&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;pred =&gt; isAdult&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;obj  =&gt; data&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;isAdult is a simple function that takes an age and returns true or false (i.e. a predicate). &lt;b&gt;This is not a Higher-order Function&lt;/b&gt; 'age' is a string literal, so not a Higher-order Function obj is an object, not a Higher-order Function.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;So, which one is the Higher-order function? &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;propSatisfies&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;Why? Because it maps a function (&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;isAdult&lt;/span&gt;&lt;/span&gt;) to a value &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;true&lt;/span&gt;&lt;/span&gt; or &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;false&lt;/span&gt;&lt;/span&gt;.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Lets look at another Higher-order function.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function add(a) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return function (b) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;    return a + b;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;let addOne = add(1) //=&gt; this returns a function&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;let addTen = add(10) //=&gt; this too returns a function&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;addTen(1) //=&gt; returns 11&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;In this example, add is a function that takes in 1 parameter, a (A number). Our function returns another function.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Here, &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;add&lt;/span&gt; is a Higher-order Function, because it returns a function.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Our add function also employs another interesting FP concept called a &lt;i&gt;closure&lt;/i&gt;, we will discuss how our function and closures work another day. For the purposes of this discussion just understand that add is a Higher-order function because &lt;i&gt;it returns another function&lt;/i&gt;.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Let's look at a final function that does both of these things, take in function(s) &lt;b&gt;and&lt;/b&gt; returns a function.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function combine(outer, inner) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return function (arg) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;    return outer(inner(arg))&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  }&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function double (num) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return 2 * num&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;function square (num) {&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;  return num * num&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;let dSquare = combine(square, double) //=&gt; a function that doubles and then squares a number&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;In this example, combine takes in two arguments outer and inner, both of which have to be functions. So, we can already see that it is a Higher-order Function combine also returns a function that &lt;i&gt;combine&lt;/i&gt;s the functionality of both inner and outer. Once again, its a higher-order function (because its returning a function)&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;When we call combine with square and double as arguments, it returns a function that takes an argument arg and returns a value by calling inner with arg and then calling outer with the return value of the inner call. In essence, &lt;i&gt;combining&lt;/i&gt; the two functions. So, &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;dSquare&lt;/span&gt;&lt;/span&gt; is now a function that, when given a number, doubles it first and then squares it and then returns the result of those operations.&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;In later articles, We will discuss a function that's basically combine but much more flexible and powerful. (For the really curious people, look up &lt;span style=&quot;--en-fontfamily: monospace; font-family: &quot;Source Code Pro&quot;,monospace&quot;&gt;&lt;span style=&quot;color:rgb(184, 22, 215);&quot;&gt;compose&lt;/span&gt;&lt;/span&gt;).&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;h3&gt;That's all for today, folks.&lt;/h3&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;Peace ✌️&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/019e7ff2-849a-496d-bc20-dcfb5ff7865e/de97027a-cdd7-4b7c-8a4e-a25127735c2d.gif&quot; /&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
</content>
  </entry>
  <entry xml:base="http://fa7ad.postach.io/feed.xml">
    <title type="text">Part 1: The Introduction. A Fool's guide to writing Functional JS</title>
    <id>https://fa7ad.postach.io/post/a-fool-s-guide-to-writing-functional-js-part-1-the-introduction</id>
    <updated>2020-04-25T17:47:55.129000Z</updated>
    <published>2020-04-10T19:23:43Z</published>
    <link href="https://fa7ad.postach.io/post/a-fool-s-guide-to-writing-functional-js-part-1-the-introduction" />
    <author>
      <name>Fahad Hossain</name>
    </author>
    <content type="html">&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;You’re a developer going about your day writing loops and pushing and deleting stuff from arrays and what not. And then some day you think &lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 1em;&quot;&gt;maybe I should test my code…&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&quot;Shouldn’t be too hard&quot;, you say.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;And then you get started, you learn the basics of unit testing and even write some tests. But as soon as your code gets a bit more complex, it starts to seem like almost impossible to test. But, you are determined, you’re not gonna give up that easy; you start creating and destroying objects after every test. Maybe your chosen test framework even offers hooks for those.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;But Imagine a world where you could test almost every piece of functionality in your code, without jumping through those hoops.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Well, that’s not what I’m gonna teach you today .&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;What we will try to discuss, however, are some of the basics of a paradigm called Functional Programming (or FP for short). What you can eventually get by following the principles of FP is what we previously discussed and more. Namely, easily testable code, minimal setup in testing, cool developer creds, happiness* .&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 1em;&quot;&gt;P.S. I can’t promise that last one, what I can promise is good DX (Developer Experience) which may/may not correlate to happiness.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Right, Lets start!&lt;/strong&gt;&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: start;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-size: 34.4px;&quot;&gt;What is FP?&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h2&gt;&lt;div&gt;I’m not gonna get into some complex mathematical/theoretical explanation of what FP is. I’ll try to explain FP in very simple terms…&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;FP is a paradigm(a way of thinking about problems) where we solve problems in terms of functions&lt;span style=&quot;font-size: 75%;&quot;&gt;&lt;sup&gt;&lt;/sup&gt;&lt;/span&gt; and state that does not change(immutable state).&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: start;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-size: 27.2px;&quot;&gt;&lt;em&gt;Foreword&lt;/em&gt;&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h3&gt;&lt;div&gt;&lt;span style=&quot;font-size: 1em;&quot;&gt;A word of warning, FP (and almost all literature about FP) is filled with jargon such as &quot;immutable&quot;, &quot;functor&quot;, &quot;monad&quot;, etc. Don’t get discouraged, once you get familiar with them, you’ll start to see why people use them (hint: to express ideas in short).&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 1em;&quot;&gt;Unlike most traditional FP tutorials, I won’t be showing any code in any purely functional language like Haskell or OCaml. While those are great language, I’m not great at them and I think JavaScript is good enough as a language to explore at least the basics of FP &lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: start;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-size: 34.4px;&quot;&gt;Core Principles (of FP)&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h2&gt;&lt;div&gt;Almost every religion comes with some core tenants that you &lt;strong&gt;must&lt;/strong&gt; follow. While FP is not a religion, it does come with some rules that must be obeyed at all times (otherwise the FP gods will be very unpleased and you will suffer as a developer). But, this being me and not some FP guru, I might miss some and am most definitely paraphrasing all of them.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;ol&gt;&lt;li&gt;&lt;div&gt;&lt;strong&gt;NEVER*&lt;/strong&gt; mutate state&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Don’t cause side effects&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;If you do need have side effects, isolate and limit them to a small number of functions&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Every piece of code that &lt;em&gt;does something&lt;/em&gt; should be a function&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Oh, and did I mention? &lt;strong&gt;NEVER MUTATE STATE&lt;/strong&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ol&gt;&lt;div&gt;Don’t worry about the jargon for now, we will discuss those terms shortly.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: start;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-size: 34.4px;&quot;&gt;State (and mutation? ‍♀️)&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h2&gt;&lt;div&gt;Lets begin by examining some objects in real life. Do you remember those digital watches (CASIO et al) from back in the day that lit up when you pressed a button on the side?&lt;/div&gt;
&lt;div style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/91bab369-dba1-4a22-a7b5-940bac05dd84/9e0fb7b5-8b05-4e25-8448-fa507b211ee2.jpg&quot; /&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: center;&quot;&gt;&lt;strong&gt;Image&lt;/strong&gt;: &lt;em&gt;Casio W-86 / W86 / W-86-1VQES &quot;Illuminator&quot; digital watch&lt;/em&gt;. &lt;a shape=&quot;rect&quot; title=&quot;via Wikimedia Commons&quot; href=&quot;https://commons.wikimedia.org/wiki/File:Casio_W-86_digital_watch_electroluminescent_backlight_%28ii%29.jpg&quot; target=&quot;_blank&quot; rev=&quot;en_rl_none&quot;&gt;&lt;span&gt;Multicherry&lt;/span&gt;&lt;/a&gt; / &lt;a shape=&quot;rect&quot; href=&quot;https://creativecommons.org/licenses/by-sa/4.0&quot; target=&quot;_blank&quot; rev=&quot;en_rl_none&quot;&gt;&lt;span&gt;CC BY-SA&lt;/span&gt;&lt;/a&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Lets examine that mechanism. The &quot;backlight&quot; on those watches is a very simple green-ish LED soldered besides the digital display, powered by the on-board battery and sometimes a tiny little solar panel. If we think of that backlight and button mechanism as a simple program. We can observe a few things,&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;ul&gt;&lt;li&gt;&lt;div&gt;The backlight is initially &lt;strong&gt;OFF&lt;/strong&gt;&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Once you press the button &lt;em&gt;something happens&lt;/em&gt;&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Now the backlight is &lt;strong&gt;ON&lt;/strong&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;In this very crude explanation of a backlight, ON and OFF are states. In code, you probably represent that as a variable.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&quot;But what about this mutation thing&quot;, you ask.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Well, in imperative/OO code, you are probably used to &lt;em&gt;changing&lt;/em&gt; the value of variables. This is what’s known as a mutation (i.e. change). Functional Programming &lt;strong&gt;strongly discourages&lt;/strong&gt; mutating state; Instead you create distinct, new states.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Say you have a list of two numbers (or array or whatever) and now you want to add one more. If your list structure were mutable, you might append another number two it. In immutable land, however, you create a new list containing the items from your old list and one more.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;The cool thing is you don’t even need an inherently immutable list structure, you can just use JavaScript’s good old Array type. To make your life easier, TC39 people even threw in &lt;strong&gt;Array.prototype.concat&lt;/strong&gt;.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: transparent; color: inherit;&quot;&gt;&lt;span style=&quot;font-family: 'Source Code Pro',Consolas,monospace;&quot;&gt;&lt;span style=&quot;font-size: 0.9em;&quot;&gt;&lt;span style=&quot;color: #75715e;&quot;&gt;// Mutable code&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: transparent; color: inherit;&quot;&gt;&lt;span style=&quot;font-family: 'Source Code Pro',Consolas,monospace;&quot;&gt;&lt;span style=&quot;color: #f92672;&quot;&gt;let&lt;/span&gt; itemList = [&lt;span style=&quot;color: #ae81ff;&quot;&gt;1&lt;/span&gt;, &lt;span style=&quot;color: #ae81ff;&quot;&gt;2&lt;/span&gt;];&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: transparent; color: inherit;&quot;&gt;mutList.push(&lt;span style=&quot;color: #ae81ff;&quot;&gt;3&lt;/span&gt;);&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: transparent; color: inherit;&quot;&gt;&lt;span style=&quot;color: #75715e;&quot;&gt;// Immutable code&lt;/span&gt;&lt;/div&gt;
&lt;div style=&quot;background-color: transparent; color: inherit;&quot;&gt;&lt;span style=&quot;color: #f92672;&quot;&gt;let&lt;/span&gt; twoItemList = [&lt;span style=&quot;color: #ae81ff;&quot;&gt;1&lt;/span&gt;, &lt;span style=&quot;color: #ae81ff;&quot;&gt;2&lt;/span&gt;];&lt;/div&gt;
&lt;div style=&quot;background-color: transparent; color: inherit;&quot;&gt;&lt;span style=&quot;color: #f92672;&quot;&gt;let&lt;/span&gt; threeItemList = twoItemList.concat(&lt;span style=&quot;color: #ae81ff;&quot;&gt;3&lt;/span&gt;);&lt;/div&gt;
&lt;div&gt;Immutability might seem a little counter-intuitive at first but it is one of the things that will give you the promised testability.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Think about it, &lt;em&gt;itemList&lt;/em&gt; might have 2 items at one point of your code and 3 at some other… Your test could be expecting it to have two items but it has three, now you’re wondering where in your program life cycle it changed. Maybe you forgot to clear the junk from a previous test? Maybe you changed it on a different method… You have to sit there and figure that out.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;On the other hand, &lt;em&gt;twoItemList&lt;/em&gt; always has these two items and never changes, so if you are getting a test failed because your function returned 3 items instead of 2, you know what happened. You returned the wrong list ​.​&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: start;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-size: 34.4px;&quot;&gt;Side Effects (and pure functions)&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h2&gt;&lt;div&gt;&lt;span style=&quot;font-size: 1em;&quot;&gt;Relax, we are not gonna discuss pharmaceuticals.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;One of the core tenants of FP is to try and avoid side-effects.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&quot;But, what on earth is a side effect?&quot;, you ask.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Glad you asked. A side effect is anything you do that does not involve your own state. Lets get back to this in a bit. But first, functions&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;h3 style=&quot;text-align: start;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-size: 27.2px;&quot;&gt;Functions&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h3&gt;&lt;div&gt;&quot;But I already know everything I need to know about functions&quot;, you say.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Do you?&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;In FP a function (or rather a pure function) is a piece of code that may/may not take something as input (arguments) and returns something and does nothing more. It does not:&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;&lt;ul&gt;&lt;li&gt;&lt;div&gt;Perform some I/O task&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Change the state of anything outside its scope&lt;/div&gt;&lt;/li&gt;&lt;li&gt;&lt;div&gt;Return different things for the same input&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;So, getting back to out Side Effects discussion, a side effect is any and all of the above discussed despicable things except the last one.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;Or in other words, if a function performs some I/O task instead of or in addition to returning an output, or it changes the global state somehow; it is said to have side effects and is referred to as an impure function*&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 1em;&quot;&gt;A function can also be impure if its output is non-deterministic. That is, gives different output for the exact same input.&lt;/span&gt;&lt;/div&gt;&lt;h2 style=&quot;text-align: start;&quot;&gt;&lt;strong&gt;&lt;span style=&quot;font-family: inherit;&quot;&gt;&lt;span style=&quot;font-size: 34.4px;&quot;&gt;That’s all for today&lt;/span&gt;&lt;/span&gt;&lt;/strong&gt;&lt;/h2&gt;&lt;div&gt;I feel like the above topics are a good enough indication of how things work in FP. We’ll get into more details about how to do certain things in the next article.&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div&gt;&lt;strong&gt;Till then, Peace ✌️&lt;/strong&gt;&lt;/div&gt;
&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
&lt;div style=&quot;text-align: center;&quot;&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/91bab369-dba1-4a22-a7b5-940bac05dd84/a8875fd5-117c-4fae-848a-d4b01c025fa4.jpg&quot; /&gt;&lt;/div&gt;&lt;center style=&quot;display: none !important; visibility: collapse !important; height: 0 !important; white-space: nowrap; width: 100%; overflow: hidden;&quot;&gt;&lt;span&gt;You%27re%20a%20developer%20going%20about%20your%20day%20writing%20loops%20and%20pushing%20and%20deleting%20stuff%20from%20arrays%20and%20what%20not.%20And%20then%20some%20day%20you%20think%20%uD83E%uDD14%0A%0A%3E%20maybe%20I%20should%20test%20my%20code...%0A%0A%22Shouldn%27t%20be%20too%20hard%22%2C%20you%20say.%0A%0AAnd%20then%20you%20get%20started%2C%20you%20learn%20the%20basics%20of%20unit%20testing%20and%20even%20write%20some%20tests.%20But%20as%20soon%20as%20your%20code%20gets%20a%20bit%20more%20complex%2C%20it%20starts%20to%20seem%20like%20almost%20impossible%20to%20test.%20But%2C%20you%20are%20determined%2C%20you%27re%20not%20gonna%20give%20up%20that%20easy%3B%20you%20start%20creating%20and%20destroying%20objects%20after%20every%20test.%20Maybe%20your%20chosen%20test%20framework%20even%20offers%20hooks%20for%20those.%0A%0ABut%20Imagine%20a%20world%20where%20you%20could%20test%20almost%20every%20piece%20of%20functionality%20in%20your%20code%2C%20without%20jumping%20through%20those%20hoops.%20%0A%0AWell%2C%20that%27s%20not%20what%20I%27m%20gonna%20teach%20you%20today%20%uD83D%uDE05.%0A%0AWhat%20we%20will%20try%20to%20discuss%2C%20however%2C%20are%20some%20of%20the%20basics%20of%20a%20paradigm%20called%20Functional%20Programming%20%28or%20FP%20for%20short%29.%20What%20you%20can%20eventually%20get%20by%20following%20the%20principles%20of%20FP%20is%20what%20we%20previously%20discussed%20and%20more.%20Namely%2C%20easily%20testable%20code%2C%20minimal%20setup%20in%20testing%2C%20cool%20developer%20creds%2C%20happiness*%20%uD83D%uDE05.%0A%0A%3E%20P.S.%20I%20can%27t%20promise%20that%20last%20one%2C%20what%20I%20can%20promise%20is%20good%20DX%20%28Developer%20Experience%29%20which%20may/may%20not%20correlate%20to%20happiness.%0A%0A**Right%2C%20Lets%20start%21**%0A%0A%23%23%20What%20is%20FP%3F%0A%0AI%27m%20not%20gonna%20get%20into%20some%20complex%20mathematical/theoretical%20explanation%20of%20what%20FP%20is.%20I%27ll%20try%20to%20explain%20FP%20in%20very%20simple%20terms...%0A%0AFP%20is%20a%20paradigm%28a%20way%20of%20thinking%20about%20problems%29%20where%20we%20solve%20problems%20in%20terms%20of%20functions%3Csup%3E%uD83D%uDE09%3C/sup%3E%20and%20state%20that%20does%20not%20change%28immutable%20state%29.%0A%0A%23%23%23%20*Foreword*%0A%0A%3E%20A%20word%20of%20warning%2C%20FP%20%28and%20almost%20all%20literature%20about%20FP%29%20is%20filled%20with%20jargon%20such%20as%20%22immutable%22%2C%20%22functor%22%2C%20%22monad%22%2C%20etc.%20Don%27t%20get%20discouraged%2C%20once%20you%20get%20familiar%20with%20them%2C%20you%27ll%20start%20to%20see%20why%20people%20use%20them%20%28hint%3A%20to%20express%20ideas%20in%20short%29.%0A%0A%3E%20Unlike%20most%20traditional%20FP%20tutorials%2C%20I%20won%27t%20be%20showing%20any%20code%20in%20any%20purely%20functional%20language%20like%20Haskell%20or%20OCaml.%20While%20those%20are%20great%20language%2C%20I%27m%20not%20great%20at%20them%20and%20I%20think%20JavaScript%20is%20good%20enough%20as%20a%20language%20to%20explore%20at%20least%20the%20basics%20of%20FP%20%uD83D%uDE03%0A%0A%23%23%20Core%20Principles%20%28of%20FP%29%0A%0AAlmost%20every%20religion%20comes%20with%20some%20core%20tenants%20that%20you%20**must**%20follow.%20While%20FP%20is%20not%20a%20religion%2C%20it%20does%20come%20with%20some%20rules%20that%20must%20be%20obeyed%20at%20all%20times%20%28otherwise%20the%20FP%20gods%20will%20be%20very%20unpleased%20and%20you%20will%20suffer%20as%20a%20developer%29.%20But%2C%20this%20being%20me%20and%20not%20some%20FP%20guru%2C%20I%20might%20miss%20some%20and%20am%20most%20definitely%20paraphrasing%20all%20of%20them.%0A%0A1.%20**NEVER***%20mutate%20state%0A2.%20Don%27t%20cause%20side%20effects%0A3.%20If%20you%20do%20need%20have%20side%20effects%2C%20isolate%20and%20limit%20them%20to%20a%20small%20number%20of%20functions%0A4.%20Every%20piece%20of%20code%20that%20*does%20something*%20should%20be%20a%20function%0A5.%20Oh%2C%20and%20did%20I%20mention%3F%20**NEVER%20MUTATE%20STATE**%0A%0ADon%27t%20worry%20about%20the%20jargon%20for%20now%2C%20we%20will%20discuss%20those%20terms%20shortly.%0A%0A%23%23%20State%20%28and%20mutation%3F%20%uD83E%uDD37%u200D%u2640%uFE0F%29%0A%0ALets%20begin%20by%20examining%20some%20objects%20in%20real%20life.%20Do%20you%20remember%20those%20digital%20watches%20%28CASIO%20et%20al%29%20from%20back%20in%20the%20day%20that%20lit%20up%20when%20you%20pressed%20a%20button%20on%20the%20side%3F%0A%0A%7C%20%21%5BCasio%20W-86%20/%20W86%20/%20W-86-1VQES%20%22Illuminator%22%20digital%20watch%5D%28https%3A//upload.wikimedia.org/wikipedia/commons/thumb/8/89/Casio_W-86_digital_watch_electroluminescent_backlight_%2528ii%2529.jpg/480px-Casio_W-86_digital_watch_electroluminescent_backlight_%2528ii%2529.jpg%29%20%7C%0A%7C%20%3A----------------------------------------------------------%3A%20%7C%0A%7C%20**Image**%3A%20*Casio%20W-86%20/%20W86%20/%20W-86-1VQES%20%22Illuminator%22%20digital%20watch*.%20%5BMulticherry%5D%28https%3A//commons.wikimedia.org/wiki/File%3ACasio_W-86_digital_watch_electroluminescent_backlight_%28ii%29.jpg%20%22via%20Wikimedia%20Commons%22%29%20/%20%5BCC%20BY-SA%5D%28https%3A//creativecommons.org/licenses/by-sa/4.0%29%20%7C%0A%0ALets%20examine%20that%20mechanism.%20The%20%22backlight%22%20on%20those%20watches%20is%20a%20very%20simple%20green-ish%20LED%20soldered%20besides%20the%20digital%20display%2C%20powered%20by%20the%20on-board%20battery%20and%20sometimes%20a%20tiny%20little%20solar%20panel.%20If%20we%20think%20of%20that%20backlight%20and%20button%20mechanism%20as%20a%20simple%20program.%20We%20can%20observe%20a%20few%20things%2C%0A%0A*%20The%20backlight%20is%20initially%20**OFF**%0A*%20Once%20you%20press%20the%20button%20*something%20happens*%0A*%20Now%20the%20backlight%20is%20**ON**%0A%0AIn%20this%20very%20crude%20explanation%20of%20a%20backlight%2C%20ON%20and%20OFF%20are%20states.%20In%20code%2C%20you%20probably%20represent%20that%20as%20a%20variable.%0A%0A%22But%20what%20about%20this%20mutation%20thing%22%2C%20you%20ask.%0A%0AWell%2C%20in%20imperative/OO%20code%2C%20you%20are%20probably%20used%20to%20*changing*%20the%20value%20of%20variables.%20This%20is%20what%27s%20known%20as%20a%20mutation%20%28i.e.%20change%29.%20Functional%20Programming%20**strongly%20discourages**%20mutating%20state%3B%20Instead%20you%20create%20distinct%2C%20new%20states.%0A%0ASay%20you%20have%20a%20list%20of%20two%20numbers%20%28or%20array%20or%20whatever%29%20and%20now%20you%20want%20to%20add%20one%20more.%20If%20your%20list%20structure%20were%20mutable%2C%20you%20might%20append%20another%20number%20two%20it.%20In%20immutable%20land%2C%20however%2C%20you%20create%20a%20new%20list%20containing%20the%20items%20from%20your%20old%20list%20and%20one%20more.%0A%0AThe%20cool%20thing%20is%20you%20don%27t%20even%20need%20an%20inherently%20immutable%20list%20structure%2C%20you%20can%20just%20use%20JavaScript%27s%20good%20old%20Array%20type.%20To%20make%20your%20life%20easier%2C%20TC39%20people%20even%20threw%20in%20**Array.prototype.concat**.%0A%0A%60%60%60javascript%0A//%20Mutable%20code%0Alet%20itemList%20%3D%20%5B1%2C%202%5D%3B%0AmutList.push%283%29%3B%0A%0A//%20Immutable%20code%0Alet%20twoItemList%20%3D%20%5B1%2C%202%5D%3B%0Alet%20threeItemList%20%3D%20twoItemList.concat%283%29%3B%0A%60%60%60%0A%0A%0A%0AImmutability%20might%20seem%20a%20little%20counter-intuitive%20at%20first%20but%20it%20is%20one%20of%20the%20things%20that%20will%20give%20you%20the%20promised%20testability.%20%0A%0AThink%20about%20it%2C%20*itemList*%20might%20have%202%20items%20at%20one%20point%20of%20your%20code%20and%203%20at%20some%20other...%20Your%20test%20could%20be%20expecting%20it%20to%20have%20two%20items%20but%20it%20has%20three%2C%20now%20you%27re%20wondering%20where%20in%20your%20program%20life%20cycle%20it%20changed.%20Maybe%20you%20forgot%20to%20clear%20the%20junk%20from%20a%20previous%20test%3F%20Maybe%20you%20changed%20it%20on%20a%20different%20method...%20You%20have%20to%20sit%20there%20and%20figure%20that%20out.%0A%0AOn%20the%20other%20hand%2C%20*twoItemList*%20always%20has%20these%20two%20items%20and%20never%20changes%2C%20so%20if%20you%20are%20getting%20a%20test%20failed%20because%20your%20function%20returned%203%20items%20instead%20of%202%2C%20you%20know%20what%20happened.%20You%20returned%20the%20wrong%20list%20%u200B%uD83D%uDE07.%u200B%20%0A%0A%23%23%20Side%20Effects%20%28and%20pure%20functions%29%0A%0A%3E%20%20Relax%2C%20we%20are%20not%20gonna%20discuss%20pharmaceuticals.%0A%0AOne%20of%20the%20core%20tenants%20of%20FP%20is%20to%20try%20and%20avoid%20side-effects.%0A%0A%22But%2C%20what%20on%20earth%20is%20a%20side%20effect%3F%22%2C%20you%20ask.%0A%0AGlad%20you%20asked.%20A%20side%20effect%20is%20anything%20you%20do%20that%20does%20not%20involve%20your%20own%20state.%20Lets%20get%20back%20to%20this%20in%20a%20bit.%20But%20first%2C%20functions%0A%0A%23%23%23%20Functions%0A%0A%22But%20I%20already%20know%20everything%20I%20need%20to%20know%20about%20functions%22%2C%20you%20say.%0A%0ADo%20you%3F%0A%0AIn%20FP%20a%20function%20%28or%20rather%20a%20pure%20function%29%20is%20a%20piece%20of%20code%20that%20may/may%20not%20take%20something%20as%20input%20%28arguments%29%20and%20returns%20something%20and%20does%20nothing%20more.%20It%20does%20not%3A%0A%0A*%20Perform%20some%20I/O%20task%0A*%20Change%20the%20state%20of%20anything%20outside%20its%20scope%0A*%20Return%20different%20things%20for%20the%20same%20input%0A%0ASo%2C%20getting%20back%20to%20out%20Side%20Effects%20discussion%2C%20a%20side%20effect%20is%20any%20and%20all%20of%20the%20above%20discussed%20despicable%20things%20except%20the%20last%20one.%0A%0AOr%20in%20other%20words%2C%20if%20a%20function%20performs%20some%20I/O%20task%20instead%20of%20or%20in%20addition%20to%20returning%20an%20output%2C%20or%20it%20changes%20the%20global%20state%20somehow%3B%20it%20is%20said%20to%20have%20side%20effects%20and%20is%20referred%20to%20as%20an%20impure%20function*%0A%0A%3E%20A%20function%20can%20also%20be%20impure%20if%20its%20output%20is%20non-deterministic.%20That%20is%2C%20gives%20different%20output%20for%20the%20exact%20same%20input.%0A%0A%0A%0A%23%23%20That%27s%20all%20for%20today%0A%0AI%20feel%20like%20the%20above%20topics%20are%20a%20good%20enough%20indication%20of%20how%20things%20work%20in%20FP.%20We%27ll%20get%20into%20more%20details%20about%20how%20to%20do%20certain%20things%20in%20the%20next%20article.%0A%0A**Till%20then%2C%20Peace%20%u270C%uFE0F**%0A%0A%21%5BDeuces%5D%28https%3A//media.giphy.com/media/NG6dWJC9wFX2/giphy.gif%29%0A%0A&lt;/span&gt;&lt;/center&gt;&lt;div&gt;&lt;br clear=&quot;none&quot;/&gt;&lt;/div&gt;
</content>
  </entry>
  <entry xml:base="http://fa7ad.postach.io/feed.xml">
    <title type="text">Hello, Blog!</title>
    <id>https://fa7ad.postach.io/post/hello-blog</id>
    <updated>2020-01-05T05:54:53.451000Z</updated>
    <published>2020-01-05T04:55:32Z</published>
    <link href="https://fa7ad.postach.io/post/hello-blog" />
    <author>
      <name>Fahad Hossain</name>
    </author>
    <content type="html">&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Once again, I’ve switched blogging platforms.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;I’ve switched between {WordPress, Ghost, Jekyll, Medium, Hexo} and now this is Postach.io&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;So...&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Hello, World!&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Lets try to make a bunch of &quot;Hello, world&quot; programs in as many languages as I can 🙃&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Let’s start with my favourite language, JavaScript&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;console.log(&quot;Hello, world&quot;)&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Or,&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;document.write('Hello, world')&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Onto the next few language&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;C&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;#include &amp;lt;stdio.h&amp;gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;int main() {&lt;/div&gt;
&lt;div&gt;    printf(&quot;%s&quot;, &quot;Hello, world&quot;);&lt;/div&gt;
&lt;div&gt;    return 0;&lt;/div&gt;
&lt;div&gt;}&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;C++&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;#include &amp;lt;iostream&amp;gt;&lt;/div&gt;
&lt;div&gt;int main() {&lt;/div&gt;
&lt;div&gt;    std::cout &amp;lt;&amp;lt; &quot;Hello, world&quot; &amp;lt;&amp;lt; std::endl;&lt;/div&gt;
&lt;div&gt;    return 0;&lt;/div&gt;
&lt;div&gt;}&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Go&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;package main&lt;/div&gt;
&lt;div&gt;import &quot;fmt&quot;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;func main() {&lt;/div&gt;
&lt;div&gt;    fmt.Println(&quot;hello world&quot;)&lt;/div&gt;
&lt;div&gt;}&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Back to some concise syntax&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Python&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;print(&quot;Hello, world&quot;)&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Haskell&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;main::IO()&lt;/div&gt;
&lt;div&gt;main = putStrLn &quot;Hello, world&quot;&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;ReasonML&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;Js.log(&quot;Hello, world&quot;);&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Now, the piece de resistance,&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;My least favourite ones&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Java&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;public class HelloWorld {&lt;/div&gt;
&lt;div&gt;    public static void main (String[] args) {&lt;/div&gt;
&lt;div&gt;        System.out.println(&quot;Hello, world&quot;);&lt;/div&gt;
&lt;div&gt;    }&lt;/div&gt;
&lt;div&gt;}&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;C#&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;using System;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;namespace HelloWorld {&lt;/div&gt;
&lt;div&gt;    class Program {&lt;/div&gt;
&lt;div&gt;        static void Main(string[] args) {&lt;/div&gt;
&lt;div&gt;            Console.WriteLine(&quot;Hello, world&quot;);&lt;/div&gt;
&lt;div&gt;        }&lt;/div&gt;
&lt;div&gt;    }&lt;/div&gt;
&lt;div&gt;}&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;PHP&lt;/span&gt;&lt;/div&gt;&lt;pre&gt;&lt;div&gt;&amp;lt;?php&lt;/div&gt;
&lt;div&gt;echo &quot;Hello, world&quot;;&lt;/div&gt;&lt;/pre&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;That’s about all I could think of. This post is nothing but a test to see what a blog post looks like in Postach.io&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;&lt;span style=&quot;--en-markholder:true;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;Peace ✌️&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;&lt;span style=&quot;--en-markholder:true;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;&lt;img src=&quot;https://cdn-images.postach.io/bd60774b-4032-4847-980a-8fb4b77bad54/eff98a79-f6ea-46d2-8a0d-2bc05d0afae8/51a24f2a-6a3a-44f8-b6e9-547f6c0862b4.gif&quot; /&gt;&lt;div&gt;&lt;br /&gt;&lt;/div&gt;
</content>
  </entry>
</feed>
