Inspect Values being Produced in Curried JavaScript Functions
Combining functions together can be an incredibly powerful technique. When one (or more) of these functions contains a bug, it can open up a rabbit-hole of debugging in order to find out where the problem is coming from.
To combat this from happening, we'll create a utility function, trace, which will allow us to inspect the values being produced at different points in time as functions are being called.
Instructor: [00:00] On this page, we have a few functions that perform some sort of transformation to a number. Below this, we see these functions being used inside this composed function. Now, this is just a curry function, which takes an array of functions as well as an initial value.
[00:19] In our case, this initial value is 4. If we run this script and everything goes correctly, we should see 21 print out. Obviously, 266 isn't our desired value, which means that there's an error in one of these functions that's being executed. Now, when working with a function chain like this, pinpointing errors can often be difficult. Luckily for us, we can create a function that will print out the value at a given point in time when this function runs.
[00:53] The trace function is also a curried function. It's going to take a label and return a value. We can then use template strings to interpolate these values and print them to our console via console.log. The last thing we need to do is return this value parameter. If we forget to do this, then any preceding function will not receive the value needed to perform that function's transformation.
[01:27] Now that trace is ready to go, we can add it to our code like so. As you can see, I'm passing in a label as a string value which will specify when this function is executing. Since we're working with a curried function, the value portion will be passed through to trace automatically.
[01:47] Now, if I run this code again, we'll see that the results of each function are being printed out to us. At first glance, I see that the doubled function isn't returning 32, but rather 256. Thanks to trace, we can easily head right to the doubled function and find out that it's using the exponent operator when it actually should just be using the multiplication operator.
[02:14] Now that that's fixed, let's run this code again. Now taking a look at our console, we'll see that the afterDoubled function is indeed printing out 32.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!