kyleshevlin/egghead-intro-to-fp-in-js: An introduction to functional programming in JavaScript for Egghead.io

<!doctype html>

<html>
  <body>
    <script>
        // Allows Plunker to display logs in preview panel 
        // for better in-browser experience
        var originalConsoleLog = console.log
        console.log = function () {
          originalConsoleLog.apply(console, arguments)
          var args = Array.prototype.slice.call(arguments);
          var stringifiedArgs = args.join(' ') + '\n';
          var newDiv = document.createElement("div"); 
          var newContent = document.createTextNode(stringifiedArgs); 
          newDiv.appendChild(newContent);
          document.body.appendChild(newDiv)
          
          document.querySelector('div').style['fontFamily'] = 'monospace';
          document.querySelector('div').style['fontSize'] = '1.5em';
        };
    </script>
    <script src="index.js"></script>
  </body>
</html>

// Functional composition like you learned in math class
const f = x => x + 1
const g = x => x * 2
const x = 3

const result1 = f(g(x)) // 7

console.log(result1)

// Slightly more useful functions
const scream = str => str.toUpperCase()
const exclaim = str => `${str}!`
const repeat = str => `${str} ${str}`

const string = 'Egghead.io is awesome'

// Nested
const result2 = repeat(exclaim(scream(string)))
// EGGHEAD.IO IS AWESOME! EGGHEAD.IO IS AWESOME!

const compose = (...fns) => x =>
  fns.reduceRight((acc, fn) => fn(acc), x)

// Instead of nesting, compose your functions into a new function
const enhance = compose(repeat, exclaim, scream)

console.log(enhance(string))
// EGGHEAD.IO IS AWESOME! EGGHEAD.IO IS AWESOME!