3.4 More Array Methods - Video Tutorials & Practice Problems

<v Instructor>Let's take a look at some more array methods.</v> As you might expect there is a lot of documentation on JavaScript arrays. Let's take a look at it. All right so here is the Mozilla Developer Network documentation on array. Let's take a look at this here. Remember we talked about a string includes method that tests for substrings inside of a given string. Well, array has the same thing. Works the same way. Let's look at what a is, just to remember. You can define this if you have since shut down node and restarted it, but let's take a look at a.includes. So the question is a.includes 42? It does. What about the string foo? Nope. One of the most common tasks with arrays is sorting them. Let's take a look at that. Can sort. So you can see we just do the array.sort so let's try that. So array.sort, and it sorts at 17, 42, 8, 99. And if you look at a, you can see it actually changed the array, it sorted in place. But wait a minute, 17, 42, 8, 99 what's going on here? And the answer, believe it or not is that JavaScript by default sorts even a numerical array lexically. That is to say according to the letters as if they were entries in a dictionary. So because eight is bigger than four or one, eight comes third after 17 to 42. So this is really terrible in my opinion, this is ridiculous default behavior and really does go to show that JavaScript has kind of strange origins inside a browser. As you might guess, there is in fact a way to sort this sensibly, according to the numerical values but it's actually quite tricky relatively speaking and we'll need to learn a little bit more JavaScript to be able to do it. This will be covered in chapter five. Another useful array method is reverse. Take a look at this here. As with sort reverse works in place which means that it actually does change the value of the array. So let's look at a again. Like that. So it just reverses the order. And then we can take a look at it and it's the same. In chapter five, we'll start developing a palindrome theme and this reverse method will come in very handy. A couple of related common tasks with arrays involves adding elements and removing them. In particular, we can append an element to the end of the array using an operation called push, we're pushing something onto the end of the array. So for example, we can push six on like this. Strangely push returns the length of the array. There's probably a reason for that, but I don't know it off hand, but if we look at it, we can see that in fact it worked. Remember we can mix types so we can push on a string. Like this. And then in order to remove that, remember we mentioned this in the context of slicing, you can access the final element. This is a way of accessing the final element and removing it at the same time. It's an operation called pop. Like that. So that returns the element and it mutates the array. You can see that foo is gone. If you do it again, same thing. So we can assign a variable to the final element of the array and remove that element at the same time like this. We're left with 99, 8 and 42. You can do this and there we go. And finally, we'll learn how to more or less undo a split using join. Take a look at this here. Here we go. So you can see that this joins elements together by default actually on comma, but we can also join on other things including the empty string. So let's take a look at this. Let's use an array of strings with one numerical element. And we'll see in a minute why I'm doing this. We can now join this. As we saw on the documentation it's actually just commas by default but we can also do comma space like that or something like this. And you sort of separate where we want. And of course we can join on the empty string like this. One thing you might have noticed is that when we joined this 42 was automatically converted into a string. So I hinted that split and join were almost inverses of each other. They're not exactly and it's because of this conversion. So for example, suppose I were to say a.join on space, that's like this. And then to pose, I split on space as well. This technique of including more than one method in a chain is called method chaining and we'll be discussing it more later in the tutorial. So we can do a.join.split. And you can see this is almost the same as a, but not quite. This here is a string, this 42 and this 42 is a number but there are times when they are exact inverses in particular, when you're joining and splitting arrays of strings we can go back and forth between the two using joint and split. As with the reverse method, we'll be putting this to good use. When we talk about palindromes later in this tutorial