"JavaScript Loops, Arrays and Objects" was retired on December 18, 2020. You are now viewing the recommended replacement.
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