Check out a free preview of the full Rapid Application Development with Code Generation course

The "String Manipulation" Lesson is part of the full, Rapid Application Development with Code Generation course featured in this preview video. Here's what you'd learn in this lesson:

Lukas discusses the various functions used for string manipulation, including Array.split, Array.join, Array.map, and Array.reduce. A code example walkthrough of using .split and .join to manipulate strings is also provided in this segment.

Preview
Close

Transcript from the "String Manipulation" Lesson

[00:00:00]
>> And now for our first module, the primer, I wanna ask a question, what is code? There are a few ways that you could answer this. And I think depending on your vantage point, you would be correct more than likely. But for instance, if I asked you just to give you a hint of how I'm thinking about this, if I said what is a computer?

[00:00:34]
Well, somebody could say well that's a device that you basically can interact with and do meaningful things. And I would say you're correct, but what is a computer? In the most basic, absolute basic sense, a computer is nothing more than a bunch of switches that turn on or off.

[00:00:57]
And so it's the kind of quantum level, if you will, especially now. When you think about computers and you go beneath kind of the hardware and the software, what you have is a bunch of switches turning on and off. And so, when we think about that in terms of code, what is code?

[00:01:22]
Well, the answer is, it's characters. It's a string of characters, it's a bunch of strings, and so when we look at JavaScript, Java, Python, Go, Rust whatever. You are writing text entering in characters to create strings that then get interpreted by your compiler, by your run time to do something meaningful, but under the hood.

[00:01:58]
When we start from the vantage point of code is nothing more than strings. This allows us to start taking a much broader, more kind of generic approach to how we think about any code as a whole. And so with that said, we are going to step through a few very, very basic JavaScript functions.

[00:02:26]
So the question is how much do you need to know to be rapid to be read? Well, my approximation is there's a couple functions that it's helpful to know that we'll talk about. And what we're going to do is we're going to just start to assemble these into kind of interesting ways that does interesting things.

[00:02:52]
But most of what I'm doing here, I would say it most is level 200 JavaScript. So for instance, if I wanted to replace a character in a string, how would we do that? Well, the easiest way, and I think in a lot of cases, the most performant way is with Array.split and Array.join.

[00:03:20]
So I'll save the slide for, when my seven-year-old wants to learn how to program, but, imagine we have a train. And we go train.split, on this particular car. What do we have? Well, now we no longer have a train, we just have some individual cars here. But then I can join them back together with this flat car.

[00:03:49]
And so what do we have now? We have a new train that is now joined by flat cars, so train.split, train.join, so you are already well on your way to being read. The next one array.map and so on array.map is pretty fantastic in that we take an array or a collection of something.

[00:04:21]
We iterate over it and we perform an operation, so imagine you have a bunch of hanging shirts and you want to map over them, and you want to fold. And so now at the end of this you have a new array of folded shirts, so you take one collection you transform it into a new collection, this is level 100 stuff.

[00:04:45]
And probably one of my all-time favorites is array.reduce, and we're going to use this one really heavily. So imagine you have a bunch of strands and you want to reduce them or combine them into a single rope. And so strings that reduce, and we're just introducing individual strands intertwining it into the rope.

[00:05:13]
And when it's all said and done instead of having, in this case five strands, we have one rope. So in the context of where we're going, imagine you have five code snippets. We can reduce that into a single code snippet. And so let's see what this looks like in code, so this is the primmer.

[00:05:43]
And we're going to go into the rapid primer start. So you can go to this URL here or if you are on the GitHub page, you can just click on that rapid primer start. All right, so the first thing we wanna do is I have a title, how can we remove spaces in a string?

[00:06:12]
Well, how we can do this is if you remember, we have using array.join, array.split, array.join. We can go remove spaces, so we're just going to create a new function. That's going to take a string, and we're just going to go string split. And up at the top here, I have just went ahead and taken these basic characters, created constants for them, so that we're not doing magic strings.

[00:06:47]
And we're just gonna go space.join and empty, and so now this will take in turn this into, this is kind of a quasi Pascall case, but what I can do, remove space and pass in the title. So, super, super basic, but let's go and just put this in here, and we're gonna, so you see here, we remove the spaces.

[00:07:31]
Now the next question is how can we replace a space with a different character in a string? So we want to replace this space with something else, so we'll go const replace, space, and let's go ahead we'll go with sub, so this is what we want to substitute our space with and so, splits, space.

[00:08:06]
Join sub, okay, and let's go with const SnakeCase. And so in this case, what we want to do is we want to replace the space with an underscore. So we'll save this, let's go down and paste this in. And so now you can see that, not true SnakeCase because, it's uppercase but, I think we get the idea.

[00:08:43]
Now let's do one more extension of this, what if we want to replace any character with a different character? And so we're going very, very small here and incrementing on this, but I wanna illustrate almost comically this iterative thought process. So now, we're just gonna go replace, and we'll go s for string, we'll go targ for targ, sub and then we're going to go s split, targ, join, sub.

[00:09:20]
And let's go ahead and what I'd like to do is go and let's go kabob case. And we are going to replace, In this case let's go we'll pass in SnakeCase and we want to replace the underscore with a hyphen, okay? And here we go, so now we've done some very, basic string manipulation which is going to prove to be really really, really important in a little bit.

[00:10:13]
So on one hand it's like if the question is like, can I do this? If this make sense and I hope it does. This is very basic JavaScript we can build on this ideas and we are going to go somewhere pretty neat with this

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now