1
00:00:02,400 --> 00:00:06,520
Rest and spread are important syntaxes to know,

2
00:00:06,890 --> 00:00:12,600
now I want to dive into another important feature and that is destructuring.

3
00:00:12,760 --> 00:00:17,950
Now let me comment out this code down there and let's begin with object

4
00:00:18,040 --> 00:00:25,480
destructuring. I got my person object and now let's say we have some code where I only need the name,

5
00:00:26,340 --> 00:00:30,100
so I have a new function, printName let's say

6
00:00:30,430 --> 00:00:36,430
and that actually takes the full person object because for whatever reason we write, wrote it like this

7
00:00:36,850 --> 00:00:45,970
or we simply have a function where we are able to get multiple arguments or a full object because some

8
00:00:45,970 --> 00:00:49,890
third party package always gives us that person we can't change that,

9
00:00:50,050 --> 00:00:59,200
so we get the person here and I only want to console log person.name.

10
00:00:59,270 --> 00:01:01,700
Now that is totally fine of doing it like this,

11
00:01:02,000 --> 00:01:04,620
I can now execute printName here,

12
00:01:04,670 --> 00:01:07,350
now I need to pass a person here,

13
00:01:07,550 --> 00:01:12,030
now to avoid naming confusion, you can name this here however you want.

14
00:01:12,140 --> 00:01:14,800
So here we could name it person data

15
00:01:14,930 --> 00:01:16,690
and inside here we use person data

16
00:01:16,700 --> 00:01:19,250
so that function does not use that person,

17
00:01:19,310 --> 00:01:21,380
it just expects any person data,

18
00:01:21,410 --> 00:01:25,720
we then call that function and pass in that person as an argument.

19
00:01:25,850 --> 00:01:30,610
And now if I execute that file, I see Max here and

20
00:01:30,620 --> 00:01:33,460
this is stemming from this line here.

21
00:01:33,670 --> 00:01:39,540
Now of course we can absolutely do it like that and we always get person data because again let's say

22
00:01:39,550 --> 00:01:44,620
this is a function which is actually called by some third party package which is a pattern you see quite

23
00:01:44,620 --> 00:01:47,240
a bit throughout this course. Now

24
00:01:47,260 --> 00:01:49,750
therefore we can't change the data we get

25
00:01:49,810 --> 00:01:55,010
but in this function here, we are only interested in the name.

26
00:01:55,090 --> 00:02:02,050
We can then use a syntax or a feature called object destructuring where we add curly braces here in

27
00:02:02,050 --> 00:02:09,870
the argument list and we then specify the property of the incoming object we are interested in, name,

28
00:02:10,350 --> 00:02:13,350
that is property we have here.

29
00:02:13,860 --> 00:02:17,870
Then this will be pulled out of the incoming object,

30
00:02:17,880 --> 00:02:24,360
the other properties will be dropped for this function and it will be stored in a variable named name

31
00:02:24,420 --> 00:02:26,390
which we then can use in there.

32
00:02:26,410 --> 00:02:33,880
So now if they execute this again, I also see Max but now we're using this destructuring syntax and we

33
00:02:33,880 --> 00:02:38,400
can pull out the age too if you wanted to or the grid function.

34
00:02:38,530 --> 00:02:46,600
So that all works and that is just a syntax we can use that allows us to write a bit of a more understandable

35
00:02:46,630 --> 00:02:52,270
code where we are very clear about what we need from the incoming object and which then gets stored

36
00:02:52,330 --> 00:02:56,200
in a local variable that we can just use in this function.

37
00:02:56,410 --> 00:02:59,760
And you can of course not just use destructuring inside of a function,

38
00:02:59,860 --> 00:03:01,450
you can also use it outside of there,

39
00:03:01,540 --> 00:03:09,070
you can create a new constant here for example and then the syntax will look like this, curly braces

40
00:03:09,220 --> 00:03:14,830
equals person, curly braces on the left side of the equal sign are something we don't see that often in

41
00:03:14,830 --> 00:03:18,680
javascript because typically it's wrong but for destructuring, it's correct.

42
00:03:18,940 --> 00:03:22,210
And then here, we can have the name and the age

43
00:03:22,330 --> 00:03:26,840
and this will create two new constants which hold the values stored in name and age,

44
00:03:26,890 --> 00:03:30,250
so these names here have to match the property names

45
00:03:30,940 --> 00:03:32,010
of the person

46
00:03:32,210 --> 00:03:41,720
and now we can console log name and age, like this. And if I now re-execute that file, this output here is coming

47
00:03:41,720 --> 00:03:43,490
from this console log

48
00:03:43,610 --> 00:03:51,670
and the values we're outputting here are retrieved via object destructuring. Now there is also not just

49
00:03:51,790 --> 00:03:53,440
object destructuring,

50
00:03:53,440 --> 00:03:56,000
you can also destructure arrays,

51
00:03:56,140 --> 00:04:04,570
so if we go back to the hobbies which we have here, well then if you would want to destructure that, we

52
00:04:04,570 --> 00:04:06,930
can also create a const,

53
00:04:06,970 --> 00:04:11,980
you could also use let by the way, the same for the object restructuring if you plan on changing it, you

54
00:04:11,980 --> 00:04:20,140
could use a const for hobby one and hobby two wrapped in square brackets

55
00:04:22,760 --> 00:04:32,160
and then assign this to hobbies. And now if you console log hobby one and you console log hobby two and you

56
00:04:32,160 --> 00:04:36,590
execute that file again, you'll see the two hobbies being printed there,

57
00:04:36,600 --> 00:04:41,700
please note there are no square brackets around them in the console log because we're not logging an

58
00:04:41,700 --> 00:04:42,440
array here,

59
00:04:42,540 --> 00:04:49,890
we are logging two individual values which we got via array destructuring.

60
00:04:50,740 --> 00:04:57,730
Unlike the object destructuring, here you can choose any names you want because in arrays your elements

61
00:04:57,730 --> 00:04:59,110
have no names,

62
00:04:59,110 --> 00:05:02,020
they are instead pulled out by position.

63
00:05:02,020 --> 00:05:04,080
So this will always be the first element,

64
00:05:04,160 --> 00:05:07,110
this will be the second element. In objects

65
00:05:07,120 --> 00:05:11,750
you pull them out by name, by property name. So that is destructuring

66
00:05:11,800 --> 00:05:14,020
and this is also something used in this course,

67
00:05:14,020 --> 00:05:21,220
it simply allows us to access elements in objects or arrays quickly by their name or position and to

68
00:05:21,340 --> 00:05:22,100
drop

69
00:05:22,150 --> 00:05:27,310
and that does not mean delete, they are not getting deleted, they're just not used in our function or

70
00:05:27,310 --> 00:05:28,960
whatever we're writing,

71
00:05:28,990 --> 00:05:34,930
so to drop the data we don't need in that specific code snippet we're working on.