1
00:00:00,460 --> 00:00:02,740
Arrays are one of the most powerful and

2
00:00:02,740 --> 00:00:05,190
commonly used data
structures in JavaScript.

3
00:00:05,190 --> 00:00:08,250
They let you group values to
build more complex structures.

4
00:00:08,250 --> 00:00:11,970
Because of that, you'll find that
there are many ways to work with them.

5
00:00:11,970 --> 00:00:15,458
Now, I'll teach you three of the most
common ways to add elements to an array.

6
00:00:16,930 --> 00:00:20,618
Let's start by visiting one of the best
sources of JavaScript documentation,

7
00:00:20,618 --> 00:00:23,525
the Mozilla Developer Network or MDN.

8
00:00:23,525 --> 00:00:28,230
Here, you'll find detailed information on
every aspect of the JavaScript language,

9
00:00:28,230 --> 00:00:30,252
including this page on arrays.

10
00:00:30,252 --> 00:00:33,980
In JavaScript, an array is not
only a type of data structure,

11
00:00:33,980 --> 00:00:38,370
an array is also considered a special
kind of object that has properties and

12
00:00:38,370 --> 00:00:40,260
methods you can use on it.

13
00:00:40,260 --> 00:00:42,360
The sidebar on the left
lists the properties and

14
00:00:42,360 --> 00:00:44,610
methods you can use with arrays.

15
00:00:44,610 --> 00:00:47,390
For example,
you can find the length of an array or

16
00:00:47,390 --> 00:00:51,140
the number of elements incited by
looking at the array's length property.

17
00:00:51,140 --> 00:00:54,320
It works much like using the length
property on a string to return

18
00:00:54,320 --> 00:00:56,370
how many characters are inside it.

19
00:00:56,370 --> 00:01:01,020
In this case, the length property returns
the number of elements in an array.

20
00:01:01,020 --> 00:01:03,800
For example,
if you had an array like this,

21
00:01:03,800 --> 00:01:07,350
you can find out the number of
elements in the array like this.

22
00:01:07,350 --> 00:01:12,470
This returns a link value of 3, which you
could, for example, display in a message.

23
00:01:12,470 --> 00:01:15,510
As you add elements to the array,
the link changes.

24
00:01:15,510 --> 00:01:16,830
It's a really handy property.

25
00:01:18,390 --> 00:01:22,340
Let's go back to the Mozilla Developer
Network's array documentation.

26
00:01:22,340 --> 00:01:25,960
Notice how there are lots of different
methods for working with arrays.

27
00:01:25,960 --> 00:01:30,060
For example, push is a useful
method that lets you add one or

28
00:01:30,060 --> 00:01:33,050
more elements to the end of an array.

29
00:01:33,050 --> 00:01:37,760
In your workspace or project folder,
open the file add.js and

30
00:01:37,760 --> 00:01:40,840
make sure to update
the script tag in index.html.

31
00:01:40,840 --> 00:01:45,050
The source attribute
should point to js/add.js.

32
00:01:46,900 --> 00:01:51,880
This file contains an array named
instruments holding three string values.

33
00:01:51,880 --> 00:01:56,790
To add guitar to the end of the
instruments array, type the array's name

34
00:01:56,790 --> 00:02:00,500
followed by a period, the word push,
and a set of parentheses.

35
00:02:01,740 --> 00:02:02,680
Inside the parentheses,

36
00:02:02,680 --> 00:02:06,630
you include the element or value you
wish to add to the end of the array.

37
00:02:08,190 --> 00:02:10,780
You can think of the push
method as pushing an item

38
00:02:10,780 --> 00:02:12,490
into the last spot of the array.

39
00:02:12,490 --> 00:02:16,870
I'll save this file and
preview index.html in the browser.

40
00:02:16,870 --> 00:02:18,630
Then in the JavaScript Console,

41
00:02:18,630 --> 00:02:21,620
I'll type instruments to
reference the instruments array.

42
00:02:21,620 --> 00:02:25,020
And notice how it's now
an array containing 4 elements.

43
00:02:25,020 --> 00:02:28,130
guitar appears at the end of the array.

44
00:02:28,130 --> 00:02:31,634
An array's length property automatically
updates when you modify the array.

45
00:02:32,791 --> 00:02:34,333
With the push method,

46
00:02:34,333 --> 00:02:38,820
you can add more than one item
to the end of the array at once.

47
00:02:38,820 --> 00:02:42,044
For example,
I'll add the strings violin and

48
00:02:42,044 --> 00:02:45,277
triangle to the end of
the instruments array.

49
00:02:47,854 --> 00:02:54,101
I'll check the array again in the Console,
And now it holds 6 elements.

50
00:02:55,582 --> 00:02:58,950
We are adding elements
to the end of the array.

51
00:02:58,950 --> 00:03:00,430
But what if for any reason,

52
00:03:00,430 --> 00:03:03,830
you need to add an element to
the beginning of an array?

53
00:03:03,830 --> 00:03:07,480
JavaScript also provides
the unshift method to do just that.

54
00:03:07,480 --> 00:03:10,210
Now, the name unshift might
seem a bit confusing.

55
00:03:10,210 --> 00:03:12,170
But it works much like the push method,

56
00:03:12,170 --> 00:03:16,070
except that it adds elements
to the beginning of an array.

57
00:03:16,070 --> 00:03:22,670
For example, to add an instrument to
the beginning of the instruments array,

58
00:03:22,670 --> 00:03:27,170
type instruments.unshift and
pass it the element or

59
00:03:27,170 --> 00:03:31,070
value you wish to add
like the string cowbell.

60
00:03:33,696 --> 00:03:35,048
And like the push method,

61
00:03:35,048 --> 00:03:38,315
you can add more than one element
to the beginning of the array.

62
00:03:47,399 --> 00:03:50,520
Now the instruments array
contains 8 instruments.

63
00:03:50,520 --> 00:03:51,920
That's a lot of instruments.

64
00:03:54,820 --> 00:04:00,815
Remember that each element in an array has
an index value starting at the 0 index.

65
00:04:00,815 --> 00:04:03,603
So you can visualize
the instruments array as so.

66
00:04:03,603 --> 00:04:07,695
All right, you've just practiced
adding elements to an array.

67
00:04:07,695 --> 00:04:10,385
In the next video, you'll learn
how to remove items from an array.