About this lesson
What are arrays, and how does JavaScript use them?
Exercise files
Download this lesson’s related exercise files.
Arrays.docx199.3 KB Arrays - Solution.docx
199.6 KB
Quick reference
Arrays
An array is a container that holds many items.
When to use
Anytime you need to contain many items, use an array.
Instructions
Arrays look like this:
var pizza = ["Hamburger", "Cheese", "Mushroom"];
To call an item in the array, we reference its index number:
pizza[1];
Index numbers start with 0.
We can find out how many items are in an array:
pizza.length;
We can sort an array alphabetically:
pizza.sort();
To add more items to an array, use:
pizza.push("Onion");
Hints & tips
- Arrays are containers that can hold many things
- Index numbers start at 0
- pizza.length to get the length of an array
- pizza.sort() to sort an array
- pizza.push("Add something") to add an item
- 00:05 Okay, we've already talked about variables.
- 00:06 In this video, I wanna talk about arrays.
- 00:08 And arrays are just incredibly important to any programming language.
- 00:12 And they're really sort of the beginning of more intermediate programming stuff.
- 00:17 We've been talking about basic stuff up until now.
- 00:19 Arrays, we're starting to get into more advanced stuff.
- 00:21 They're just one of those fundamental things that all programming languages
- 00:24 have, and you're gonna use them a lot.
- 00:26 So if a variable is a container, or
- 00:28 a bucket, that holds one thing, an array is a container that holds lots of things.
- 00:33 In fact, they'll hold as many things as you can cram in there.
- 00:36 And you can keep putting things in, and you can take things out.
- 00:39 And you can do all kinds of things.
- 00:40 So they're great for
- 00:41 storing lists of things like lists of names or customer phone numbers or
- 00:46 email addresses or anything you want, pizza toppings, it doesn't really matter.
- 00:50 So, how do we make an array in JavaScript?
- 00:52 Well, it's pretty easy, and it looks a lot like a variable.
- 00:55 So if we come up here, we can go, var, we're gonna declare it, give it a name.
- 01:00 Let's call it pizza and equals to.
- 01:02 Up until now it looks just like a variable.
- 01:04 Now we use these brackets.
- 01:06 And every item we wanna put into the array we just put quotations around.
- 01:11 So we could go "pepperoni" and then we separate each item with a comma.
- 01:16 So "pepperoni", "hamburger", "cheese", "mushroom", whatever.
- 01:23 That's an array, very simple.
- 01:25 So you can see I've got all this on one line, and
- 01:28 in fact you can put this on multiple lines, and that's sort of the convention.
- 01:32 Just because it makes it much easier to read.
- 01:34 This is a very small array, if you have a huge array with hundreds of things in it,
- 01:38 or something you wanna put it on separate lines,
- 01:40 just because it's gonna be easier to read.
- 01:42 So, we can call out things from our array, and we can and do things with them,
- 01:45 just like when we output variables to the screen we can do the same thing.
- 01:48 And we do that by referencing the index number of each item.
- 01:52 Each item in an array has its own index number.
- 01:55 And the numbers start at zero.
- 01:57 This is very important.
- 01:58 This screws up a lot of people.
- 01:59 So "Pepperoni," this is the zeroth item.
- 02:02 Right, it's not the first item, it's 0.
- 02:04 Hamburger is number 1, cheese is number 2, mushroom is number 3.
- 02:08 So there're 4 items in here, but it only goes up to 3 in index numbers.
- 02:13 That confused a lot of people.
- 02:14 Even to this day I'll forget every once in a while, and I'll wanna use pepperoni and
- 02:19 I'll call for variable index number one, and it'll be hamburger, and
- 02:22 I'll be like, yeah, I forgot, it's zero.
- 02:24 Try and keep that in mind.
- 02:25 So, to access an array item, all we have to do is just call our array,
- 02:31 do this, and boom, 0. That's it.
- 02:33 So if we wanted to go document.write, just like we have in the past for everything.
- 02:40 So we're calling out our array we wanna output the zeroeth item.
- 02:45 That's pepperoni.
- 02:46 If we wanna output the third item, that's mushroom.
- 02:50 We can also reference the entire array by not giving it an index number,
- 02:54 just calling it pizza.
- 02:55 If we do that, we're gonna get everything output separated by a comma.
- 03:00 Now we an loop through these and pull out each item automatically.
- 03:03 We're gonna talk about loops later.
- 03:05 And when we do, we'll look at arrays and loops and you'll see how to do that.
- 03:08 So you can put all kinds of things in arrays.
- 03:10 We've got strings here.
- 03:11 You can also put, we can put numbers.
- 03:14 That works just as well.
- 03:15 We can put other arrays in an array,
- 03:18 that will blow your mind later when we start to do that.
- 03:20 We can do math with arrays, so 41 and 2.
- 03:23 Now if we come down here and call pizza, let's see this is 0, 1,
- 03:28 2, 3, this is the 4th and the 5th item.
- 03:31 So if we go 4 + pizza 5,
- 03:39 Typo, 04 + 05.
- 03:42 That's gonna be 43.
- 03:43 So we can do addition,
- 03:44 we can do anything we want with an array that we can do with a variable, basically.
- 03:48 We can ask it what the length is,
- 03:50 how many items are in there by calling length, pizza.length.
- 03:55 And we can see there are six items in our array.
- 03:58 We can do sort which is kinda fun.
- 04:01 So we got pepperoni, hamburger, cheese.
- 04:04 If we sort them, it does it, oops, actually we need to sort and
- 04:08 then two little parenthesis.
- 04:10 Now it puts it in alphabetical order, now it's cheese, hamburger, mushrooms and
- 04:15 starts with 2 and 41 'cause 2 is smaller than 41 so that's automatically sorting for us.
- 04:20 We can add things to our array.
- 04:22 We can go pizza.push to push something in.
- 04:27 And then we can go, say, "onion", right.
- 04:30 Now, if we call our array,
- 04:31 we can see "onion" has been added to it automatically, programmatically.
- 04:37 So, those are arrays, they're really fun and
- 04:39 in the next video we'll talk about objects.
Lesson notes are only available for subscribers.