Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Learn three common ways to add values to arrays.
Add items to the end of an array with .push()
var items = ['Hat', 'Ball', 'Shoes'];
items.push('Socks','Scarf');
// items is now ['Hat', 'Ball', 'Shoes', 'Socks', 'Scarf']
Add items to the beginning of an array with .unshift()
var items = ['Hat', 'Ball', 'Shoes'];
items.unshift('Socks','Scarf');
// items is now ['Socks', 'Scarf', 'Hat', 'Ball', 'Shoes']
Related Videos
- Where Does JavaScript Go? How to link to external JavaScript files.
Resources
-
Array
.push()
method on Mozilla Developer Network -
Array
.unshift()
method on Mozilla Developer Network
-
0:00
Arrays are one of the most powerful, and
-
0:02
commonly used data structures in JavaScript.
-
0:05
Because of that, you'll find that there's many ways to work with them.
-
0:09
In this video, I'll show you three of the most common ways to add items to an array.
-
0:13
To get started,
-
0:15
let's take a trip to one of the best sources of JavaScript documentation.
-
0:19
The Mozilla Developer Network.
-
0:22
You can find detailed information on every aspect of the JavaScript language at
-
0:27
the Mozilla Developer Network, including this page discussing arrays.
-
0:32
The sidebar on the left, lists Properties and Methods of the array object.
-
0:37
Let's check out this property called length.
-
0:42
The length property contains, the number of items in the array.
-
0:46
For example, let's say, you had an array like this.
-
0:50
You could find out, the number of items in the array with this code.
-
0:53
The length property is like a variable for that array.
-
0:58
As you add items to the array?
-
0:59
The length changes.
-
1:01
Remember this property, it comes in handy a lot of the time.
-
1:04
In fact, it's one way you can add an item to the end of an array.
-
1:08
For example, to add the number 7 to the end of the array, I would write this.
-
1:15
Now the numbers array, contains these values.
-
1:18
But how does this work?
-
1:20
Remember that each item in an Array has an index value.
-
1:23
So we could look at the original item's array like this.
-
1:26
[NOISE] What would the next index value be this array?
-
1:33
6, which is also the number of items, currently in the array.
-
1:37
In other words, the index value for the next item to be
-
1:40
added to an Array is the same, as the number of items in the Array.
-
1:44
That is, it equals the length of the array.
-
1:47
To add an item to the end of the Array, we just add it,
-
1:50
at an index that matches the total number of items in the array.
-
1:55
How's your brain feeling?
-
1:57
If you're like me, it probably hurts a little bit, right now.
-
2:00
I know mine did, when I first was learning about arrays and index values.
-
2:05
Fortunately, there's an easier way to add an item to the end of an array.
-
2:09
The push method.
-
2:11
Let's go back to the Mozilla Developer Network, and the array documentation.
-
2:15
As you can see, there are lots and lots of Methods for arrays.
-
2:19
Remember, an Method is like an action, you can perform on an object.
-
2:24
In the case of Arrays, there are lots of different Methods for working with them.
-
2:28
The push method, lets you add one or more items to the end of an array.
-
2:34
To use it, you simply type the array's name, followed by a period, the word push,
-
2:38
and a set of parenthesis.
-
2:40
[BLANK_AUDIO]
-
2:44
Inside the parenthesis,.
-
2:46
You type the item, you wish to add to the end of the array.
-
2:49
You can think of the push method,
-
2:50
as pushing an item into the last spot of the array.
-
2:54
For example, we could add 7 to the end of the number array, like this.
-
2:58
[SOUND] That's a lot easier than using the length of the array, isn't it?
-
3:04
Another benefit of the push method is that you can add,
-
3:06
more than one item to the end of the array at once.
-
3:09
For example, if I wanted to add 7, 8, and
-
3:12
9 to the end of the numbers array, [SOUND] I'd do this.
-
3:16
JavaScript also includes a method for
-
3:18
adding an item to the beginning of the array.
-
3:21
It has an unfortunately, confusing name, unshift.
-
3:25
It works just like the push method.
-
3:27
For example, say I wanted to add 0 to the beginning of the numbers array.
-
3:32
I just type the name of the array [NOISE] followed by [NOISE] a period,
-
3:36
unshift, an opening parenthesis, the number 0, and a closing parenthesis.
-
3:41
And just like push, you can add [NOISE] more than one item [NOISE] to
-
3:45
the beginning [NOISE] of an array.
-
3:48
[NOISE] Let's try out these methods for adding items to an array.
-
3:51
We'll create an empty array, fill it full of song names and
-
3:54
then, display it on the page, like this.
-
3:57
If you'd like to follow along, click the Launch Workspace button on this page.
-
4:01
Or you can download the project files, and use your own text editor.
-
4:05
We'll start by linking a couple of JavaScript files to the Web page.
-
4:09
Click on the index.html file to open it.
-
4:12
I teach how to attach external JavaScript files to a page,
-
4:15
in the JavaScript Basics course here at Treehouse.
-
4:18
If you're not sure how external JavaScript files work, or how to use them,
-
4:22
I've added a link in the Teacher's notes that discusses how to
-
4:25
use external JavaScript files.
-
4:27
I've created one JavaScript file already called helpers.js.
-
4:31
It has a function in it, that we'll use in this video.
-
4:35
You can check out the code in that file if you'd like, but
-
4:37
it includes some features I haven't taught yet.
-
4:40
In fact, later in this course, I'll teach you how to create that function.
-
4:44
To use the function in that file, we need to link to the file.
-
4:48
I'll add the link here, just before the closing body tag.
-
4:52
When the web browser runs in to this line of HTML, it loads the file, and
-
4:57
runs the JavaScript inside of it.
-
4:59
It's common to place JavaScript files before the closing body tag, like this.
-
5:03
Because it let's the Web page load and display, before the JavaScript runs.
-
5:08
Next, we'll link to the JavaScript file that you're going to program.
-
5:12
It should go after the link to the helpers.js file,
-
5:15
because our program will be using programming in that file.
-
5:19
In other words, we need the code in helpers.js to load first,
-
5:23
otherwise, our programming won't work.
-
5:25
Now, let's add a new file and add some programming to it.
-
5:28
I'm gonna choose File> New, from the menu here and name the file playlist.js.
-
5:36
I've added the file outside the js folder, that js folder is for
-
5:40
holding JavaScript files.
-
5:42
So, I'll just drag my new file on top of that folder to move it.
-
5:48
Okay, let's program.
-
5:50
I'll start by creating a variable with an empty array.
-
5:53
[BLANK_AUDIO]
-
5:57
These square brackets represent, what's called an array literal.
-
6:00
In this case its an empty array literal that has nothing in it.
-
6:04
So, let's add one item to the playlist using the push method.
-
6:07
[BLANK_AUDIO]
-
6:10
To see what the push method did,
-
6:12
let's print out the array using a printList function.
-
6:17
This printList function is in the helpers.js file.
-
6:20
It takes an array as an argument, and prints it out, as an ordered list in HTML.
-
6:26
Don't worry about how the programming behind this function works, yet.
-
6:29
In another video I'll teach you how to create this function.
-
6:33
But this is a good lesson in JavaScript programming.
-
6:36
You probably, won't write all of the programming, your websites will use.
-
6:40
You'll often use other people's codes, often called a library or a module or
-
6:45
a plugin, that provides helpful functions that you
-
6:48
can use without ever knowing exactly, how they work.
-
6:52
Let's Save the file and preview it.
-
6:56
All right, we have a list now of one item.
-
6:59
Let's add more.
-
7:00
How about adding more than one item at a time.
-
7:03
The push method can accept multiple arguments.
-
7:06
Each argument is one item that's added to the array.
-
7:10
Let's Save the file, and see what we've got.
-
7:12
Three items.
-
7:13
And notice that the songs Respect and
-
7:16
IMagine are after the first song that we added.
-
7:21
Now, let's add an item to the beginning of the list using the unshift method.
-
7:24
[BLANK_AUDIO]
-
7:30
Let's Save this file, and preview the workspace.
-
7:35
Now the first song, at the beginning of the array is the song we just added.
-
7:40
Let's add two more to the beginning.
-
7:41
[BLANK_AUDIO]
-
7:50
Save the file, and preview the workspace.
-
7:54
Great you've just practiced adding elements to an array,
-
7:58
in the next video you'll learn how to remove items from an array, see you there.
You need to sign up for Treehouse in order to download course files.
Sign up