Learn JavaScript #12 | Arrays Part 1

Alright guys, so we're going to talk about another basic type in JavaScript here. If you've worked at all with Python this is called a list. If you've worked with any other programming language it's called an array. And what it is it's a numerically indexed list of items that we can store, so it can store any type. It can store boolean's, strings, it can even store other arrays, and we're going to get to that, that's called a month multi-dimensional array. When you have an array that contains other arrays inside of it, that's called multi-dimensional. And I'll show you guys examples, but right now we're going to start off simple. What I'm going to do, right off the bat, is I'm going to show you guys how to make an array. It's very simple. We're going to create a variable called hobbies, and in this variable it's going to be a list. Now how you write the list or array is just by wrapping it in square brackets. And now we're going to basically just create a comma separated list in here of strings that are my hobby. So, strings are not my hobby by the way. My hobbies involve pizza, gaming, reading, programming, and music. So this is my list I'm going to save this here. I'm used to programming in Python so I'm going to keep calling it a list, but it's actually called an array. So, this is an array. What I'm going to do is I'm going to console.log my hobbies so you guys can see that the object is created, not the object, the array is created, and it's going to print it out as though it were an array. So I'm going to refresh this and as you can see here it prints it out, its syntax highlights it, and it even gives us the ability to drop it down here and view each index of it as well. So, if you have a fairly large array and you need to inspect it, you can definitely just log that to the console, and then load up your page and drop it down, and you can look around in there. So, there's a few things that we need to talk about regarding arrays, and one of them is the pop method of the array. And this I don't think is going to be useful right now but just to show you guys that everything in JavaScript has either it's a class. So, hobbies is a class and as a class it has methods that we can access from it. So I'm going to save it right here. So, as with any other object you put a dot and then the method that you want to call, so in this case it's pop, and it takes no arguments. So I'm going to save it and refresh, but what this does is it removes the last item from the array and it prints, or it returns, that item in the return statement here. So it's a bit confusing, but let me show you guys what I mean. I'm going to refresh and see it prints out music, but if I print out hobbies now it has removed music from the list. So you guys can see what happens there. It removes the last item and returns that. So, if we wanted to do this, "I no longer enjoy" and then we're going to pop that item out. So, at the point where we're going to print this, or use this in another way, we can remove it at that point. So I'm going to save this and I'm going to refresh, and it says I no longer enjoy music. And then if you were to inspect my hobbies, I no longer enjoy music. So that's the pop method. Now another one is append. So, what I'm going to do is I'm going to write hobbies.push and here's how you append items to the array. Let's say I picked up archery as a new hobby. I'm going to save it and refresh, and I haven't console.logged that out so I'm going to just type it here, and as you can see archery has been added to the array here. So that's a very basic example of what you can do with arrays and why they're useful. Basically, if you have a number of items that you want to use you can you know, or you want to group together, you can store them inside one variable, and then even you can access each item in the array by it's index. And how we're going to do that is you just type the name of the array, in this case it's hobbies, and then you put square brackets here, and inside this these square brackets you just put the number of the item you want to read. So, if we count right I'm going to print out programming here. So let's count one, two, three, four, this is the fourth item in the array, but when you're working with programming numbers start at zero. So this is in position zero, one, two, three. So if I print out hobbies 3, it's going to print out programming. Now this didn't remove it from hobbies like pop did, it just printed it out. And so that's how you can access individual items within the array, and then also...well actually I think that's where we're going to stop here. You know how to add new items to the array, and you know how to get out the last one. We're going to definitely follow the arrays a bit further, and we're going to learn how to slice specific items out of it. We're going to learn how to reorder it, and even how to loop through it.