Composing Software - book by Eric Elliott

xholonWorkbook.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--Xholon Workbook http://www.primordion.com/Xholon/gwt/ MIT License, Copyright (C) Ken Webb, Sun Nov 22 2020 20:02:01 GMT-0500 (Eastern Standard Time)-->
<XholonWorkbook>

<Notes><![CDATA[
Xholon
------
Title: Composing Software - book by Eric Elliott
Description: 
Url: http://www.primordion.com/Xholon/gwt/
InternalName: a04c9996f8022184ecbb70b28983bf47
Keywords: 

My Notes
--------
November 20, 2020

http://127.0.0.1:8080/war/Xholon.html?app=Composing+Software+-+book+by+Eric+Elliott&src=lstr&gui=clsc
http://127.0.0.1:8080/war/Xholon.html?app=Composing+Software+-+book+by+Eric+Elliott&src=lstr&gui=clsc&jslib=xhFunctionalApi,ramda.min

References
----------
(1) Eric Elliott, Composing Software, 2017-2020 (printed copy)
    An Exploration of Functional Programming and Object Composition in JavaScript

(2) https://medium.com/javascript-scene/composing-software-an-introduction-27b72500d6ea
    book: p. 3+

(3) https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976
    book: Pure Functions, p. 29+

]]></Notes>  

<_-.XholonClass>
  <PhysicalSystem/>
  
  <Page superClass="script"/>
  
</_-.XholonClass>

<xholonClassDetails>
  
</xholonClassDetails>

<PhysicalSystem>
  
  <Page roleName="p10 Mixin">
    this.println(this.role())
    const a = {a: "a"}
    //console.log(...a) // Uncaught TypeError: a is not iterable
    console.log({...a}) // OK
    const b = {b: "b"}
    const c = {...a, ...b} // this does work
    this.println(JSON.stringify(c, null, 2))
    console.log(a, b, c)
    console.log({...c})
    
    var node = this.parent()
    console.log({...node})
    var nodee = {...node}
    console.log(nodee)
    
    console.log({...node, ...c})
  </Page>
  
  <Page roleName="p33 Cart Impure">
    this.println(this.role())
    // impure addToCart mutates existing cart
    const addToCart = (cart, item, quantity) =&gt; {
      cart.items.push({
        item,
        quantity
      });
      return cart;
    };
    
    const originalCart = {
      items: []
    };
    
    const newCart = addToCart(
      originalCart,
      {
        name: "Digital SLR Camera",
        price: '1495'
      },
      1
    );
    
    console.log(JSON.stringify(originalCart, undefined, 2));
  </Page>
  
  <Page roleName="p35 Cart Pure">
    this.println(this.role())
    // impure addToCart mutates existing cart
    const addToCart = (cart, item, quantity) =&gt; {
      return {
        ...cart,
        items: cart.items.concat([{
          item,
          quantity
        }]),
      };
    };
    
    const originalCart = {
      items: []
    };
    
    const newCart = addToCart(
      originalCart,
      {
        name: "Digital SLR Camera",
        price: '1495'
      },
      1
    );
    
    console.log(JSON.stringify(originalCart, undefined, 2));
    console.log(JSON.stringify(newCart, undefined, 2));
  </Page>
  
  <Page roleName="p61 Higher Order Functions 4-letter">
    this.println(this.role())
    
    const censor = words =&gt; {
      const filtered = [];
      for (let i = 0, {length} = words; i &lt; length; i++ ) {
        const word = words[i];
        if (word.length !== 4) {
          filtered.push(word);
        }
      }
      return filtered;
    }
    
    const censored = censor(['oops', 'gasp', 'shout', 'sun', 'house']);
    this.println(censored)
  </Page>
  
  <Page roleName="p61 Higher Order Functions begin-with-s">
    this.println(this.role())
    
    const censor = words =&gt; {
      const filtered = [];
      for (let i = 0, {length} = words; i &lt; length; i++ ) {
        const word = words[i];
        if (word.startsWith('s')) {
          filtered.push(word);
        }
      }
      return filtered;
    }
    
    const censored = censor(['oops', 'gasp', 'shout', 'sun', 'house']);
    this.println(censored)
  </Page>
  
  <Page roleName="p62+ Higher Order Functions with-reducer">
    this.println(this.role())
    
    const reduce = (reducer, initial, arr) =&gt; {
      // shared
      let acc = initial;
      for (let i = 0, {length} = arr; i &lt; length; i++) {
        // unique
        acc = reducer(acc, arr[i]);
      }
      // shared
      return acc;
    }
    
    const filter = (fn, arr ) =&gt;
      reduce((acc, curr) =&gt; fn(curr) ? acc.concat([curr]) : acc, [], arr)
    
    const censor = words =&gt; filter( word =&gt; word.length !== 4, words)
    const startsWithS = words =&gt; filter( word =&gt; word.startsWith('s'), words)
    
    this.println(censor(['oops', 'gasp', 'shout', 'sun', 'house']))
    this.println(startsWithS(['oops', 'gasp', 'shout', 'sun', 'house']))
  </Page>
  
  <Page roleName="p90+ Stack ADT Example">
    // this is not a very good example
    this.println(this.role())
    
    const stack = (...items) => [...items];
    
    const push = (item, stack) => stack.concat([item]);
    
    const pop = stack => {
      const newStack = stack.slice(0);
      const item = newStack.pop();
      return [item, newStack];
    }
    
    var stck = stack('STACK');
    console.log(stck);
    const a = 'a';
    const b = 'b'
    stck = push(a, stck);
    console.log(stck);
    console.log(pop(pop(stck)[1]));
    console.log(push(b, pop(pop(stck)[1])[1]));
  </Page>

</PhysicalSystem>

<SvgClient><Attribute_String roleName="svgUri"><![CDATA[data:image/svg+xml,
<svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Page1</title>
    <rect id="PhysicalSystem/Page[1]" fill="#98FB98" height="50" width="50" x="25" y="0"/>
    <g>
      <title>Page2</title>
      <rect id="PhysicalSystem/Page[2]" fill="#6AB06A" height="50" width="10" x="80" y="0"/>
    </g>
  </g>
</svg>
]]></Attribute_String><Attribute_String roleName="setup">${MODELNAME_DEFAULT},${SVGURI_DEFAULT}</Attribute_String></SvgClient>

</XholonWorkbook>