Focus video player for keyboard shortcuts
Auto
- 720p
- 540p
- 360p
1.00x
cc
- 0.50x
- 0.75x
- 1.00x
- 1.25x
- 1.50x
- 1.75x
- 2.00x
We hope you enjoyed this lesson.
Cool lesson, huh? Share it with your friends
About this lesson
What are arrays, and how does JavaScript use them?
Exercise files
Download this lesson’s related exercise files.
Arrays58.7 KB Arrays - Solution
58.9 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.