Arrays

[00:00:00]
>> WebDevSimplified: Now we've talked a lot about variables that store individual values. I have a box and I put one thing inside that box and give it a label, but arrays allow us to create a box that's got compartments inside of it where we can put lots of different things. So I can have one box that contains many different things inside of it. An array is essentially just a list of data that is all stored inside of one variable.

[00:00:20]
So here we have, for example, a number and a name variable. These are individual variables. But what if I wanted a list of numbers or maybe I want like a list of all the names of people that I know. This is where an array comes in. Creating an array is actually relatively quite straightforward. You define it just like a normal variable, so we could say constant or let, doesn't matter. Then we give it a name.

[00:00:39]
We'll just call this names because it's going to be a list of all the names we have. Set it equal to something. And now here is where we define our variable. If you wanted like a number, you would put a number here. But for an array, what we need to do is we need to open up a set of square brackets. Square brackets in JavaScript represent that you're creating an array. By default, if I just do an empty square bracket like this, I'm creating an array with no values.

[00:00:58]
Essentially, I'm creating a box that I know will have things in it, but it doesn't have anything in it yet. If I want to put values in that array, I can just put them in line. So let's say I want to have the name of Kyle. Now I have an array with a single value, and if we log out the names, we'll see on the right hand side here, I have an array with one single value if I expand that out, that has Kyle inside of it.

[00:01:18]
To add additional values to your array, just put a comma after your quotation mark, and then whatever else you want. So in our case, let's put Sally inside of here, and now I have an array with two different values. I have Kyle and I have Sally, and I can expand this out to see them all, especially when your arrays start to get really long. You can expand it to see all the different values in there.

[00:01:36]
So that's the basics of creating an array. You open up some square brackets, put a piece of data, followed up by a comma, followed by another piece of data, followed by a square bracket, and you can keep going on and on with as many different pieces of data as you want inside of here, and it'll just keep adding them together. And you can do this with any type. It doesn't have to just be strings, for example, you can see we can use numbers as well.

[00:01:56]
If you have an array that's really long, you may want to put it on multiple lines like this, and that's perfectly OK. It doesn't matter how much space you have between one and the next, as long as you have a comma between each value, that'll work just fine. And something you'll actually notice is that if I have an array that's long enough, it'll automatically format itself with Prettier. So if I remove some values from here, you'll notice it now puts this on one line technically it's wrapping because my screen is so small, but it's all on one line.

[00:02:21]
While if I add those values in and I were to save, so let's just bring it back to what we had here. I'm just going to add in some values that are really long and now save. Prettier automatically formats onto multiple lines for me. So this is just a great code quality thing with Prettier. It's automatically going to format your array for you. One thing you'll also notice is you see a comma at the very end here, even though there's no value afterwards.

[00:02:40]
In JavaScript, this comma here is optional at the very end you can put one if you want, leave it off if you want. Prettier will automatically add it when you have a multi-line array, but it doesn't matter. So if you see that and you're wondering why that's there, it's just an optional thing you can put it, or you cannot. It doesn't really matter. Now to get the data from an array, what you use is again that square bracket style syntax.

[00:02:59]
So let's go back to the code we had here. I'm going to make this a little bit simpler to just get rid of some of the values. We just have 3 values Kyle, Sarah, and John. And let's say I want to get the very first value from my array. Well, what I could do is I could say my array name, which is long list, and then I open up those square brackets. This allows me to access things inside my array, and we do it using an index, which is a number that tells me the position in the array.

[00:03:21]
So you may think, OK, I want the first element, so I'm going to put the first number inside of here. And if I log this out, you should expect it to actually log out Kyle, but in reality it's going to log out Sarah to the screen, and that's because arrays are actually 0 indexed. That means that instead of starting at the number 1, they start at the number 0. So the very first item in your array starts at the index of 0, and then it counts up from there.

[00:03:46]
So Kyle is at index 0, Sarah is at index 1, and John is at index 2. So we want the first item, we actually put a 0 inside these square brackets instead. Now when I save, you can see we get Kyle. If we put a 1, we get the second item. If we put a 2, we get the third item, and so on. That's how array indexing works inside a JavaScript. And actually most other programming languages use this zero-based index style.

[00:04:05]
It's something that's a little bit confusing to remember when you're first getting started. I know I messed this up a lot. But just remember, arrays always start at 0, so if you want the first element, it's 0, and every element after that, for example, if you want the 47th element, it'll be index 46, just subtract 1 from the number. Now another important thing about arrays is how do you add items to array, because currently I created this array, Kyle, Sarah, and John, but how do I go ahead and add new data into my array?

[00:04:32]
Well, that's actually relatively straightforward to do. First, I'm going to log out what our list is, so you can see we have Kyle, Sarah, John. I'll make it a little bit shorter, so it's just going to be Kyle and Sarah inside of there. Then what I want to do is I want to add a piece of information to my array. Why take my array name and there's a bunch of different functions you can call on arrays.

