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
Start a free Courses trial
to watch this video
Learn the basics of the spread operator (...), a special syntax JavaScript provides to build, combine, and manipulate arrays quickly and more seamlessly.
Resources
Making a copy of an array with the spread operator
One of the main benefits of copying an array is that you preserve the values of the original array. For example, the original mathStudents and scienceStudents arrays remain unchanged (won't be mutated) if you decide to push or pop elements in and out of the copies of those arrays.
const mathStudents = [
'Marty',
'Jennifer',
'Lorraine',
'Goldie'
];
const scienceStudents = [
'Emmett',
'Clara',
'Needles',
'Strickland'
];
const mathStudentsCopy = [...mathStudents];
const scienceStudentsCopy = [...scienceStudents];
// This affects the copied arrays only
// The original arrays remain unchanged
mathStudentsCopy.pop();
scienceStudentsCopy.push('Marvin');
You learned that with the push and
unshift methods,
0:00
you can add elements to the end and
beginning of an array.
0:03
But what if you want to add elements
somewhere between the beginning and end or
0:06
combine two or
more arrays into a single array?
0:10
For example, say you had student
lists from two different sources or
0:14
arrays, and you needed to combine
both to make a single students list.
0:18
In this video, I'll teach you
the basics of the spread operator,
0:22
a special syntax JavaScript
provides to build, combine, and
0:26
manipulate arrays quickly and
more seamlessly.
0:29
Open the file spread.js, and
as always, in index.html,
0:32
update the script tag source
attribute value to js/spread.js.
0:37
Spread.js currently contains
an array named middle,
0:46
which holds the strings lettuce,
cheese, and patty,
0:50
and a burger array that contains
the strings top bun and bottom bun.
0:53
The spread operator expands an array, or
0:59
places the contents of one
array into another array.
1:02
For example, I want to add
the contents of this middle array
1:05
inside the burger array between
the strings top bun and bottom bun.
1:10
I'll first try adding
the middle variable to
1:15
the burger array between the two strings.
1:17
I'll log the burger array to the console.
1:23
When the burger array gets updated,
1:29
notice how the middle array literal
is inserted into the burger array.
1:32
It's an array with an array.
1:37
This is okay if you're trying to create
what's called a two-dimensional array,
1:38
which you'll learn about
later in this course.
1:42
What I want is a single array
with the five elements.
1:44
With the spread operator, you pass only
the values of an array into another array.
1:49
The spread syntax consists of three dots,
1:55
immediately followed by
the name of the array.
1:57
Just before the middle variable, add
1:59
By prepending the three dots to
the variable name, all the values from
2:04
the middle array get unpacked and
spread out into the burger array.
2:08
Notice how its length value is now 5.
2:13
Think of it like you're creating
a copy of the middle array and
2:17
adding new elements into
it at the same time.
2:21
Taking the contents of an array and
spreading it out to fill another array
2:25
is one of the most common
uses of the spread operator.
2:28
There will be times when
you'll need to combine two or
2:32
more arrays into a new array.
2:35
JavaScript provides a few
different ways to do this, but
2:37
the spread syntax offers the most
concise and elegant solution.
2:40
For instance, let's bring back
our wondrous instruments array.
2:44
But this time, we'll build that
array from multiple arrays.
2:48
First, I'll create an array named brass.
2:53
This array holds the values trumpet,
trombone,
2:56
french horn, baritone, and tuba.
3:05
Next, I'll create an array named
woodwind to hold the strings flute,
3:17
oboe, clarinet,
3:26
saxophone, and bassoon.
3:33
Now I want to combine the brass and
3:42
woodwind arrays into a single
array named instruments.
3:45
What should I include inside this array?
3:51
Again, I'll use the spread syntax to bring
in the contents of the brass array and
3:54
the woodwind array into
this new instruments array.
3:59
Logging the value of instruments to
the console returns all ten items in
4:07
one array.
4:12
The spread operator extracted each
element in the initial arrays and
4:13
placed it in a new array, good.
4:19
Earlier I mentioned that the spread syntax
creates a copy of the original array.
4:22
This means that even when the elements
inside the original array change,
4:28
like the brass or woodwind arrays, the new
array, like instruments, remains the same.
4:32
For example, I'll call the push
method on the brass array and
4:37
add the string flugelhorn
to the end of the array.
4:42
In the console, notice how flugelhorn does
not appear in the new instruments array.
4:50
But if I type brass to see
the contents of the original array,
4:55
flugelhorn was indeed added to the end.
4:59
The same would happen with the shift,
unshift, and pop methods.
5:04
For example,
5:08
woodwind.pop does not remove an element
from the end of the instruments array.
5:09
It affects the woodwind array only.
5:15
To add elements to the new instruments
array, you can use the push and
5:19
unshift methods.
5:23
For example, instruments.unshift,
5:24
guitar and
piano adds the strings guitar and
5:30
piano to the beginning of
the instruments array.
5:34
Another handy aspect of the spread
operator is that you can use it to
5:43
pass arrays as arguments to functions.
5:46
Sometimes functions can accept
any number of arguments.
5:49
For example, the Math.max function
5:52
returns the largest number from a set
of number values passed into it.
5:56
I'll create a numbers array and
store four numbers inside it,
6:01
10, 20, 30, and 40.
6:07
If I pass Math.max a reference to
the numbers array using just the variable
6:10
name and log it to the console, notice
how this returns NaN, or not a number.
6:16
Remember, NaN is JavaScript's way of
saying that it can't find a number,
6:22
the argument passed to Math.max
cannot be converted to a number.
6:27
With the spread operator, you can expand
an array into different arguments.
6:31
Passing Math.max the arguments via
...numbers returns the number 40.
6:36
Similarly, passing
...numbers to the Math.min
6:43
function returns the lowest
number in the array, 10.
6:48
The spread operator has lots of other uses
which you'll learn about in later courses
6:53
and workshops.
6:57
To learn about some of them now,
6:58
be sure to have a look at
the teacher's notes with this video.
7:00
All right, you've learned the basics of
arrays, how to create them, how to add and
7:03
remove array elements,
even copy and combine arrays.
7:07
That's a great start, but
there's more to working with arrays.
7:10
And one of the most important skills for
7:13
working with arrays is
coming up in the next stage.
7:15
You need to sign up for Treehouse in order to download course files.
Sign up