1
00:00:00,620 --> 00:00:03,730
Earlier, you learned about the push and
unshift methods.

2
00:00:03,730 --> 00:00:09,500
They let you add one or more elements
to the end or beginning of an array.

3
00:00:09,500 --> 00:00:13,340
JavaScript also provides two methods for
removing elements from the end or

4
00:00:13,340 --> 00:00:17,380
beginning of an array,
they're called pop and shift.

5
00:00:17,380 --> 00:00:20,230
The pop method is like
the opposite of push.

6
00:00:20,230 --> 00:00:23,350
While push pushes an element
to the end of the array,

7
00:00:23,350 --> 00:00:28,160
pop pops the item off the end, and
shift is like the opposite of unshift.

8
00:00:28,160 --> 00:00:30,290
It removes the first
element from an array.

9
00:00:31,420 --> 00:00:35,710
Let's revisit the shoppingList array and
run the pop method on it.

10
00:00:35,710 --> 00:00:38,840
The last item, coffee,
gets removed by pop.

11
00:00:38,840 --> 00:00:41,850
Now the shoppingList array
holds three elements.

12
00:00:41,850 --> 00:00:46,580
Pop doesn't just remove the last element,
it also returns the last element.

13
00:00:46,580 --> 00:00:50,550
In other words, you can use pop to
retrieve the last element of an array.

14
00:00:50,550 --> 00:00:55,500
For example, create a variable and assign
it the value returned by pop like this.

15
00:00:55,500 --> 00:00:58,980
Now the lastItem variable
holds the string honey.

16
00:00:58,980 --> 00:01:03,990
The shift method is similar except that it
removes the first element from an array.

17
00:01:03,990 --> 00:01:08,080
Let's bring back the original shoppingList array
and this time call shift on it.

18
00:01:09,330 --> 00:01:12,835
Now the first value, bread,
gets removed from the array and

19
00:01:12,835 --> 00:01:15,042
assigned to the firstItem variable.

20
00:01:15,042 --> 00:01:19,603
Push and shift methods are often used
together to create highly organized data

21
00:01:19,603 --> 00:01:22,231
structures called queues,
or lists of items

22
00:01:22,231 --> 00:01:27,030
that follow the logic of first in
first out, which is often called FIFO.

23
00:01:27,030 --> 00:01:29,610
It's similar to a line or
queue at a store.

24
00:01:29,610 --> 00:01:33,580
New customers join the end of the line,
like the push method, and

25
00:01:33,580 --> 00:01:36,180
the customer at the front of
the line gets help first.

26
00:01:36,180 --> 00:01:37,530
That's the shift method.

27
00:01:37,530 --> 00:01:40,250
In other words,
the first element is processed first and

28
00:01:40,250 --> 00:01:42,260
the newest element is processed last.

29
00:01:43,730 --> 00:01:47,034
Now open the file remove.js.

30
00:01:47,034 --> 00:01:51,514
In index.html, update the script tag

31
00:01:51,514 --> 00:01:56,010
source attribute to js/remove.js.

32
00:01:56,010 --> 00:01:57,513
Start by creating an array of numbers.

33
00:02:00,529 --> 00:02:08,042
I'll store the numbers 100,
200, 300, 400, and 500.

34
00:02:08,042 --> 00:02:10,866
A good way to practice using the push and

35
00:02:10,866 --> 00:02:14,380
shift methods is in
the JavaScript console.

36
00:02:14,380 --> 00:02:17,650
The console is a great place to
test small snippets of code and

37
00:02:17,650 --> 00:02:19,500
practice with different
JavaScript methods.

38
00:02:19,500 --> 00:02:23,230
For instance, you can find out the number
of elements inside the numbers array

39
00:02:23,230 --> 00:02:28,000
using the length property,
which returns five elements.

40
00:02:28,000 --> 00:02:31,673
I can add an item to the end using push.

41
00:02:34,855 --> 00:02:37,976
The push method returns the length
of the array, which is now 6.

42
00:02:37,976 --> 00:02:40,055
Now if I type numbers in the console,

43
00:02:40,055 --> 00:02:42,750
it displays the current
elements in the array.

44
00:02:44,840 --> 00:02:51,090
To remove an element from the end of
the array, I'll type numbers.pop.

45
00:02:51,090 --> 00:02:54,330
Notice how I'm not passing any
arguments to the pop method.

46
00:02:54,330 --> 00:02:57,100
The pop method does not accept arguments.

47
00:02:57,100 --> 00:03:00,507
Remember, pop returns the last
element after removing it.

48
00:03:00,507 --> 00:03:06,690
This returns 600 because the value 600 was
the last element in the numbers array.

49
00:03:06,690 --> 00:03:09,400
There are now five elements in the array.

50
00:03:09,400 --> 00:03:13,240
Checking the latest value of numbers
returns the array with the five elements.

51
00:03:14,360 --> 00:03:18,441
Now let's add a new item to the beginning
of the numbers array, the number 0.

52
00:03:25,864 --> 00:03:31,310
This returns the value 6 because there
are now six elements in the array.

53
00:03:31,310 --> 00:03:32,790
Type numbers to see what's in the array,

54
00:03:32,790 --> 00:03:35,465
and you'll see that
the first element is 0.

55
00:03:37,010 --> 00:03:41,990
Finally, let's remove the first
element using the shift method.

56
00:03:41,990 --> 00:03:45,870
Like the pop method,
shift does not take an argument.

57
00:03:45,870 --> 00:03:49,876
So I'll type numbers.shift.

58
00:03:49,876 --> 00:03:54,150
Shift also returns the first
element after removing it.

59
00:03:54,150 --> 00:03:56,260
This returns the number 0.

60
00:03:56,260 --> 00:04:00,480
Typing numbers outputs the latest
array without zero in it.

61
00:04:00,480 --> 00:04:04,884
I'll run numbers.shift one more time by
pressing the up arrow key twice to bring

62
00:04:04,884 --> 00:04:07,510
back the numbers.shift statement.

63
00:04:07,510 --> 00:04:08,566
This returns the number 100.

64
00:04:11,853 --> 00:04:16,500
And notice how the latest numbers array
does not have the number 100 inside it.