WEBVTT

1
00:00:00.160 --> 00:00:03.100
Hi and welcome to this
video course on JavaScript.

2
00:00:03.130 --> 00:00:05.520
I'll be discussing two important operators

3
00:00:05.550 --> 00:00:10.420
that you should be aware of that are
the rest and spread operators.

4
00:00:10.450 --> 00:00:13.780
The spread operator is one
we'll use quite a bit.

5
00:00:13.810 --> 00:00:19.500
Let's say we want to add a hobby to an
array without editing the original array.

6
00:00:19.530 --> 00:00:26.940
We want to create a new array with old
values and create new array from it.

7
00:00:26.970 --> 00:00:32.060
This is a common pattern called
immutability where we never edit existing

8
00:00:32.090 --> 00:00:37.500
values but always replace them
with the copies and maybe plus changes.

9
00:00:37.530 --> 00:00:41.860
To copy an array,
we can use slice operator or create a new

10
00:00:41.890 --> 00:00:45.340
array with square brackets
and add the elements.

11
00:00:45.370 --> 00:00:49.860
However, this will result
in a nested array and not a copy.

12
00:00:49.890 --> 00:00:55.260
To overcome this, we can use the spread
operator represented by three dots.

13
00:00:55.290 --> 00:01:00.820
The spread operator pulls out all
of the elements from the array or object

14
00:01:00.850 --> 00:01:05.410
and adds them one by one
to the new array or an object.

15
00:01:05.440 --> 00:01:07.020
For example,

16
00:01:07.050 --> 00:01:15.820
let's create hobbies array and let's
give sports and cooking to this array.

17
00:01:15.850 --> 00:01:24.700
And now let's recreate this array
and create a copied hobbies array.

18
00:01:24.730 --> 00:01:30.740
We need to use spread operator
for this represented by three dots.

19
00:01:30.770 --> 00:01:35.460
Now if we were to console log copied

20
00:01:35.490 --> 00:01:40.780
hobbies array, we're going to see
sports and cooking appear there.

21
00:01:40.810 --> 00:01:44.460
You can also copy an object
using spread operator.

22
00:01:44.490 --> 00:01:47.700
For example, let's create a person object

23
00:01:47.730 --> 00:01:51.800
and let's give this person
a name and it will be Nata.

24
00:01:51.830 --> 00:01:55.460
And let's give this person
an age and it will be 26.

25
00:01:55.490 --> 00:02:01.900
In order to copy this object, all you have
to do is use the spread operator again.

26
00:02:01.930 --> 00:02:06.720
So let's create copied person

27
00:02:07.040 --> 00:02:12.450
and let's use the spread operator
and put person here.

28
00:02:12.480 --> 00:02:16.140
And now let's do copied person.

29
00:02:16.170 --> 00:02:22.100
Let's see and we see
the same object appear here.

30
00:02:22.130 --> 00:02:28.730
You can also do something like this
where you add some values to this object.

31
00:02:28.760 --> 00:02:36.660
Let's say we want to add a hobby
traveling.

32
00:02:36.690 --> 00:02:40.980
Now if we output this,
we're going to see hobby here as well.

33
00:02:41.010 --> 00:02:46.060
You can do the same with the race
and let's add some values to these hobbies

34
00:02:46.090 --> 00:02:52.060
such as traveling for example
whoops, I misspelled this.

35
00:02:52.090 --> 00:02:54.140
Great, let's save this.

36
00:02:54.170 --> 00:02:58.180
And now we're going to see
traveling appear here as well.

37
00:02:58.200 --> 00:03:00.220
Okay, now let's discuss the rest operator

38
00:03:00.250 --> 00:03:02.860
which is the opposite
of the spread operator.

39
00:03:02.890 --> 00:03:06.660
It merges multiple
arguments into an array.

40
00:03:06.690 --> 00:03:10.540
The rest operator is represented
by three dots as well

41
00:03:10.570 --> 00:03:12.900
just like the spread operator.

42
00:03:12.930 --> 00:03:16.100
The difference lies
in the place where you use it.

43
00:03:16.130 --> 00:03:21.300
If you use it in the argument list
of a function, it's the rest operator.

44
00:03:21.330 --> 00:03:24.460
For example, let's do something like this.

45
00:03:24.490 --> 00:03:28.260
Let's create two array function.

46
00:03:28.290 --> 00:03:32.500
Let's create the arguments with the rest

47
00:03:32.530 --> 00:03:37.940
operator and let's make
it return the argument.

48
00:03:37.970 --> 00:03:44.980
Now if we console log two array
one, two, three for example as our

49
00:03:45.010 --> 00:03:50.220
arguments, if we run this,
we're going to see that it's an array.

50
00:03:50.240 --> 00:03:50.940
In conclusion,

51
00:03:50.970 --> 00:03:54.660
the spread operator and the rest
operator are two important operators.

52
00:03:54.690 --> 00:03:56.300
In modern JavaScript,

53
00:03:56.330 --> 00:04:00.610
the spread operator is used to pull out
elements from an array or an object,

54
00:04:00.640 --> 00:04:05.780
while the rest operator is used to merge
multiple arguments into an array.

55
00:04:05.800 --> 00:04:07.720
Thanks for watchman and see
you in the next video.