- 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
Remove Elements From an Array
4:17JavaScript provides the pop() method for removing elements from the end of an array, and shift() for removing elements from the beginning.
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