Arrays are one of the most powerful, and

commonly used data structures in JavaScript.

Because of that, you'll find that there's many ways to work with them.

In this video, I'll show you three of the most common ways to add items to an array.

To get started,

let's take a trip to one of the best sources of JavaScript documentation.

The Mozilla Developer Network.

You can find detailed information on every aspect of the JavaScript language at

the Mozilla Developer Network, including this page discussing arrays.

The sidebar on the left, lists Properties and Methods of the array object.

Let's check out this property called length.

The length property contains, the number of items in the array.

For example, let's say, you had an array like this.

You could find out, the number of items in the array with this code.

The length property is like a variable for that array.

As you add items to the array?

The length changes.

Remember this property, it comes in handy a lot of the time.

In fact, it's one way you can add an item to the end of an array.

For example, to add the number 7 to the end of the array, I would write this.

Now the numbers array, contains these values.

But how does this work?

Remember that each item in an Array has an index value.

So we could look at the original item's array like this.

[NOISE] What would the next index value be this array?

6, which is also the number of items, currently in the array.

In other words, the index value for the next item to be

added to an Array is the same, as the number of items in the Array.

That is, it equals the length of the array.

To add an item to the end of the Array, we just add it,

at an index that matches the total number of items in the array.

How's your brain feeling?

If you're like me, it probably hurts a little bit, right now.

I know mine did, when I first was learning about arrays and index values.

Fortunately, there's an easier way to add an item to the end of an array.

The push method.

Let's go back to the Mozilla Developer Network, and the array documentation.

As you can see, there are lots and lots of Methods for arrays.

Remember, an Method is like an action, you can perform on an object.

In the case of Arrays, there are lots of different Methods for working with them.

The push method, lets you add one or more items to the end of an array.

To use it, you simply type the array's name, followed by a period, the word push,

and a set of parenthesis.

[BLANK_AUDIO]

Inside the parenthesis,.

You type the item, you wish to add to the end of the array.

You can think of the push method,

as pushing an item into the last spot of the array.

For example, we could add 7 to the end of the number array, like this.

[SOUND] That's a lot easier than using the length of the array, isn't it?

Another benefit of the push method is that you can add,

more than one item to the end of the array at once.

For example, if I wanted to add 7, 8, and

9 to the end of the numbers array, [SOUND] I'd do this.

JavaScript also includes a method for

adding an item to the beginning of the array.

It has an unfortunately, confusing name, unshift.

It works just like the push method.

For example, say I wanted to add 0 to the beginning of the numbers array.

I just type the name of the array [NOISE] followed by [NOISE] a period,

unshift, an opening parenthesis, the number 0, and a closing parenthesis.

And just like push, you can add [NOISE] more than one item [NOISE] to

the beginning [NOISE] of an array.

[NOISE] Let's try out these methods for adding items to an array.

We'll create an empty array, fill it full of song names and

then, display it on the page, like this.

If you'd like to follow along, click the Launch Workspace button on this page.

Or you can download the project files, and use your own text editor.

We'll start by linking a couple of JavaScript files to the Web page.

Click on the index.html file to open it.

I teach how to attach external JavaScript files to a page,

in the JavaScript Basics course here at Treehouse.

If you're not sure how external JavaScript files work, or how to use them,

I've added a link in the Teacher's notes that discusses how to

use external JavaScript files.

I've created one JavaScript file already called helpers.js.

It has a function in it, that we'll use in this video.

You can check out the code in that file if you'd like, but

it includes some features I haven't taught yet.

In fact, later in this course, I'll teach you how to create that function.

To use the function in that file, we need to link to the file.

I'll add the link here, just before the closing body tag.

When the web browser runs in to this line of HTML, it loads the file, and

runs the JavaScript inside of it.

It's common to place JavaScript files before the closing body tag, like this.

Because it let's the Web page load and display, before the JavaScript runs.

Next, we'll link to the JavaScript file that you're going to program.

It should go after the link to the helpers.js file,

because our program will be using programming in that file.

In other words, we need the code in helpers.js to load first,

otherwise, our programming won't work.

Now, let's add a new file and add some programming to it.

I'm gonna choose File> New, from the menu here and name the file playlist.js.

I've added the file outside the js folder, that js folder is for

holding JavaScript files.

So, I'll just drag my new file on top of that folder to move it.

Okay, let's program.

I'll start by creating a variable with an empty array.

[BLANK_AUDIO]

These square brackets represent, what's called an array literal.

In this case its an empty array literal that has nothing in it.

So, let's add one item to the playlist using the push method.

[BLANK_AUDIO]

To see what the push method did,

let's print out the array using a printList function.

This printList function is in the helpers.js file.

It takes an array as an argument, and prints it out, as an ordered list in HTML.

Don't worry about how the programming behind this function works, yet.

In another video I'll teach you how to create this function.

But this is a good lesson in JavaScript programming.

You probably, won't write all of the programming, your websites will use.

You'll often use other people's codes, often called a library or a module or

a plugin, that provides helpful functions that you

can use without ever knowing exactly, how they work.

Let's Save the file and preview it.

All right, we have a list now of one item.

Let's add more.

How about adding more than one item at a time.

The push method can accept multiple arguments.

Each argument is one item that's added to the array.

Let's Save the file, and see what we've got.

Three items.

And notice that the songs Respect and

IMagine are after the first song that we added.

Now, let's add an item to the beginning of the list using the unshift method.

[BLANK_AUDIO]

Let's Save this file, and preview the workspace.

Now the first song, at the beginning of the array is the song we just added.

Let's add two more to the beginning.

[BLANK_AUDIO]

Save the file, and preview the workspace.

Great you've just practiced adding elements to an array,

in the next video you'll learn how to remove items from an array, see you there.