1
00:00:02,020 --> 00:00:04,830
Now, before we move on to other concepts,

2
00:00:04,830 --> 00:00:07,600
I got one other concept directly related

3
00:00:07,600 --> 00:00:10,090
to objects and also arrays

4
00:00:10,090 --> 00:00:11,950
that you also should be aware of

5
00:00:11,950 --> 00:00:14,370
since you will see it later in the course.

6
00:00:14,370 --> 00:00:18,780
And that's object or array destructuring.

7
00:00:18,780 --> 00:00:20,870
For this, I'll actually give you an example

8
00:00:20,870 --> 00:00:23,690
in that Console in the browser again.

9
00:00:23,690 --> 00:00:27,800
Here I open a blank tab again and open the Developer Tools

10
00:00:27,800 --> 00:00:31,450
to use that built-in Console as a playground.

11
00:00:31,450 --> 00:00:33,520
What I'm showing you here in the browser

12
00:00:33,520 --> 00:00:36,630
also works like that in Node.js though.

13
00:00:36,630 --> 00:00:40,030
Let's say we have a constant named input

14
00:00:40,030 --> 00:00:44,400
that is actually an array with two values,

15
00:00:44,400 --> 00:00:49,400
Max and Schwarzmueller, so my first and my last name.

16
00:00:49,890 --> 00:00:52,440
This could be something we're getting from some form

17
00:00:52,440 --> 00:00:54,503
that was submitted by the user.

18
00:00:55,860 --> 00:00:57,530
Now, if we got that array,

19
00:00:57,530 --> 00:01:01,020
and we know that at different positions in that array,

20
00:01:01,020 --> 00:01:03,420
we got different kinds of values,

21
00:01:03,420 --> 00:01:07,090
we might want to store these individual values

22
00:01:07,090 --> 00:01:09,470
in separate variables or constants

23
00:01:09,470 --> 00:01:12,270
with which we can work in our code.

24
00:01:12,270 --> 00:01:15,340
For example, I could add a firstName constant

25
00:01:15,340 --> 00:01:17,120
and simply store input

26
00:01:17,120 --> 00:01:20,380
and then the first element in input in there,

27
00:01:20,380 --> 00:01:22,440
so Max in this case,

28
00:01:22,440 --> 00:01:25,110
and maybe create a lastName constant

29
00:01:25,110 --> 00:01:28,890
and store input one in there,

30
00:01:28,890 --> 00:01:32,273
so the second element in that array.

31
00:01:33,130 --> 00:01:35,770
And now we would have two separate constants

32
00:01:35,770 --> 00:01:38,990
that have those values that we find in the array.

33
00:01:38,990 --> 00:01:41,050
And it could be more convenient to work

34
00:01:41,050 --> 00:01:43,270
with these clearly named constants

35
00:01:43,270 --> 00:01:46,860
than having to refer input zero or input one

36
00:01:46,860 --> 00:01:48,323
all the time in our code.

37
00:01:49,520 --> 00:01:51,500
But in scenarios like this

38
00:01:51,500 --> 00:01:55,120
where you wanna assign different values

39
00:01:55,120 --> 00:01:59,000
in an array to different constants or variables,

40
00:01:59,000 --> 00:02:02,303
you can use that feature called array destructuring.

41
00:02:03,700 --> 00:02:07,710
You can create multiple variables or constants in one go

42
00:02:07,710 --> 00:02:10,690
by using the const or let keyword,

43
00:02:10,690 --> 00:02:13,620
and then you use square brackets here

44
00:02:13,620 --> 00:02:16,430
on the left side of the equal sign,

45
00:02:16,430 --> 00:02:18,570
and between those square brackets,

46
00:02:18,570 --> 00:02:20,890
you choose any identifiers,

47
00:02:20,890 --> 00:02:25,350
any constant or variable names of your choice.

48
00:02:25,350 --> 00:02:28,340
Since firstName and lastName is already taken,

49
00:02:28,340 --> 00:02:30,663
I'll go for first and last here.

50
00:02:31,950 --> 00:02:34,330
And then on the right side of that equal sign,

51
00:02:34,330 --> 00:02:38,740
you point at the array that you want to destructure.

52
00:02:38,740 --> 00:02:43,530
And destructure does not mean that the array gets destroyed

