5.3 Method Chaining - Video Tutorials & Practice Problems

<v Instructor>In this section,</v> we'll start developing the palindrome theme that we'll be using throughout the rest of this tutorial. Palindromes are strings that are the same forwards and backwards, and they represent a nice intermediate level problem that also allows us to get more and more sophisticated as our understanding of JavaScript grows. So the simplest possible palindrome is just a string that's literally the same forwards and backwards. For example, node, I can do this. Consider, for example, the string racecar, like that. It's literally the same letter by letter forwards and backwards. So what we want to do is define a function called palindrome that will return true if a string is equal to its own reverse. Something like this. String triple equals reverse of string. Does this work? It does not because JavaScript doesn't have a reverse function. There's no native way to reverse a string. Luckily, though, there is a way to reverse an array. For example, here's a numerical array. We've seen this one before. We can reverse it in place, like this. We saw this in the section on arrays. We also learned when we talked about splitting that there's a way to split a string into its component characters, like this. And split on the empty string. Which means we can reverse this using a technique called method chaining, where we have more than one method called in a sequence. Of course, this is the same, so you can't tell that it's reversed, but this is a good indication that we're well on our way to making a palindrome tester. Let's put in a capital R. So now you can see that the capital R is at the end of the array instead of the beginning. So then the final step is to use the join method to join this on the empty string, like this. All right, what we're going to do now is define a reverse function, like the one that we tried to use here, and then define a palindrome function that does this test. And for convenience, we'll do it in a file called palindrome.js. Open it up here, and let's put it in a documentation comment describing the purpose of the function. This reverses a string. And we'll just call the function reverse. It's the one we wanted. And then it has a string argument. And let's go over to the REPL and just copy what we did. It's the string.split.reverse.join, split on empty string reverse on nothing, join on the empty string like this, except instead of racecar, the string literal will be the argument, and we want to return it. All right, let's test this out. There's a way to do this in the REPL. There's a function called load that for reasons unknown to me, you have to call with a dot preceding it. Dot load and then just the name of the file. So what this does is actually just runs every line in the file. This can be inconvenient for longer files, and it also pollutes the up arrow, which is annoying. But this is the best we can do. This is yet another indication that JavaScript has these weird origins inside a browser. In order to have a more convenient way of including one file into another, we have to use Node packages, which we'll talk about in the next chapter. But for now, this is good enough. Let's see if our reverse function works. Looking good. Now we can test for a palindrome the way we saw before. We can do something like this. That's true, and then if we try it with a capital letter, it should be false. As you might guess, we actually would like this one to be true, as well, but that's okay. This is a great start. Let's go into our file and define a palindrome function. This is a boolean. We'll take in a string and then we'll just return true if the string is equal to its own reverse and false otherwise, and we can just return the result of the boolean test like this. String triple equals reverse of string. Let's load that and see if it works. Looking good. This one should be false. Excellent. Now, as I just mentioned, it would be nice to define a more flexible palindrome function that returns true even if the word isn't literally a palindrome. This will be our first step toward detecting more complicated palindrome, things that have spaces and punctuation, like, "A man, a plan, a canal, Panama." That's where we're going with this eventually. Our first step is just to identify this as a palindrome, and the simplest way to do that is just to convert this to all lowercase before doing the comparison. So let's go back here. Eventually this will get more complicated, and so in anticipation of just a generic idea of a processed content, we're gonna create a new variable called processedContent. For now, though, it's just gonna involve toLowerCase. So now we wanna say is the processed content equal to its own reverse. All right, I'm doing up arrow here just out of habit, but remember .load actually puts all of the file content into this REPL, so it's actually a lot faster just to retype it. It's annoying. But it worked. And now we can do palindrome of Racecar with a capital R. That's true because once we downcase this... Oops, let's do this here. Right, that is just racecar, and it's literally the same forwards and backwards. We can even detect something like this. "Able was I ere I saw Elba." That's a palindrome. Usually it's written with some punctuation, though, something like this, so that'll give us false. But eventually we'll be able to detect this and we'll identify it as a palindrome by ignoring anything that isn't a letter. It's also a good idea to verify that it gives us false for something that isn't a palindrome, as required. I would like to mention one caveat, which is that this reverse function works fine for regular letters, but more complicated things like emoji break it. So for example, suppose we define a string like this. This is a famous sentence in English that contains every letter in the standard English alphabet. We can reverse it and it works just fine. But suppose we were to replace the fox and the dog with the corresponding emoji. Here I am at Emojipedia to look at fox. There's a fox face. Copy that and put it in here. And let's look up a dog, too. Let's do the dog face just in parallel with the fox face. Something weird going on here. I don't know what happened there. The quick brown fox jumps over the lazy dog. Ah, that worked. You can see weird things happen with emoji, and I don't know why these question marks are appearing like this when they appear just fine here. That's probably 'cause I pasted them in from the buffer. But in any case, you can actually see there are two things, like question mark, question mark. That's a hint. If I do reverse of this, like this, aha, those question marks reappear. And we can't in fact do a palindrome test, at least not a functional one, on a string that contains emoji because we can't reverse it properly. And the reason for this is because of the way that we split it. If you do this, you can see that there are these question marks. What's happening here is that each emoji is actually essentially two letter equivalents, and splitting on the empty string splits it into two pieces. What we really want is a way to make an array from a string in a way that preserves these emoji. Happily, the array object supplies exactly the method we need, something called from. Like that. You can see now the fox and the dog emoji worked fine. So we'll go here and say instead of string.split on the empty string, we'll say array.from string.reverse, et cetera, and save that and load it. So now we have a reverse function that can handle all kinds of characters, including emojis.