WEBVTT

1
00:00:00.320 --> 00:00:05.140
Hi and welcome to the world of JavaScript
where we make coding easy and fun.

2
00:00:05.170 --> 00:00:07.460
Today we're going to talk
about destructuring

3
00:00:07.490 --> 00:00:11.980
that is a feature that makes working
with arrays and objects a lot simpler.

4
00:00:12.010 --> 00:00:14.580
Destructuring is a way of extracting data

5
00:00:14.610 --> 00:00:18.740
from arrays, objects,
maps and sets into distinct variables.

6
00:00:18.760 --> 00:00:24.100
It helps us avoid repetitive and confusing
code by allowing us to extract data

7
00:00:24.130 --> 00:00:28.500
from complex data structures
in a concise and organized manner.

8
00:00:28.530 --> 00:00:34.220
For example, let's consider the following
code where we are going to have an object

9
00:00:34.250 --> 00:00:42.700
of a person
and person's name is going to be Nata,

10
00:00:42.730 --> 00:00:51.460
their age is going to be 26 and their
occupation is going to be a developer.

11
00:00:51.490 --> 00:00:57.220
And let's consider what would happen if we
want to have these in separate variables.

12
00:00:57.250 --> 00:01:00.580
We would probably do something like this.

13
00:01:00.610 --> 00:01:03.900
The name would be person name

14
00:01:03.930 --> 00:01:08.570
and the age would be person age and the

15
00:01:08.600 --> 00:01:15.980
occupation would be person occupation.

16
00:01:16.010 --> 00:01:18.380
As you can see, this code is repetitive

17
00:01:18.410 --> 00:01:22.620
and can become confusing if we have
multiple properties to extract.

18
00:01:22.650 --> 00:01:25.340
This is where Destructuring
comes in handy.

19
00:01:25.370 --> 00:01:30.260
The same code but with
Destructuring would be this.

20
00:01:30.290 --> 00:01:38.930
So let's comment these out,
create a constant and just do name,

21
00:01:38.960 --> 00:01:44.420
age and occupation and let's
assign it to a person.

22
00:01:44.450 --> 00:01:49.140
Now, if we were to console log this,

23
00:01:49.170 --> 00:01:54.780
we would see that this variable directly
hold the value of the object properties

24
00:01:54.810 --> 00:01:59.260
presented in the person,
not at 26 and developer,

25
00:01:59.290 --> 00:02:02.660
let's also consider how
Destructuring arrays would work.

26
00:02:02.690 --> 00:02:08.300
Let's create an array of numbers
and let's do 12345.

27
00:02:08.330 --> 00:02:13.100
If we wanted to have variables for 1st,

28
00:02:13.130 --> 00:02:20.640
second and third elements here,
we would have to do something like this.

29
00:02:27.080 --> 00:02:33.140
And this code is also very repetitive
and it can get complex if we have multiple

30
00:02:33.170 --> 00:02:36.100
items that we want
to pull out of the array.

31
00:02:36.130 --> 00:02:42.960
But same can be achieved
with something like this.

32
00:02:43.120 --> 00:02:46.780
Constant, 1st, second and third.

33
00:02:46.810 --> 00:02:49.180
And let's assign it to numbers.

34
00:02:49.210 --> 00:02:53.020
And now let's console log the values.

35
00:02:53.050 --> 00:03:00.220
Let's run this and we're going to see one,
two, three appear from our numbers array.

36
00:03:00.250 --> 00:03:04.540
So you could do something same
with the person object and pair it

37
00:03:04.570 --> 00:03:09.180
with Destructuring concept and also
the spread operator that we talked about.

38
00:03:09.210 --> 00:03:11.160
So let's say that you want to get all

39
00:03:11.190 --> 00:03:15.610
of the information from the person
object except for occupation.

40
00:03:15.640 --> 00:03:20.500
So let's comment this out so that we don't
have conflicts with the variable names

41
00:03:20.530 --> 00:03:25.140
and let's say
we create a const and it's going to have

42
00:03:25.170 --> 00:03:31.140
occupation and then rest
of the items from the person.

43
00:03:31.170 --> 00:03:36.640
So let's console log rest
and you're going to see that we're going

44
00:03:36.670 --> 00:03:45.700
to have an object created for the rest
and it does not contain the patient.

45
00:03:45.730 --> 00:03:48.380
So in conclusion,
Destructuring is a powerful feature

46
00:03:48.410 --> 00:03:52.100
in JavaScript that makes working
with arrays and objects much easier.

47
00:03:52.130 --> 00:03:55.700
It helps us extract data in a concise
and organized manner,

48
00:03:55.730 --> 00:03:59.610
making our code cleaner,
more readable and less prone to errors.

49
00:03:59.640 --> 00:04:01.020
That's all for today.

50
00:04:01.040 --> 00:04:03.240
Thanks for watching and see
you in the next video.