https://egghead.io/lessons/javascript-semigroup-examples

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>
    <script src="https://unpkg.com/immutable-ext@1.0.8/browser_dist/index.js"></script>
    
  </head>
  
  <body>
    <!-- // make console.log write to the page for better in-browser experience -->
    <script>
      (function () {
    var body = document.querySelector('body');
    body.style['fontFamily'] = 'monospace';
    body.style['fontSize'] = '2em';
    console.log = function (string, x) { body.innerText += string += x + '\n'; };
    }());
  </script>
    <script src="lib/script.js"></script>
  </body>
</html>

/* Add your styles here */

const {List, Map} = Immutable;

const Sum = x =>
({
  x,
  concat: ({x: y}) =>
    Sum(x + y),
  inspect: () =>
    `Sum(${x})`
})

const All = x =>
({
  x,
  concat: ({x: y}) =>
    All(x && y),
  inspect: () =>
    `All(${x})`
})

const First = x =>
({
  x,
  concat: _ =>
    First(x),
  inspect: () =>
    `First(${x})`
})

const acct1 = Map({ name: First('Nico'), isPaid: All(true), points: Sum(10), friends: ['Franklin'] })

const acct2 = Map({ name: First('Nico'), isPaid: All(false), points: Sum(2), friends: ['Gatsby'] })

const res = acct1.concat(acct2)

// Showing results
console.log("Friend 1: ", res.toJS().friends[0]) 
console.log("Friend 2: ", res.toJS().friends[1])
console.log("isPaid: ", res.toJS().isPaid.x)
console.log("Name: ", res.toJS().name.x)
console.log("Points: ", res.toJS().points.x)