53
00:02:43,530 --> 00:02:44,920
or anything like that.

54
00:02:44,920 --> 00:02:48,020
No, it will continue to exist just like that,

55
00:02:48,020 --> 00:02:52,360
but it means that values will be pulled out of that array

56
00:02:52,360 --> 00:02:56,050
and will also be stored in these constants or variables.

57
00:02:56,050 --> 00:02:58,410
And the position here matters.

58
00:02:58,410 --> 00:03:01,920
The first value you define here

59
00:03:01,920 --> 00:03:06,920
will get the first value in the array, so Max in this case.

60
00:03:07,170 --> 00:03:11,450
The second value will get the second element in the array,

61
00:03:11,450 --> 00:03:14,390
so Schwarzmueller in this case.

62
00:03:14,390 --> 00:03:18,040
And you don't have to pull out all the values that exist.

63
00:03:18,040 --> 00:03:21,480
You can also just grab a couple of values if you need to,

64
00:03:21,480 --> 00:03:24,400
and in this case I'm getting all the values,

65
00:03:24,400 --> 00:03:27,210
and now I also got first and last

66
00:03:28,060 --> 00:03:32,233
as separate constants that store values of that array.

67
00:03:33,320 --> 00:03:36,670
And doing it like this here simply is quicker

68
00:03:36,670 --> 00:03:40,040
than assigning constants or variables individually

69
00:03:40,040 --> 00:03:41,533
as I did it before.

70
00:03:42,600 --> 00:03:44,920
Now, that's array destructuring.

71
00:03:44,920 --> 00:03:48,163
We have pretty much the same concept for objects.

72
00:03:49,090 --> 00:03:53,000
Let's say you have an object, job,

73
00:03:53,000 --> 00:03:57,000
and in there you have the job title, Developer,

74
00:03:57,000 --> 00:04:00,853
and you have the location which is New York.

75
00:04:01,790 --> 00:04:05,403
That's the object as we created it many times before.

76
00:04:07,100 --> 00:04:09,380
Now, for similar reasons as before,

77
00:04:09,380 --> 00:04:12,320
we might want to get these two values

78
00:04:12,320 --> 00:04:13,780
that are in that object

79
00:04:13,780 --> 00:04:16,463
and maybe store them in separate variables.

80
00:04:17,490 --> 00:04:20,410
Now, we got a similar syntax as before then.

81
00:04:20,410 --> 00:04:22,700
Of course, we could manually do this

82
00:04:22,700 --> 00:04:26,630
and create a jobTitle which holds job.title,

83
00:04:26,630 --> 00:04:28,850
but that would be a bit inconvenient.

84
00:04:28,850 --> 00:04:31,030
It's some extra work.

85
00:04:31,030 --> 00:04:32,820
Instead, just as before,

86
00:04:32,820 --> 00:04:37,670
we can create multiple consts or variables in one go

87
00:04:37,670 --> 00:04:41,360
by using curly braces on the left side of the equal sign,

88
00:04:41,360 --> 00:04:44,450
and now it's curly braces instead of square brackets

89
00:04:44,450 --> 00:04:47,830
because we are destructuring an object now.

90
00:04:47,830 --> 00:04:50,830
And that allows us to destructure the object

91
00:04:50,830 --> 00:04:52,900
which, again, won't destroy it

92
00:04:52,900 --> 00:04:57,360
but allows us to pull out property values out of that object

93
00:04:57,360 --> 00:05:00,523
and store them in separate constants or variables.

94
00:05:01,950 --> 00:05:04,890
Now, for this, unlike in array destructuring,

95
00:05:04,890 --> 00:05:07,500
here, it's not the position that matters.

96
00:05:07,500 --> 00:05:08,950
Instead, we have to refer

97
00:05:08,950 --> 00:05:12,180
to the properties that we wanna destructure,

98
00:05:12,180 --> 00:05:15,780
for example, to title and maybe also location,

99
00:05:15,780 --> 00:05:17,910
though just as with arrays,

100
00:05:17,910 --> 00:05:20,450
we don't have to get all the elements.

101
00:05:20,450 --> 00:05:23,620
We can also just destructure one of these properties

102
00:05:23,620 --> 00:05:26,940
in case we're only interested in a title.

