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
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