1
00:00:00,182 --> 00:00:03,208
You learned that with the push and
unshift methods,

2
00:00:03,208 --> 00:00:06,940
you can add elements to the end and
beginning of an array.

3
00:00:06,940 --> 00:00:10,960
But what if you want to add elements
somewhere between the beginning and end or

4
00:00:10,960 --> 00:00:14,320
combine two or
more arrays into a single array?

5
00:00:14,320 --> 00:00:18,090
For example, say you had student
lists from two different sources or

6
00:00:18,090 --> 00:00:22,790
arrays, and you needed to combine
both to make a single students list.

7
00:00:22,790 --> 00:00:26,343
In this video, I'll teach you
the basics of the spread operator,

8
00:00:26,343 --> 00:00:29,706
a special syntax JavaScript
provides to build, combine, and

9
00:00:29,706 --> 00:00:32,379
manipulate arrays quickly and
more seamlessly.

10
00:00:32,379 --> 00:00:37,977
Open the file spread.js, and
as always, in index.html,

11
00:00:37,977 --> 00:00:44,143
update the script tag source
attribute value to js/spread.js.

12
00:00:46,494 --> 00:00:50,177
spread.js currently contains
an array named middle,

13
00:00:50,177 --> 00:00:53,859
which holds the strings lettuce,
cheese, and patty,

14
00:00:53,859 --> 00:00:59,100
and a burger array that contains
the strings top bun and bottom bun.

15
00:00:59,100 --> 00:01:02,050
The spread operator expands an array, or

16
00:01:02,050 --> 00:01:05,470
places the contents of one
array into another array.

17
00:01:05,470 --> 00:01:10,000
For example, I want to add
the contents of this middle array

18
00:01:10,000 --> 00:01:15,220
inside the burger array between
the strings top bun and bottom bun.

19
00:01:15,220 --> 00:01:17,807
I'll first try adding
the middle variable to

20
00:01:17,807 --> 00:01:20,265
the burger array between the two strings.

21
00:01:23,032 --> 00:01:25,824
I'll log the burger array to the console.

22
00:01:29,711 --> 00:01:32,316
When the burger array gets updated,

23
00:01:32,316 --> 00:01:37,480
notice how the middle array literal
is inserted into the burger array.

24
00:01:37,480 --> 00:01:38,940
It's an array with an array.

25
00:01:38,940 --> 00:01:42,492
This is okay if you're trying to create
what's called a two-dimensional array,

26
00:01:42,492 --> 00:01:44,583
which you'll learn about
later in this course.

27
00:01:44,583 --> 00:01:47,870
What I want is a single array
with the five elements.

28
00:01:49,090 --> 00:01:55,220
With the spread operator, you pass only
the values of an array into another array.

29
00:01:55,220 --> 00:01:57,770
The spread syntax consists of three dots,

30
00:01:57,770 --> 00:01:59,990
immediately followed by
the name of the array.

31
00:01:59,990 --> 00:02:02,260
Just before the middle variable, add ...

32
00:02:04,070 --> 00:02:08,580
By prepending the three dots to
the variable name, all the values from

33
00:02:08,580 --> 00:02:13,580
the middle array get unpacked and
spread out into the burger array.

34
00:02:13,580 --> 00:02:17,949
Notice how its length value is now 5.

35
00:02:17,949 --> 00:02:21,589
Think of it like you're creating
a copy of the middle array and

36
00:02:21,589 --> 00:02:25,080
adding new elements into
it at the same time.

37
00:02:25,080 --> 00:02:28,970
Taking the contents of an array and
spreading it out to fill another array

38
00:02:28,970 --> 00:02:31,730
is one of the most common
uses of the spread operator.

39
00:02:32,790 --> 00:02:35,850
There will be times when
you'll need to combine two or

40
00:02:35,850 --> 00:02:37,830
more arrays into a new array.

41
00:02:37,830 --> 00:02:40,660
JavaScript provides a few
different ways to do this, but

42
00:02:40,660 --> 00:02:44,790
the spread syntax offers the most
concise and elegant solution.

43
00:02:44,790 --> 00:02:48,950
For instance, let's bring back
our wondrous instruments array.

44
00:02:48,950 --> 00:02:52,000
But this time, we'll build that
array from multiple arrays.

45
00:02:53,070 --> 00:02:56,990
First, I'll create an array named brass.

46
00:02:56,990 --> 00:03:03,093
This array holds the values trumpet,
trombone,

47
00:03:05,484 --> 00:03:13,055
french horn, baritone, and tuba.

48
00:03:17,332 --> 00:03:24,360
Next, I'll create an array named
woodwind to hold the strings flute,

49
00:03:26,688 --> 00:03:30,918
oboe, clarinet,

50
00:03:33,250 --> 00:03:37,900
saxophone, and bassoon.

51
00:03:42,632 --> 00:03:45,221
Now I want to combine the brass and