[00:04:49]
When you click the period key, it should autocomplete. You can see we have a lot of options available, so many of them. But if you want to add something, you can use the push method. This is a method that allows you to pass one single value to it and it adds it on to the very end of your array. So let's say we want to get John back into our array. Well, we can push him into our array, and now if I were to log out what my array looks like after adding John.

[00:05:12]
You'll see that now my array has 3 different values in it. We have Kyle, we have Sarah, and we have John inside of our array. So this push method allows you to add brand new elements into your array, and the important thing is it adds them at that point. So my array starts out with 2 values, prints it out here with 2 values, and then after this it now has 3 values inside of it. Another interesting thing, which is different than some programming languages, is that in JavaScript, an array can have any different types that you want inside of it.

[00:05:40]
For example, this array has the number 1, the string hello, the boolean true, another number which has got decimals, and the value of null. It's got 4 different types inside of here, but it works perfectly fine inside of JavaScript. JavaScript doesn't care if your array is all one type, a bunch of different types. It doesn't care. It just knows you have a collection of different pieces of data that you want to store inside of this list.

[00:05:59]
So again, this is something different than some programming languages, so this may look a little foreign to you if you've used other languages before, but this is how it works inside of JavaScript. Another interesting thing is, since you can put anything you want inside of an array, you can put another array inside of your array, and this can actually get a little bit confusing to understand exactly what's going on.

[00:06:19]
So here we have this thing called our nested array, and our nested array is an array, as you can see by these opening and these closing brackets over here, and this array contains two other arrays inside of it. So our first element in our nested array is another array with the values A and B, and our second value is another array with the values C and D. So when I try to access the first element from my nested array, that returns to me this entire array of elements A and B.

[00:06:46]
Same thing here, if I try to access the second element, that's going to return to me this entire array of C and D. So we can actually chain these together if we want. For example, let's say I want to get the first element in my array and I want to get the first element inside its nested array. Like I want to get this letter A. Well, I could change this to be like this. So now essentially this first piece of code is accessing the array A and B, and this second little bracket code is taking the first element from that array, which is why we get the value a being printed out.

[00:07:16]
This is usually a little easier to see if we break it out into variables. So we're going to create an intermediate variable just called R. We're going to call nested array and get the very first array. So this is A and B, this array right here. Then down here I'm just going to replace this with that R variable that we created to print out the value A. This makes it a little bit easier to see what's going on.

[00:07:36]
We're first accessing our first array and then inside of here we're accessing the values inside of the second array. Now a very common example of this would be like a grid format. Here you can see we're doing the exact same thing in a grid. If I get the first row of my grid, you can see it gives me 123. If I want to get the middle element, I would need to get the second row and the second element in that row, which would be index 1 and 1.

[00:08:00]
And finally, the last element in the bottom right would be row 3 and item 3, which uses indexes 2 and 2 respectively. Now another thing with array, since you can constantly change what values in there, add values, remove values, and so on, we need a way to determine how long our array is, and this is using the length function on our array. So we can come into here on any array that we have, and we can just call dot length, and this will return to me how long that array is, how many items are in there.

[00:08:24]
As you can see, this value AB is our array has two values in it, so it prints out the value of 2 for the number of items inside that array. Now to give you a really quick practical example, I just want to show you creating an array because this is a really core concept of JavaScript. I want you to create an array with the first five letters of the alphabet A, B, C, D, E, and then I want you to print out the middle element which should show up as C on your console.

[00:08:44]
This will help you understand how indexing works as well as how you can define an array. It doesn't matter if we use letter accounts on the array? No, you can use either one that you want. There are going to be some differences we'll talk about again in a little bit, but yeah, for now, either one is going to work the same. And there's no fixed length between any array. You can always append. Yep, you can always add new values to array.

[00:09:08]
Some languages, they're fixed length, but in JavaScript, an array is just whatever size you want it to be. It's very free flowing. Yeah, I had a related question. I was a little surprised that you define numbers as const when with the added with the, you know, with the push, I wasn't expecting that that would be possible. Yes, so that is, I guess I sneak peeked a little bit. I think 2 slides from now, no 2 slides now I cover why that works, but yes, that is something that is very confusing at first, but yeah, I will cover why that works.

[00:09:35]
And I think with that we have enough time to go through this, so I want to kind of go through the solution real quick on what's going on. So if we look here again, I'm using const for this, but you can pretend it's let for now. I'm creating an array called letters. We gave it the five values A, B, C, D, and E all separated by that comma. And then to get that middle index, we want to get the third element.

[00:00:00]
We need to remember to subtract one from that because that's the actual index value since we start at 0. So we use index 2 and that'll print us out the value of C.