Learn JavaScript #13 | Arrays Part 2

Alright guys, so there's a few basic things that we need to learn about arrays just to be able to manipulate them properly, and one of them is this array right here that has six items that has a length. And we can get the integer representation of the length by simply typing hobbies.length. And it's not a method so you don't put the curly, or you don't put the brackets at the end of it, it's just a variable. So hobbies.length is going to return 6 and that's because there's six items in the array. Now what you can do to get the last item of the array without...let's say this is a variable size, we don't know how big it is. It could only have three items in it, it could have a hundred. The way to figure out how to get the last item we're going to combine this, with this, and a bit of math, and so we're just going to print out the last item by writing hobbies, and then open up your square brackets. Now in the square brackets here we're going to type hobbies.length, so this is automatically going to say print out hobbies six. Now this is going to fail if we just leave it like this because again in JavaScript numbers start at zero. So, if we were going to print out something at the sixth index here it would one, two, three, four, five, or sorry zero, one, two, three, four, five, six. It's going to say undefined because we don't have a sixth item, well we have six items, we don't have an item at position six here, we do at position 5. So how we're going to do this I'm going to say hobbies, we're going to open up our square brackets there, and then we're going to say hobbies.length - 1. And this is going to print out archery because it is the last item in the array, and so that's how you're going to get last items. Now, what we're going to do is I'm going to show you guys how to loop through through arrays, and this is going to let you inspect each item in the array and do something very specific with it. So, back in our code editor here because this is going to be multi-line so it's not going to be something I want to do in the console there, we're going to say hobbies.forEach, and forEach is camel cased by the way, and we're going to open up our brackets. So this is a method, this is just a method. What we're going to pass into this method, the function that we want to perform. So in this case we're going to write it in line. I'm going to write function. Then we're going to open up these brackets to this function. And the items we're not naming it because we're not calling it we're just performing it in line, so we're going to get the item, so it's going to be pizza, gaming, reading, etc. and then the index, and this is going to be 0, 1, 2, 3, right. And then after this we add our curly brackets. So now this looks a bit different from anything we've written before and that's because it is, because in this function this whole thing is one parameter that we're pushing into the function. It's called a callback and it's what this function does when it's done. So, what I'm going to do is for each item I'm going to console.log "I like" and then item, and then we can also print out the index. I'm going to save it, I'm going to refresh here, it says I like pizza 0, I like gaming 1, I like reading, and it will continue over this for however many items this has. So that's how to loop through arrays. It's just the array name dot forEach, and then this is a method so you open up your regular brackets there and put inside a function, and in the function here you do need to grab item and index. You don't need a call in this, you can call it i and in, but then inside here...actually, you can't use in right because that's a reserved word. Use ie and then you would just have to use it like that inside the function. It's still going to run the same. So you guys can make up whatever names you want just like inside of a function, which I don't think we actually talked about parameters and that's what we're going to be getting to, so this is kind of a primer for that, and we're going to be using arrays as well. Now, if you want to remove the item from the front of the array, in the last video I showed you guys the push or the pop method, this is a bit different. We're going to write hobbies.shift and this is we're going to shift out, yeah. It's going to shift the first one out of it. I'm going to save it, I'm going to refresh, and now you'll notice that the entire array has changed and removed the first item which was pizza. So, maybe I no longer like pizza, so let's console.log that because it's going to return the item that it removes, just like the pop method. Now, if you want to add an item to the beginning of the array, it's very similar to shift. We're going to call unshift on the object. So, hobbies ununshift, and we're going to add in blacksmithing. Save it and refresh, and what's going to happen here is we first create our array right here which is all the things I like. Then we add archery to it, and then we remove pizza from it, and at the beginning of the array instead of pushing to the end of it like we did with archery, or pushing to the beginning of it, and we're putting blacksmithing. So I'm going to save it and refresh. As you can see here, it removes pizza and then it adds blacksmithing to the beginning of the array. So, that's I think all we're going to focus on in this video. In the next video, we're going to learn about removing items specifically. So, if I wanted to remove programming I can't remove the first or last item but I can remove by the index number, and then we can also get the position of the items. So we can search the array for programming and we'll find that it's at index number three, and I'm going to show you guys that in the next video.