Learn JavaScript Episode #12: Arrays Part 1 [w/ subs]

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

Video Url: