Utility Functions

[00:00:00]
>> So we've talked about domain models and the role that that plays in, I think, really being kind of the Genesis of everything that we are going to build off of in terms of our application. And so the next extension of this is we're going to revisit our previous initial primer exercise, and we're going to talk about string manipulation.

[00:00:28]
And so what I wanna do is, we'll just step out of the slides, because there was only one, and I want to look at just a piece of code. This is from one of the examples. So if you have any questions of what this is, I think this might be the red stack example.

[00:00:49]
But more so, I wanted to just pull up a piece of functional code and just point out a couple things. So, this is operating on top of the course entity, and so you'll notice here we have Course with a capital C. Then we have Courses plural with a capital C, then we have courses lowercase.

[00:01:20]
And if we keep going down, you'll see here that we have this interesting typed parameter, of course, lowercase, colon Course uppercase. And if we scroll down, I'm looking for something specific here. You'll see here that we have uppercase, so in the case of a constant and, There's one more I was looking for, If I can't find it, I'm not going to cry for Argentina.

[00:01:55]
But the idea is that when you are puling out pieces of a template, one of the biggest challenges that you're going to have when you're hydrating it is coming up with model name variations. And so this is why in the primer, we went ahead and we experimented with some ways to replace some strings, build a couple different things.

[00:02:30]
And one thing that I do wanna call out here is that if you go to Lodash, and I would say that what you're going to see any competent string manipulation library. In fact, a lot of it's even baked into a lot of just languages itself is going to have these functions baked into them.

[00:02:56]
But with that said, for instance, if we go to Lodash, they have and I might have passed it, they have an entire section for strings. So camelCase, well, this is something we use. Capitalize, kebabCase, lowerCase, and on and on. What I believe, this is just a recommendation from me to you, hashtag pro tip, is that, I think and I highly recommend, if you're using a library, experiment with building a version of that.

[00:03:36]
So I think one of the best examples is if you use redux, take the time to build redux, do it at least once. And what you'll realize is that you can build a version of Redux in less than ten minutes. But what that does is it gives you a much clearer sense of what's happening under the hood.

[00:03:59]
And I think to a point, almost I think the essence of the pattern suddenly becomes a lot clearer. The other piece is that if you only need four or five functions, a lot of times it's easier just to write those and segment them out instead of pulling in an entire library.

[00:04:21]
So I have nothing against Lodash, in fact, I think that I actually use it in various circumstances. But in the case of this context, in this exercise, that we are doing what somebody would rightfully conclude that, well, can't you do this in Lodash? And the answer is yes but it is important, I believe, to take the time to go ahead and write some of these things initially.

[00:04:54]
So that once you understand it, then you can leverage it in an automated fashion. So I've said this before, if you're using a CLI, don't let that be a crutch and a barrier between you truly learning what's happening. So again, we don't need to learn more, we need to understand what we already know.

[00:05:15]
So, if we go to this example in our stack blitz, so this is gonna be rad hyphen name, hyphen generator, hyphen start. We are going to see the bits and pieces that we started in the previous exercise. So we have, replace, stripDashes, stripUnderscores, stripSpaces, addDashes, addUnderscores. And these all are entirely built upon this replace function here, which is it takes a string, a target, a character, and a sub character, and it's just splitting and joining it together.

[00:05:57]
But notice here that I have five incredibly useful functions that are just delegating to an underlying more general function. And if you really wanted to get fancy, you could do partial application. I'm not gonna get into that because it would take me 20 minutes to explain it. But we have a very basic function and we are drilling down in terms of specificity but just delegating from one function into another.

[00:06:33]
A few other functions that I have here that I'll just call out. If I wanna lowercase something, it's just s toLowerCase toUpperCase as well as capitalize, decapitalize. All I'm doing there is I'm saying, give me the first character and I wanna uppercase it and then I wanna take everything after the first character and just add it together.

[00:06:56]
And if we wanted to capitalize an entire string, we would split on space, then map over that array. We know what this is, capitalize the first letters and then put it back together in terms of spaces. So we had a number of words that were all lowercase. You could call this function, it would split on the space, loop over, capitalize all the words and then put it back together.

[00:07:22]
And this is super handy and it's most of these, well, all of these are basically a single line of code. Now the one thing that I do wanna call out or I want to just point out here is that JavaScript is a lisp in Java's clothing. So under the hood, even with TypeScript, that it looks like a traditional classical language and we have types, classes, private, public members, etc.

[00:07:58]
But under the hood, it is a lisp, it was written to be a lisp because lisps are very easy languages in terms of compilers to create. So this is what Brendan Eich did. But because of marketing reasons, it became JavaScript. But with that said is it lends itself to functional programming principles and I'm not gonna get into that.

[00:08:23]
FrontEnd Masters has a ton of amazing functional JavaScript concepts. I will not do justice to anything that Brian Lonsdorf or Will Sentance or any of those amazing structures would have but I have two functions here that I am leveraging. So one is a pipe function that takes in two parameters and it returns a new function that accepts arguments, and then whatever these two functions are, it will then call them.

[00:08:57]
And so it's basically taking two functions, calling one inside of the other. And then we have a wrapper function that allows us to then pass in a number of functions as parameters. And then we're looping over and we're essentially iterating over that chain of functions. So this is pretty hardcore functional stuff but what this allows us to do is create these transformation pipes.

[00:09:25]
So for instance, if I wanted to strip a string with dashes and underscores, I simply create a function called strip. And then I define that as transformPipe, stripDashes stripUnderscores. Now where this gets interesting, is that what if I wanted to do start case, so basically this title case where everything is capitalized, the first letter.

[00:09:49]
I would strip everything of underscores and dashes, and then I would capitalize everything. Well, what if I wanted to do pascalCase? So that's essentially everything is capitalized and then it's put together, so the spaces are removed. Well, I would essentially turn it into startCase and then I would strip the spaces.

[00:10:12]
What if I wanted to do camelCase? So the difference between pascalCase and camelCase is the first letter is lowercase. So I would say, turn this into pascalCase, which is gonna say, okay, well I'm gonna turn this into startCase but then I'm gonna strip it first. Both camelCase and so pascalCase and then it decapitalizes the first letter.

[00:10:34]
So this is why a lot of times you'll see something that looks like this, so let's say we had user courses. Is this is a camelCase and this is pascalCase, so all we're doing is just making this lowercase. And then we have snakeCase, kebabCase and constantCase, and all we're doing is we're taking these small little functions.

[00:11:02]
And we're transforming them into these pipes that we're able to send whatever we want into it. And it's just passing it from one function to another. But under the hood, we have these very simple, single purpose, fine grained functions. So functional programming for the win.