103
00:05:26,940 --> 00:05:29,060
But here the name now is important.

104
00:05:29,060 --> 00:05:31,470
We have to use one of the property names

105
00:05:31,470 --> 00:05:36,193
so that JavaScript knows which property we want to extract.

106
00:05:37,220 --> 00:05:41,300
And with that, we now have a brand new title constant

107
00:05:41,300 --> 00:05:44,053
that has the value of the title property.

108
00:05:46,570 --> 00:05:49,740
In case you want to change the name,

109
00:05:49,740 --> 00:05:53,360
so you wanna get the value of the title property,

110
00:05:53,360 --> 00:05:56,420
but you want to have a constant of a different name,

111
00:05:56,420 --> 00:05:58,123
there also is a syntax for that,

112
00:05:58,960 --> 00:06:02,370
and you can destructure by adding a colon here

113
00:06:02,370 --> 00:06:07,313
and then assigning your own name like jTitle for job title.

114
00:06:08,380 --> 00:06:11,680
Now, we tell JavaScript that we wanna destructure,

115
00:06:11,680 --> 00:06:16,600
that we wanna get the title property value, so Developer,

116
00:06:16,600 --> 00:06:19,590
and that that should be stored in a new constant

117
00:06:19,590 --> 00:06:23,347
that should not be named title but instead jTitle.

118
00:06:25,210 --> 00:06:26,570
If I hit Enter here,

119
00:06:26,570 --> 00:06:31,570
now I have that jTitle constant which holds that value.

120
00:06:31,690 --> 00:06:34,400
And that is another nice JavaScript feature

121
00:06:34,400 --> 00:06:38,890
which allows us to sometimes write more concise code,

122
00:06:38,890 --> 00:06:40,500
and therefore it is a feature

123
00:06:40,500 --> 00:06:43,823
that can make our life as a developer easier.

124
00:06:44,700 --> 00:06:48,600
And maybe you remember this uuid package

125
00:06:48,600 --> 00:06:51,780
which we used a little bit earlier in this course

126
00:06:51,780 --> 00:06:56,290
for generating unique ids in our Node Express code.

127
00:06:56,290 --> 00:06:58,310
In that earlier course section,

128
00:06:58,310 --> 00:07:01,770
we installed that package and started using it.

129
00:07:01,770 --> 00:07:05,510
And, actually, I did use it a little bit different

130
00:07:05,510 --> 00:07:07,973
than what you see in the official documentation.

131
00:07:08,940 --> 00:07:12,680
When I required it, I did not require it like this,

132
00:07:12,680 --> 00:07:17,310
but instead I just required a uuid object

133
00:07:17,310 --> 00:07:20,973
on which I called the v4 method in my code.

134
00:07:23,970 --> 00:07:26,940
I did that because that's also fine to do.

135
00:07:26,940 --> 00:07:28,850
But what you see here in the official docs

136
00:07:28,850 --> 00:07:32,400
actually uses object destructuring.

137
00:07:32,400 --> 00:07:35,100
We require the uuid package

138
00:07:35,100 --> 00:07:38,030
which exposes an object as it seems,

139
00:07:38,030 --> 00:07:41,460
and it is an object with various methods.

140
00:07:41,460 --> 00:07:43,120
But since you might only need

141
00:07:43,120 --> 00:07:45,060
one of these methods in your code,

142
00:07:45,060 --> 00:07:49,140
you can also destructure the object, as it's suggested here,

143
00:07:49,140 --> 00:07:53,080
to pull out one specific method, the v4 method,

144
00:07:53,080 --> 00:07:56,950
which is the method we also use in our code ultimately,

145
00:07:56,950 --> 00:07:59,690
and then you maybe even assign your own name to it,

146
00:07:59,690 --> 00:08:03,253
your own alias, under which you can use that method then.

147
00:08:04,230 --> 00:08:07,710
This is something you can do to write more concise code.

148
00:08:07,710 --> 00:08:10,350
Of course, the approach we used also worked,

149
00:08:10,350 --> 00:08:12,740
and there is no better or worse approach,

150
00:08:12,740 --> 00:08:15,600
but now you also understand syntax like this,

151
00:08:15,600 --> 00:08:18,380
and now we can also use syntax like this

152
00:08:18,380 --> 00:08:19,763
in the rest of the course.