Hi everybody, welcome back. Today we're going to be starting something that's really quite different than what we've been doing in the past. In the first few weeks, I used variables that stored a single piece of information. So we talked about numbers, strings, true or false booleans, or objects. And while objects can be quite complex where you can have entire DOM elements, the fact was they were just dealing with one element at a time. But what do you do if you want to use multiple related pieces of information? Well that's where this idea of using arrays is going to come in. Arrays give us a chance to declare multiple values that are all linked to a single variable. So in this case I've declared an array called grades, but instead of giving it one value, I've given it ten. In this next example, I said I wanted an array called foods, and I given it three values. In the first one they were numbers, in the second one they're strings. My third example, I'm finally going to get to where we can start using those APIs getElementsByClassName. So in this case, I have no idea how many elements will be in this images array because I don't know how many images were in the document. And in the same way, I could declare array by saying, you know what, I wanna make a variable, I'm going to call it listItems. And how I'm going to assign it or declare and initialize it, is by doing document.getElementsByTagName and giving it ['li']. So now it'll travel through the DOM and grab every element that has that li tag. So, hopefully you've seen this idea that an array is not a single value, but a collection of values. You start off by giving your array a name, and then you can assign as many values as you'd like. Each one of these values 80, 82, 81, etc., these are called elements. So my array is called grades and it has ten elements in it. Now if I want to actually use these elements, I need to know that each element has a numeric index, or a number that goes with it. And in arrays, with almost all computer science ideas, we don't start at 1, we start at 0. So if I have an array of 10 elements, The index goes from 0 to 9. If I have an array of 5 elements, I know that it'll go from 0 to 4. Okay, so we have our array, and we know, in this case, that we have an array with 10 values in it. So, each of those values is called an element. In computer science, when you're talking to other people, this is a term that you wanna use, because then you'll really be conveying that you're using an array. How do we get to those elements, though? Well, each element is referenced by an index. So if I were to say grades[0], right here, well, the computer knows, oh, I have this array up here. I need to go find the one that's in the 0 place, so grades[0] refers to 80. If I wanna talk about grades[4], well this refers to value 62. So, grades[0] is the first value, grades[4] is actually the fifth value. If this is the first time you've really experienced starting your counting at 0, it can be a little bit confusing at first, but you'll get the hang of it in really no time. One thing I wanted to mention because it's different than in other program and languages, is that elements in array don't have to be all the same type. So I could have an array, in this case called info, that has a string and a number, and then a string and a number, and that works just fine. However, it's very uncommon and I wouldn't necessarily encourage you to do your arrays in this manner. Instead we really want to focus on this idea that arrays tend to have the same values in them and that they have attributes and methods. Because JavaScript arrays are objects and that gives them some special power. So for instance, we can refer to grades.length. We can call the method grades.sort(), or we could even add additional elements to our array using the method called push, where we would add another element to it. Now, if you start thinking about some of the different ways we can use arrays, you can start to put things together. So for instance, when I talked earlier about grades[9] or grades[8], we knew exactly how big that array was because we had initialized it. But sometimes you won't know how long the array is, especially if you used getElementsByTagName or something like that. So it is possible to combine the idea of length and the idea of push to come up with our own way of adding things to our array. Grades, here's the element I need. I need [grades.length], because I know that's the last place where we don't have something, and set it = element here. So these two things right here, grades.push(element) and grades[grades.length] = element, they're the same thing, it's just a different way to program. This kind of flexibility can be really great once you get the hang of JavaScript. But when you first get started, it can sometimes be confusing when you see people doing the same thing in different ways. It's a really great learning opportunity for you to try to figure out which things match as you go out and see new code. So let's go ahead and review. As you learn to declare and manipulate arrays, your code is gonna become much more powerful. You just need to take the time to switch your mindset from single values to collections of values. And once you do that, we can start playing with these new API methods that we haven't used before. The getElementsByTagName and getElementsByClassName. Quick note because I know this is a typo of a lot us make, is that you're writing this the correct way. We've been using getElementById, make sure you're typing this else you might run into problems. So go ahead, start typing in some code, use the console to make sure things are going the way you want them to, and keep coming along with me as you learn new ways to use arrays to improve your page, thanks.
