- What is an Array? 4:35
- Create an Array 2 objectives
- Access Elements in an Array 3:04
- Access Array Elements by Index 2 objectives
- Review Array Basics 5 questions
- Add Elements to an Array 4:10
- Add Elements to an Array 2 objectives
- Remove Elements From an Array 4:17
- Remove Elements From an Array 2 objectives
- Copy and Combine Arrays with the Spread Operator 7:18
- Review Adding, Removing, and Copying Array Elements 6 questions
Preview
Video Player
00:00
00:00
Add Elements to an Array
4:10Learn how to add elements to an array, as well as return the number of elements inside an array.
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