Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
To access an element within an array, you use an "index" value, which is a number that indicates a position in the array.
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
You know how to create an array,
but how do you use it?
0:00
When you want to use the value
assigned to a variable,
0:03
the variable's name is a placeholder for
the value assigned to it.
0:06
For example, if you wanted to display
the contents of a variable named status in
0:09
the console, you'd provide the console.log
method of the variable name.
0:13
However, the name of an array doesn't
quite represent a single value.
0:16
It's a list of multiple values, or as
they are formally called array elements.
0:21
To access a single element within
an array, you use what's called an index
0:26
value, which is a number that indicates
the position of an element in an array.
0:30
You can think of an array
as a numbered list.
0:35
To get an item in the list,
0:37
you need to call up the number
of the item you want to access.
0:39
One really important concept to keep in
mind about arrays in JavaScript is that
0:42
they are zero based or zero indexed.
0:46
This means that the index of the first
element inside an array is not 1, it's 0.
0:49
For example, this shopping list array has
three string values inside it, bread,
0:56
butter, and honey.
1:01
The first item bread, is at the 0 index.
1:03
The second item butter, is at the 1 index.
1:06
And honey is at index 2.
1:09
To access any of those elements,
1:11
you type the name of the array
followed by square brackets.
1:13
For example, to log the value of
the first element, bread, to the console,
1:16
you'd type this.
1:20
To access a different item in the list,
change the index value.
1:22
Let's access some of the elements
inside the planets array.
1:27
I'll print the first item to the console,
with console.log planets, immediately
1:30
followed by a set of square brackets,
inside the square brackets type 0.
1:36
I'll save the file, then in the browser,
1:40
open the JavaScript console
to see the output, Mercury.
1:43
Back in array.js,
1:46
I'll add a few more lines of code to
access each of the elements in the array.
1:47
Let's also see what happens if you use
an index value that doesn't exist.
1:58
In this case,
I'll access the item at index 4.
2:03
This points to a fifth element in
the array, and there is no fifth element.
2:06
So let's see what happens.
2:11
Over in the console,
each item gets printed.
2:13
Notice how the last element is undefined.
2:15
That's because there isn't anything
at index 4 in this planets array.
2:18
Now that you can create arrays and
access the values inside them,
2:24
one of the best parts about arrays is
that you can change them programatically.
2:28
In other words, you can add, remove, and
change array elements within your program.
2:32
For example,
2:37
imagine you've created a page that lists
all of the products a company sells.
2:37
Someone visiting that page can add
products to their shopping cart.
2:42
From a programming perspective,
an array could represent that cart.
2:45
It's an empty array when
the user first visits the page.
2:49
But as they add a new product to the cart,
2:52
the program adds a new item
to the shopping cart array.
2:54
In the next video you'll learn
how to add elements to an array
2:57
as well as return the number
of elements inside an array.
3:00
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