Learn JavaScript Episode #13: Arrays Part 2 [w/ subs]

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

Video Url: