Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript Arrays!
You have completed JavaScript Arrays!
Preview
In JavaScript, an array is a "data structure" that provides a way to store and organize data.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi everyone, Guil here, a developer and
instructor at Treehouse.
0:09
In this course, I'll teach you a really
important programming concept, arrays.
0:13
An array is what's referred
to as a data structure.
0:18
It's a way to store and
organize data in JavaScript.
0:21
You already know how to store, track,
and update data with variables.
0:24
A variable, as you've learned,
stores a value.
0:28
So far you've used variables
to store primitive values or
0:31
data types, like strings,
numbers, and Booleans.
0:34
Assigning a simple primitive to
a variable is a bit limiting
0:37
because primitives can
hold a single value only.
0:40
Let's say that you want to keep track
of the item the user puts inside
0:43
an online shopping cart.
0:47
For each item you'd need
to create a new variable.
0:48
If the user added 100 items to their cart,
you'd have 100 variables.
0:51
Even worse, you have to declare variables
in your program before the program runs.
0:56
So to prepare for a large order,
you need to create 100 variables
1:01
just in case a user wanted to
add 100 items to the cart.
1:05
Now, most users probably
wouldn't add that many items, so
1:09
most of the variables would go unused.
1:12
But if one shopper tried to add one
item more than 100 to the cart,
1:14
they'd be out of luck because there'd
be no variable to store it in.
1:19
There has to be a better way,
and there is, with arrays.
1:22
An array is a way of storing more
than one value in a single place.
1:25
Think of an array as a list of items,
like a shopping list.
1:29
A shopping list might have one item,
ten, or even 100 items on it, but
1:32
it's still always just
a single shopping list.
1:37
An array is a flexible method
of storing sequences of values.
1:40
It can hold a single string, 50 numbers,
1:44
or any combination of data types, strings,
numbers, Booleans, and even other arrays.
1:46
And you don't have to know ahead of
time how many items you're going to
1:51
add to an array.
1:54
You can add or
remove items as the program runs.
1:55
For instance, at the beginning of
the program you might have just
1:58
one item on the list, but
by the end there could be 100.
2:01
Creating an array is
quite straightforward.
2:05
You assign an array to a variable, so
you start by declaring a variable using
2:07
the name you want to use
to reference the array.
2:11
You follow the same rules you'd use for
naming variables.
2:14
If you're not sure what those rules are,
2:17
be sure to review the teacher's
notes with this video.
2:19
Next, you add an equals sign,
followed by a pair of square brackets and
2:22
a semi colon.
2:25
The brackets represent an array.
2:27
Inside the brackets you add
a comma-separated list of values.
2:29
This could be strings, or numbers, or a
combination of different types of values.
2:32
All right, now let's create an array.
2:38
To follow along,
launch the workspace with this video or
2:40
download the project files and
use your preferred text editor.
2:43
Open the file array.js,
this file is already linked to index.html.
2:46
I'll start by creating
an array of planet names.
2:53
I'll declare a variable named planets,
using the const keyword, and
2:56
assign it a pair of square brackets.
3:00
These brackets indicate what's
called an array literal.
3:03
Since there are currently no values
inside it, it's an empty array.
3:06
It's like a blank list where
I can start to add my items.
3:10
First, I'll add a string inside it,
Mercury.
3:13
Now the array has one item in it,
a string.
3:17
To add more items, you type a comma,
followed by another value.
3:21
I'll add three more string values to
the array, Venus, Earth, and Mars.
3:25
You'll often see arrays written
like this on a single line.
3:36
But when you have dozens or more items in
an array, it's common to break an array up
3:39
over multiple lines, with each item in
the array on a single line, like this.
3:44
Notice that the first bracket stays with
the equals sign, the last bracket is on
3:50
its own line at the end, and
each array item is on a separate line.
3:55
JavaScript isn't too picky about
white space or line breaks, so
3:59
this style works well.
4:02
It's easier to read, and
4:04
if you need to change items in the array,
it's easier to edit.
4:05
You're starting to learn that
an array is really a list of items.
4:09
Can you think of other data you
might organize as an array?
4:12
How about a musical playlist, a to-do
list, or a list of students in a course?
4:15
The more you program, the more you'll
notice that many things come in groups
4:20
that you can represent using an array.
4:23
Once you've created an array, you'll
want to start using it in your program.
4:26
So how do you access the different
elements in an array?
4:29
I'll teach you how in the next video.
4:32
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up