Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 971 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Debug Function Compositions with Ramda's Tap Function

2:48 JavaScript lesson by

Functional composition is a great way to write declarative code that reads well. But sometimes, you need to get insight into what's happening at different steps in your composition. This is where tap comes in. With tap, we can run code that generates side-effects, like logging to the console, and our data will continue to be passed along, untouched.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Functional composition is a great way to write declarative code that reads well. But sometimes, you need to get insight into what's happening at different steps in your composition. This is where tap comes in. With tap, we can run code that generates side-effects, like logging to the console, and our data will continue to be passed along, untouched.

I have this composition that takes in a string, passes it through a series of function to transform the data into an object. If I run this in the terminal, we'll see that it takes that string and it outputs an object with each of our properties and their values.

Now if I want to debug this code, or I need to understand what's happening at a step somewhere in the middle of a composition, Ramda gives us a function called tap which we can use to basically create side effects without interrupting the flow of an existing composition.

I'm going to come up here where I'm destructuring, and I'm going to add the tap function from Ramda, and then I'm going to come down here and I'm going to new line all the steps in this composition, just so it's easier to follow.

Tap is going to accept a function, and it's going to return a function that will take an argument, execute our function that we pass into tap on that argument, and then return the argument as is.

This allows us to do things like come in here and we want to figure out what happened after the split, I can use tap and I can pass a console.log, so it will take whatever value we get after running tails and split, pass it in here, log it out, and then return that value.

Map will still get the augment it was getting before we added this tap in the middle. If I save this, and I jump into the terminal, and I run this again, we should get an additional log.

The second log here is our end result. This first log is what we're getting after running tail and then split. We can see we get this array of strings where we have the property, the equal sign, and the value.

If we want to take a look at what happens between the map and fromPairs, we can use this again with tap console.log, throw that comma in there, and run this again. We'll get three logs this time. This is after the split, this is after the map but right before fromPairs, and this is our end result.

Since throwing logs in the middle of a composition is pretty common when you need to debug, I like to take this and I'm going to cut this out of here, and I'm just going to create a new function, I'm going to call log.

I'm going to set that to equal my tap with console.log, then I can come down here and I can tighten this up a little bit, by just replacing these with log. We can throw one in after tail if we want to see each step in the process.

If I jump in the terminal and I run this again, we should get a bunch of logs. We'll see our string without the question mark as a result of running tail, followed by the result of split, followed by the result of running map with our inner split, and then the end result, because fromPairs is what's going to come out the other side.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?