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
Learn how to add elements to an array, as well as return the number of elements inside an 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
Arrays are one of the most powerful and
0:00
commonly used data
structures in JavaScript.
0:02
They let you group values to
build more complex structures.
0:05
Because of that, you'll find that
there are many ways to work with them.
0:08
Now, I'll teach you three of the most
common ways to add elements to an array.
0:11
Let's start by visiting one of the best
sources of JavaScript documentation,
0:16
the Mozilla Developer Network or MDN.
0:20
Here, you'll find detailed information on
every aspect of the JavaScript language,
0:23
including this page on arrays.
0:28
In JavaScript, an array is not
only a type of data structure,
0:30
an array is also considered a special
kind of object that has properties and
0:33
methods you can use on it.
0:38
The sidebar on the left
lists the properties and
0:40
methods you can use with arrays.
0:42
For example,
you can find the length of an array or
0:44
the number of elements incited by
looking at the array's length property.
0:47
It works much like using the length
property on a string to return
0:51
how many characters are inside it.
0:54
In this case, the length property returns
the number of elements in an array.
0:56
For example,
if you had an array like this,
1:01
you can find out the number of
elements in the array like this.
1:03
This returns a link value of 3, which you
could, for example, display in a message.
1:07
As you add elements to the array,
the link changes.
1:12
It's a really handy property.
1:15
Let's go back to the Mozilla Developer
Network's array documentation.
1:18
Notice how there are lots of different
methods for working with arrays.
1:22
For example, push is a useful
method that lets you add one or
1:25
more elements to the end of an array.
1:30
In your workspace or project folder,
open the file add.js and
1:33
make sure to update
the script tag in index.html.
1:37
The source attribute
should point to js/add.js.
1:40
This file contains an array named
instruments holding three string values.
1:46
To add guitar to the end of the
instruments array, type the array's name
1:51
followed by a period, the word push,
and a set of parentheses.
1:56
Inside the parentheses,
2:01
you include the element or value you
wish to add to the end of the array.
2:02
You can think of the push
method as pushing an item
2:08
into the last spot of the array.
2:10
I'll save this file and
preview index.html in the browser.
2:12
Then in the JavaScript Console,
2:16
I'll type instruments to
reference the instruments array.
2:18
And notice how it's now
an array containing 4 elements.
2:21
guitar appears at the end of the array.
2:25
An array's length property automatically
updates when you modify the array.
2:28
With the push method,
2:32
you can add more than one item
to the end of the array at once.
2:34
For example,
I'll add the strings violin and
2:38
triangle to the end of
the instruments array.
2:42
I'll check the array again in the Console,
And now it holds 6 elements.
2:47
We are adding elements
to the end of the array.
2:55
But what if for any reason,
2:58
you need to add an element to
the beginning of an array?
3:00
JavaScript also provides
the unshift method to do just that.
3:03
Now, the name unshift might
seem a bit confusing.
3:07
But it works much like the push method,
3:10
except that it adds elements
to the beginning of an array.
3:12
For example, to add an instrument to
the beginning of the instruments array,
3:16
type instruments.unshift and
pass it the element or
3:22
value you wish to add
like the string cowbell.
3:27
And like the push method,
3:33
you can add more than one element
to the beginning of the array.
3:35
Now the instruments array
contains 8 instruments.
3:47
That's a lot of instruments.
3:50
Remember that each element in an array has
an index value starting at the 0 index.
3:54
So you can visualize
the instruments array as so.
4:00
All right, you've just practiced
adding elements to an array.
4:03
In the next video, you'll learn
how to remove items from an array.
4:07
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