52
00:03:45,221 --> 00:03:49,670
woodwind arrays into a single
array named instruments.

53
00:03:51,820 --> 00:03:54,180
What should I include inside this array?

54
00:03:54,180 --> 00:03:59,858
Again, I'll use the spread syntax to bring
in the contents of the brass array and

55
00:03:59,858 --> 00:04:03,627
the woodwind array into
this new instruments array.

56
00:04:07,143 --> 00:04:12,079
Logging the value of instruments to
the console returns all ten items in

57
00:04:12,079 --> 00:04:13,570
one array.

58
00:04:13,570 --> 00:04:19,620
The spread operator extracted each
element in the initial arrays and

59
00:04:19,620 --> 00:04:22,450
placed it in a new array, good.

60
00:04:22,450 --> 00:04:28,020
Earlier I mentioned that the spread syntax
creates a copy of the original array.

61
00:04:28,020 --> 00:04:32,170
This means that even when the elements
inside the original array change,

62
00:04:32,170 --> 00:04:37,760
like the brass or woodwind arrays, the new
array, like instruments, remains the same.

63
00:04:37,760 --> 00:04:42,284
For example, I'll call the push
method on the brass array and

64
00:04:42,284 --> 00:04:45,938
add the string flugelhorn
to the end of the array.

65
00:04:50,238 --> 00:04:55,910
In the console, notice how flugelhorn does
not appear in the new instruments array.

66
00:04:55,910 --> 00:04:59,440
But if I type brass to see
the contents of the original array,

67
00:04:59,440 --> 00:05:01,980
flugelhorn was indeed added to the end.

68
00:05:04,130 --> 00:05:08,169
The same would happen with the shift,
unshift, and pop methods.

69
00:05:08,169 --> 00:05:09,237
For example,

70
00:05:09,237 --> 00:05:15,710
woodwind.pop does not remove an element
from the end of the instruments array.

71
00:05:15,710 --> 00:05:17,580
It affects the woodwind array only.

72
00:05:19,230 --> 00:05:23,400
To add elements to the new instruments
array, you can use the push and

73
00:05:23,400 --> 00:05:24,830
unshift methods.

74
00:05:24,830 --> 00:05:28,118
For example, instruments.unshift,

75
00:05:30,136 --> 00:05:34,272
guitar and
piano adds the strings guitar and

76
00:05:34,272 --> 00:05:38,974
piano to the beginning of
the instruments array.

77
00:05:43,082 --> 00:05:46,819
Another handy aspect of the spread
operator is that you can use it to

78
00:05:46,819 --> 00:05:49,540
pass arrays as arguments to functions.

79
00:05:49,540 --> 00:05:52,960
Sometimes functions can accept
any number of arguments.

80
00:05:52,960 --> 00:05:56,290
For example, the Math.max function

81
00:05:56,290 --> 00:06:00,340
returns the largest number from a set
of number values passed into it.

82
00:06:01,920 --> 00:06:07,697
I'll create a numbers array and
store four numbers inside it,

83
00:06:07,697 --> 00:06:10,646
10, 20, 30, and 40.

84
00:06:10,646 --> 00:06:16,416
If I pass Math.max a reference to
the numbers array using just the variable

85
00:06:16,416 --> 00:06:22,940
name and log it to the console, notice
how this returns NaN, or not a number.

86
00:06:22,940 --> 00:06:27,080
Remember, NaN is JavaScript's way of
saying that it can't find a number,

87
00:06:27,080 --> 00:06:31,730
the argument passed to Math.max
cannot be converted to a number.

88
00:06:31,730 --> 00:06:36,650
With the spread operator, you can expand
an array into different arguments.

89
00:06:36,650 --> 00:06:43,519
Passing Math.max the arguments via
...numbers returns the number 40.

90
00:06:43,519 --> 00:06:48,155
Similarly, passing
...numbers to the Math.min

91
00:06:48,155 --> 00:06:53,106
function returns the lowest
number in the array, 10.

92
00:06:53,106 --> 00:06:57,815
The spread operator has lots of other uses
which you'll learn about in later courses

93
00:06:57,815 --> 00:06:58,990
and workshops.

94
00:06:58,990 --> 00:07:00,410
To learn about some of them now,

95
00:07:00,410 --> 00:07:03,240
be sure to have a look at
the teacher's notes with this video.

96
00:07:03,240 --> 00:07:07,120
All right, you've learned the basics of
arrays, how to create them, how to add and

97
00:07:07,120 --> 00:07:10,190
remove array elements,
even copy and combine arrays.

98
00:07:10,190 --> 00:07:13,640
That's a great start, but
there's more to working with arrays.

99
00:07:13,640 --> 00:07:15,380
And one of the most important skills for

100
00:07:15,380 --> 00:07:17,670
working with arrays is
coming up in the next stage.