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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
JavaScript provides the pop() method for removing elements from the end of an array, and shift() for removing elements from the beginning.
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
Earlier, you learned about the push and
unshift methods.
0:00
They let you add one or more elements
to the end or beginning of an array.
0:03
JavaScript also provides two methods for
removing elements from the end or
0:09
beginning of an array,
they're called pop and shift.
0:13
The pop method is like
the opposite of push.
0:17
While push pushes an element
to the end of the array,
0:20
pop pops the item off the end, and
shift is like the opposite of unshift.
0:23
It removes the first
element from an array.
0:28
Let's revisit the shoppingList array and
run the pop method on it.
0:31
The last item, coffee,
gets removed by pop.
0:35
Now the shoppingList array
holds three elements.
0:38
Pop doesn't just remove the last element,
it also returns the last element.
0:41
In other words, you can use pop to
retrieve the last element of an array.
0:46
For example, create a variable and assign
it the value returned by pop like this.
0:50
Now the lastItem variable
holds the string honey.
0:55
The shift method is similar except that it
removes the first element from an array.
0:58
Let's bring back the original shoppingList array
and this time call shift on it.
1:03
Now the first value, bread,
gets removed from the array and
1:09
assigned to the firstItem variable.
1:12
Push and shift methods are often used
together to create highly organized data
1:15
structures called queues,
or lists of items
1:19
that follow the logic of first in
first out, which is often called FIFO.
1:22
It's similar to a line or
queue at a store.
1:27
New customers join the end of the line,
like the push method, and
1:29
the customer at the front of
the line gets help first.
1:33
That's the shift method.
1:36
In other words,
the first element is processed first and
1:37
the newest element is processed last.
1:40
Now open the file remove.js.
1:43
In index.html, update the script tag
1:47
source attribute to js/remove.js.
1:51
Start by creating an array of numbers.
1:56
I'll store the numbers 100,
200, 300, 400, and 500.
2:00
A good way to practice using the push and
2:08
shift methods is in
the JavaScript console.
2:10
The console is a great place to
test small snippets of code and
2:14
practice with different
JavaScript methods.
2:17
For instance, you can find out the number
of elements inside the numbers array
2:19
using the length property,
which returns five elements.
2:23
I can add an item to the end using push.
2:28
The push method returns the length
of the array, which is now 6.
2:34
Now if I type numbers in the console,
2:37
it displays the current
elements in the array.
2:40
To remove an element from the end of
the array, I'll type numbers.pop.
2:44
Notice how I'm not passing any
arguments to the pop method.
2:51
The pop method does not accept arguments.
2:54
Remember, pop returns the last
element after removing it.
2:57
This returns 600 because the value 600 was
the last element in the numbers array.
3:00
There are now five elements in the array.
3:06
Checking the latest value of numbers
returns the array with the five elements.
3:09
Now let's add a new item to the beginning
of the numbers array, the number 0.
3:14
This returns the value 6 because there
are now six elements in the array.
3:25
Type numbers to see what's in the array,
3:31
and you'll see that
the first element is 0.
3:32
Finally, let's remove the first
element using the shift method.
3:37
Like the pop method,
shift does not take an argument.
3:41
So I'll type numbers.shift.
3:45
Shift also returns the first
element after removing it.
3:49
This returns the number 0.
3:54
Typing numbers outputs the latest
array without zero in it.
3:56
I'll run numbers.shift one more time by
pressing the up arrow key twice to bring
4:00
back the numbers.shift statement.
4:04
This returns the number 100.
4:07
And notice how the latest numbers array
does not have the number 100 inside it.
4:11
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