Useful Array Methods

[00:00:00]
>> So, there are a lot of other useful tricks that arrays can do. We have a whole bunch of other spells that we can cast on arrays. So here are a few more. Try them out, try them out in your console, take a guess before you hit enter or before you type it in.

[00:00:16]
Take a guess as to what each of these is going to produce or what you're gonna see. And we're gonna talk about it in a second. Okey-doke, so let's talk about it. So what do you think .sort does? It kind of does what it says on the tin but to put words to it.

[00:00:44]
>> Sorts alphabetically.
>> So in this case since we have a bunch of letters in our array or strings, right? It's going to sort them alphabetically. But this is a little bit tricky, so let's talk about it. So if I call this sort on this CADB array, I'm gonna get the array a, b, c, d may be expected.

[00:01:11]
What do you think happens if I do like 3, 4, 1, 2 sort?
>> 1, 2, 3, 4.
>> 1, 2, 3, 4. Okay, but there are also some weird things like for example, if I do 100, 1, 10. We're going to get maybe what we'd expect, if I do 100, 2, 50.

[00:01:49]
Is that what you'd expect? So what's actually happening here is because again, JavaScript goes all loosey goosey, is it's actually going to sort based on the stringiness or the sort of alphabetical order of the things in the array. So for example, 1, 10 and 100 come out in the right order because.

[00:02:18]
If we converted these all to strings. That is how they would be ordered alphabetically, right? But the same is not true if we converted 100, 2 and 50, to strings. This is because 1 comes before 2 alphabetically. So 100, it's kind of like starting with A, and 2 is sort of like starting with B, and so on and so forth for 50.

[00:02:55]
So, be a little bit aware that sort behaves maybe differently than you'd expect in some cases, especially when you're dealing with non-stringing values. Okay, great. How about this .join? Can anybody describe what happens when we do this .join?
>> Joins the variables with whatever specified.
>> So it joins the, I'm gonna say values in the array.

[00:03:27]
Cuz we haven't actually assigned any variables here, joins the values in the array using a string joiner that we pass in. So if we pass in lions and tigers and, sorry, lions, tigers, bears my, and join them with a and surrounded by spaces, we're going to get the straight one-string lions and tigers and bears my, yeah?

[00:03:53]
So this can be really useful for when you don't wanna type out like let's say. Let's say I have my first name and my last name. And I don't want to type out kind of, let's say, I don't wanna type out. Let me assign this to an array.

[00:04:26]
Okay, so if I don't wanna type out something like names. 0, plus, space, plus, names, 1 to get my full name, it can be quicker to just say names.join and put a space between them, boom. So join is a pretty handy, little spell or trick that arrays can do.

[00:04:50]
And how about this last one, concat. What did folks find out happens here? Maybe the chat wants to chime in with what concat has been doing, or they think will do? So we saw, yep.
>> Joins the elements to the array.
>> Joins the elements to array, okay.

[00:05:23]
Yeah, or another word. So concat is short for a word that we talked about yesterday.
>> Adds 456 to the array.
>> Adds 456 to the array. Okay, so we're gonna end up with a bigger array, right? So concat, is gonna give us an array that kind of squishes these two arrays together, into a single array.

[00:05:48]
And concat is short for a word that we ran into with strings yesterday. Anybody remember a word we encountered, concat?
>> Concatenate.
>> Tenate, concatenate. Exactly, so this concatenates or joins together two different arrays, to give us one array with all of the elements of both arrays. Another handy trick.

[00:06:12]
Okay. Now, there are a lot of other things that arrays can do. And so again, our friend MDN. If we go to MDN, and we type in array. We'll find a whole long list of methods and things that we can do with array, there's a whole long list of stuff that arrays can do, which we do not have time to talk about all of.

[00:06:41]
But you can go through and read more about any of these magic tricks that they can do, and also find out certain details about them. Like for example concat, we can say it's used to merge two or more arrays and it returns a new array. We're gonna talk about what that means in a second but so you can see examples, etc.

[00:07:01]
So you can check out MDN for way more stuff that arrays can do. Cool? Cool, any questions so far?
>> I couldn't use push instead of concat, so push can only do only one?
>> So, let's find out what happens. This is the best way to figure out what stuff does, in my opinion, is to mess with stuff when it's a non-crucial time.

[00:07:31]
So since this is our time to experiment, let's see what happens when we, if I put push here, I'm not gonna type it yet because the browser is gonna spoiler it. We said push, when we were looking before, and we said, okay, let's say, I do just push for, what am I expecting to see when I do this?

[00:07:53]
>> 1, 2, 3, 4?
>> An array with 1, 2, 3, 4, yeah. Thank you. Oops sorry, no, it's just actually [LAUGH]. I'd have to capture the array. Sorry, so push is going to return the value of the element that it just added, and not the value of the array.

[00:08:10]
So first I have to capture the array. Double check that it's what I thought. So then if I do push for. Now if I ask for a, I'll see that it has four things. Okay, now what happens if I do push and then make a new array with, where are we at 5, 6, 7, let's say.

[00:08:32]
So we said push adds an element to the end of the array. So let's take a guess. What do you all think this is gonna do? We have a question. Maybe it's going to do the same thing as the cat.
>> Yeah.
>> Okay.
>> Thank you, ma'am.

[00:08:43]
>> Any other guesses?
>> Does it put the array in there as the last item?
>> It might put the array 5, 6, 7 in there as the last item. Or it might put each of those things in there as the last item, let's find out. Looks like we've now got an array with, so, sorry.

[00:09:08]
What did I say before? I might have said push returns the value of the thing that we added, that's wrong. Push returns the new length of the array. Haven't had enough coffee yet. And that's why it returned 5 here, because it says now we've got an array with five things in it, the numbers 1, 2, 3, 4, and an array with 5, 6, 7.

[00:09:33]
So this is what's called a nested array. Now we have an array within an array, and we can have arrays, within arrays, within arrays. JavaScript doesn't care what kinds of things you put in your arrays. So we can even put in arrays, objects, all kinds of different stuff.

[00:09:50]
So push and concat do work differently, and they're going to do different things. Now, tomorrow we're gonna talk more about a fancy piece of JavaScript syntax that we can use to extract the individual elements from an array. That can make it a little bit easier if you're trying to add multiple things from an array.

[00:10:17]
So, don't wanna get into that right now cuz it might distract us. But tomorrow, when we look later at some fancy JavaScript syntax, we will find a shorthand way to kind of get multiple elements out of an array so that we can work with them individually.