- 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
Copy and Combine Arrays with the Spread Operator
7:18Learn the basics of the spread operator (...), a special syntax JavaScript provides to build, combine, and manipulate arrays quickly and more seamlessly.
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