Untitled

<!DOCTYPE html>
<html>

  <head>
     <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="script.js"></script>
  </body>

</html>

const { Map, List } = Immutable

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

Sum.empty = () => Sum(0)
// -----------------------------

const res1 = [Sum(1),Sum(2),Sum(3)]
            .reduce((acc, x) => acc.concat(x), Sum.empty())

const res2 = Map({brian: 10, sara: 2})
            .map(Sum)
            .fold(Sum.empty())

const res3 = List.of(1,2,3)
            .foldMap(Sum, Sum.empty())

console.log("result 1: ", res1.inspect());
console.log("result 2: ", res2.inspect())
console.log("result 3: ", res3.inspect())