Transcript from the "Arrays" Lesson
[00:00:00]
>> Earlier we talked about, [LAUGH] we talked about values. Earlier, we talked about values and different types of data that JavaScript lets us represent. And today we're gonna be talking about grouping values into larger collections that we can work with multiple values of time. Because as our friend Michelle Yeoh told us in Star Trek Discovery, we deserve many things.
[00:00:24] Although I think she was talking about bad things, but whatever. [LAUGH] So, arrays are a great way for us to keep multiple related values together. And we can think of it as kind of a collection, an ordered collection, let's say. So for example, our friend here has explained some synonyms of array, like plethora and array, and cornucopia.
[00:00:48] And we've got a synonyms variable here that is pointing to an array of strings representing each of those synonyms. So, once we have declared an array like this, declared and assigned a variable to store an array, for example, we can access it in using some similar spells as what we used with strings.
[00:01:16] So just like strings in arrays, every element in the array gets a number assigned to it, which, once again we call those numbers an?
>> Index?
>> Index, beautiful. So, if we ask for the length of an array, it'll return back the number of elements in that array.
[00:01:41] And we can also pick out individual elements from that array using our friends the square bracket notation with an index number, or the dot index of spell. And then a value that we're searching for to find the first index where that value occurs. Okay, so let's try to review a little bit how indices are represented in JavaScript.
[00:02:08] Let's move over to the whiteboard. Okay, so we have an array, I'm gonna use the square brackets to indicate that. And we have some values inside the array, right? We had plethora, these are long words, array, and I'm just gonna make it corn, [LAUGH] instead of cornucopia. Okay, so we said that in JavaScript we get numbers assigned to each element.
[00:02:45] So can you just walk me through, what number does plethora get? 0, nice. An array? 1, and corn? 2, beautiful. And again, one way we can think about this is that each item receives this number, this index kind of corresponds to an individual item. But just like strings, just like we talked about yesterday, we could also think about it as though 0 starts at the beginning of the array, and then kind of at each comma in the array, we have a new index starting.
[00:03:24] So by the time we get to the end of the array, we've reached the number of things in the array. So that's where the kind of length number is usually higher than the index of the last item in the array. So if I wanted to get out the corn item, what could I do?
[00:03:50] How could I tell JavaScript I want to select corn out of this array, which I think we called synonyms? So can anybody walk me through? Maybe, yeah, OJ, go ahead.
>> Synonyms, open square bracket, 2, close square brackets.
>> Exactly, so we can do something like synonyms, [2] and that will tell JavaScript, okay, take the synonyms array, go look for the index 2, and tell me which items starts at that index, yeah?
[00:04:26] Great, okay, any questions so far? This is basically the exact same way that we talk about indices with characters and strings, works the same with objects or, sorry, elements, let's say in arrays. Awesome, awesome possum. And so similarly, we can also use some of those spells that we learned with strings to search for values within an array.
[00:04:52] So we saw index of is one thing we can do to find out what number corresponds to some value. We can also check if an array includes a certain value. So what do you think synonyms.includes plethora is going to return? Paul?
>> Boolean, true or false.
>> A Boolean, yes, always includes is gonna return a yes or no answer, a true or false value, Boolean, excellent point.
[00:05:18] And in this case, what do you think synonyms.includes("plethora") is going to return?
>> True.
>> True, okay, and what about synonyms.includes ("variety")? Jason, what do you think?
>> False.
>> False, exactly, we don't have variety in our synonyms array, at least not yet. However, we can put things there if we want.
[00:05:43] If we there is something that we don't have in our array that we want in it, unlike with strings, we're gonna talk a little bit later about some differences between strings and arrays. Unlike with strings we can modify what is in an array. So, what do you think each of these lines does?
[00:06:04] I'm gonna let everybody take a moment to think about it. What does each of these lines do to our synonyms array? And some of these you might have to guess, some you might have a good intuition for. While everybody is thinking about it, I am going to go in and open up a console in a new tab cuz we don't really care about things, and I'm just going to create my synonyms array.
[00:06:31] Okay, so now the question is, so what do each of these lines do? All right, let's take them one at a time. What do you all think happens when I say synonyms[1] = "variety"? Any guesses? Do you have a guess?
>> Replaces the element index 1.
>> Okay, so we have a guess that it's gonna replace the element at index 1.
[00:07:03] So what was previously at index 1, which was what? What was previously at index 1 in this array?
>> Array.
>> Array, exactly. We're thinking maybe now it's gonna be variety. Let's find out. Okay, so synonyms now indeed, has variety instead of array. Nice, nicely done. Was there a question from the chat?
[00:07:26] Or were just-
>> They were also just-
>> Getting the answers.
>> Array will be replaced by variety.
>> Great, okay, how about this one? This is a new thing, maybe we haven't seen before. Any guess what this does? Paul?
>> Yeah, it takes the last, so take cornucopia, return that and take it out of the array.
[00:07:50]
>> Okay, so pop is kind of a fun little method where it's going to pop off, [LAUGH] the last thing in the array, and return that as a value that we can capture, for example, by assigning it to the last item variable. So if I run this code, and now I ask for last item, it's going to be cornucopia, which was the last item in the synonyms array.
[00:08:20] But importantly, now synonyms doesn't have cornucopia in it anymore. So, this is something that changes the array and pops out the value of the last item. Okay, great. Now, how about this one? synonyms.push("multitude"). So pop and push are kind of two array spells that we can use to do things to the array.
[00:08:58] And where pop removed something from the end of the array, push is going to, Add something on, or you could say sort of append something to the end of the array. So if you've worked with other programming languages that have similar array or list type collections, they often have methods like these.
[00:09:25] Sometimes they're named different things, like append instead of push or something like that. But in JavaScript, pop and push are how we can either take things away, or add things in to the end of the array. And there are also symmetrical methods we can use to put things, or take things away from the beginning of the array.
[00:09:45] But we don't need to worry about all of it right now. Any questions on this so far? These are some new things, so it's okay if it takes us a little while to kinda get used to working with them. All right, so far we've been looking at an array that has stuff in it, but we could also have an array that is empty.
[00:10:10] An empty array we can create by just having two square brackets next to each other with nothing in that. And we can also have an array with just one thing in it. It's important to know that JavaScript sees, if we have the string value lonely versus an array with only the string value lonely inside of it, do you think JavaScript sees those as the same thing, or as different things?
[00:10:38] String lonely versus array containing string lonely?
>> Different.
>> I think they're different.
>> Different, different, I'm hearing a couple differents. Yes, exactly, JavaScript sees those as different things, even though to us as humans, it maybe feels like the meaning is the same. As far as JavaScript is concerned, if it's wrapped in those square brackets, it's an array, even if it's just one thing, or if it's zero things.
[00:11:01] Yeah, question.
>> Okay, so yesterday we were talking about the triple equals and the double equals. So these are definitely different because they're different types, but the value is kind of the same, would a double equals come back as a true?
>> Let's find out. So the question, if I understood it right, is, If we do lonely double equals array, lonely, will it come back as a true?
[00:11:34] [LAUGH] Double equals, you are so sneaky. But again, this is why I would say it really makes sense to always use our triple equals, because these are different things. If they can do different things, we can ask for different things. For example, if I ask for, let's say if I, my goodness, browser, stop being so helpful, okay.
[00:12:03] If I ask for the element at index 0 of this array, what am I gonna get? Well, spoilers, it's gonna return the first thing in the array, right, which is lonely. What happens if I do this? And I ask for 0 here?
>> L?
>> It's gonna return L, exactly.
[00:12:24] So these are different things, they behave differently. So double equals lies. [LAUGH] It's too loosey goosey in my opinion, it's too, I don't know, it doesn't really reflect real life of how we want to move through our JavaScript programs. So keep in mind that double equals can give you some unexpected behavior in your program.
[00:12:48] So generally, I say try to avoid it, unless you really, really, really decide that it is exactly what you want in that moment, but the chances that you're gonna need that are pretty slim in my experience.
>> It's funny the follow up course is Karl Simpson's, and they hope give you a way to use it.
[00:13:09] But like you said, you really need to understand kind of the rules that are on it.
>> Yeah, exactly, it's one of these things where it can be useful. Everything in JavaScript it can have its uses, but in general, since we're just starting out, when in doubt, triple equals.
[00:13:26] Okay, we've seen so far arrays that are just holding one type of thing, strings, but arrays actually don't care, going back to JavaScript's general loosey goosey noose around types, which we talked about earlier. Arrays don't really care what kind of stuff is in them. They behave the same, whether you've got an array full of numbers, or you've got an array full of strings, or you've got an array full of other arrays, [LAUGH] or you've got an array full of different types of things.
[00:13:58] Like here we have mixed array, which it's got some strings, it's got some numbers, it's got a false, it's got document which is what type of thing? Remember our document, our good old friend document is what type? So it is something related to HTML, but as far as JavaScript's kind of type notions are concerned it is an, yeah?
[00:14:22]
>> [INAUDIBLE]
>> Object, exactly, yeah. So, we could say it's a specific type of object called maybe an HTML element, I can't remember exactly, but in general, it is, as far as JavaScript is concerned, type object. So we've got a whole bunch of different type things in this array, and that's totally fine, JavaScript does not care.