Debug Functional Compositions with a Logging Side Effect in JavaScript

InstructorKyle Shevlin

Share this video with your friends

Send Tweet

Functional compositions are purposely opaque, with no obvious way to "visualize" the data as it transforms. This is great when our function works, as it's hard to add bugs, but challenging when our compositions aren't correct. This lesson teaches you how to debug functional compositions by writing and using a trace() function to log out our values as they transform. This allows us to continue using pointfree programming while also providing a view into our compositions.

Haroen Viaene
~ 5 years ago

In the last example, why is the root map wrapped in a compose?

Kyle Shevlininstructor
~ 5 years ago

Hey Haroen, you are correct that the final output could be refactored one step further by removing the outer compose since we're only passing one argument to compose. In truth, it just didn't occur to me at the time to take it that one step further. Fortunately, there's nothing mathematically invalid about having a redundant compose this way. Good catch.

Now, just to be clear to others, if they didn't understand what took place in that final step, because our composition was three maps over individual functions, we could compose those individual functions into a new function and pass that into a single map.

So what starts as:

const slugify = compose(
  map(join('-')),
  map(split(' ')),
  map(lowerCase)
)

Can be:

const slugify = map(compose(join('-'), split(' '), lowerCase))
Haroen Viaene
~ 5 years ago

Thanks, that makes sense!

Agustin Quintanilla
~ 5 years ago

Thanks so much Kyle, this was a nice and comprehensive course At this point, if you guys want to know a little more about functional programming I recomend you the free book 'Mostly adequate guide to FP (in javascript)' https://github.com/MostlyAdequate/mostly-adequate-guide

Hakan Karaduman
~ 5 years ago

Hi Kyle, very helpful course, can you explain what is the feature you used as (console.log(msg, x), x) . Why does this returns the x after comma?

Florian
~ 5 years ago

Hey Hakan, good question I was also wondering, check out this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

Kostiantyn Hryshyn
~ 5 years ago

Hi Kyle, very helpful course, can you explain what is the feature you used as (console.log(msg, x), x) . Why does this returns the x after comma?

Hi Hakan, we need "x" param after console.log to pass forward "x" value through the composition since the console.log just log the value and nothing to return

Hakan Karaduman
~ 5 years ago

Hey Hakan, good question I was also wondering, check out this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator

Hi Hakan, we need "x" param after console.log to pass forward "x" value through the composition since the console.log just log the value and nothing to return

Thanks Kostiantyn and Florian, didn't know about this comma operator.

martin sundvall
~ 5 years ago

Thanks Kyle! Really a good explanation of how to use functional programming. I have read a lot about it, and this goes from theory into practice. It would be great to see more, like examples of implementation in a web app.

Simran
~ 5 years ago

Thoroughly enjoyed the course. Every example was simple, very clean and easy to understand. Comma operator and point-free programming were two interesting things that I learned apart from the core JS functional concepts! Loved it.