3.3 Currying Functions

In the previous lesson, we finally started implementing our code for generating DOM objects. And we are off to a very good start. We can create our HTML elements. We can also set CSS classes to them using a very good methodology of function composition. The only thing I don't like is how we had to implement addClass. Because the compose function needs functions in order to work. It's going to call those functions and pass in the appropriate data. So we need to create a more specialized function. So that we could specify the CSS class that we wanted to apply to the element. Then we had a function that actually performed the work. And while this approach obviously works, I don't like it, because I just want to write a normal function. One that accepts the information that we need, does the work that we need for it to do, and nothing else. And we can actually do this with a process called currying. And this might take a little bit of time to wrap your head around, it certainly did for me. But really it's very simple, we will use Ramda to curry our function. And this is going to create one of those specialized functions. Just like what we did with that greet function, we could curry this if we wanted to, so that our greet would actually look halfway normal. So we'd have the salutation which I just misspelled, and then the firstName, and then we would do the actual work there. And the great thing about currying is that it creates a function for essentially every parameter. So if we needed to, we could create specialized functions based upon any of the parameters that we provide. So let's first of all assign this to append. And now we have a function that we can pass in the node that we want to append to. We could also pass in the element if we wanted. But we could create a new function by just passing in node, then we could pass in the element to append that node to. And it might be a little more clear if we have something that's a little bit easier to understand. Let's call this attr, short for attribute. And so we will curry this function, it's going to have the attributeName, it's going to have the attributeValue. And it's going to have the element that we want to set this attribute on. So that the code is going to be very simple. We will setAttribute, we will have the attributeName as the first argument. We will set that to the attributeValue, and then we will simply return element. And so this gives us a function that we could do several things with. If we know that we wanted to set an attribute called dataId. So we can have dataId, or rather let's do this setDataId =. We would call the attribute function, our attribute name would be data-id. And then this would give us another function that we could call to setDataId to the value that we needed. And then we could also supply the element. Or if we needed to supply the same data-id to multiple elements, which I don't know why we would need to. But we could do this, so that then we could call setOne, pass in the element. That would then set the data-id attribute equal to 1 on the provided element. So it's a very, very powerful feature. And it allows us to write just normal functions without having to worry about returning other functions. So we can rewrite this addClass like this. We will call curry, and then we will pass in just a normal function that accepts the className and the element. So that's inside of the function, we just set the classList to include that new class. And then we return the element. Now returning element is very important here. If we did not return the element, we would not be able to use that in our composition. Because compose is going to take our div element, it's gonna pass it to this first addClass with p-2. Then it's going to take the result of that function, pass it to this addClass. Then it's going to take that result, pass it to the attribute function so that we can set a data-message =, well, whatever we want. And then we can append some data to it. For example, let's have a text node that will simply have an Our Message, and of course we need to write that text function. So let's quickly do that. All we are going to do is create a text node, and we will pass in the provided content. And there we go. Now of course in order for this to work, we need to move this after these definitions. But when that's done, we should be able to go to the browser, and there we go. We have our div element, the p-2 and bg-light classes are applied. The data-message attribute is also applied, and then our content. So everything is right there. And we have nice clean code that is relatively easy to understand once you understand how curry and compose work. And so now let's wrap this in a function called message, where we will accept the content. And we will simply return the result of this composition. And of course let's change the value of this data-message. Let's use our content value. We also wanna pass content to our text node. So that's now if we wanted to, we could call message. And then this is some text, so that we can see that in the browser. There is our element. If we look in the markup we have once again, CSS classes, our attribute value, and then of course our content. So now that we have a way of generating content and adding that to our document, we need to get some of the nuts and bolts working. And we will get started with that in the next lesson.