1
00:00:00,000 --> 00:00:03,683
‫So let's start this JavaScript review section

2
00:00:03,683 --> 00:00:07,182
‫with the very important concept of Destructuring.

3
00:00:07,182 --> 00:00:11,501
‫And as always, I will start by creating a new folder here

4
00:00:11,501 --> 00:00:14,864
‫which I'm simply calling JavaScript Review.

5
00:00:14,864 --> 00:00:17,842
‫And then we need to get our starter files

6
00:00:17,842 --> 00:00:21,120
‫from the GitHub repo that we downloaded already

7
00:00:21,120 --> 00:00:22,670
‫in the beginning of the course.

8
00:00:24,780 --> 00:00:29,287
‫So let's select script.js here from the starter folder.

9
00:00:29,287 --> 00:00:31,662
‫And then let's paste that

10
00:00:31,662 --> 00:00:34,980
‫into the project folder that we just created.

11
00:00:34,980 --> 00:00:36,570
‫And now to open up this folder,

12
00:00:36,570 --> 00:00:40,746
‫I will simply drag and drop this folder onto the VS code.

13
00:00:40,746 --> 00:00:45,286
‫I can write here, which then sets it as the project folder.

14
00:00:45,286 --> 00:00:48,990
‫And alternatively, if that didn't work for some reason,

15
00:00:48,990 --> 00:00:51,422
‫you can of course always open up a project folder

16
00:00:51,422 --> 00:00:55,866
‫simply by clicking here on open, right?

17
00:00:55,866 --> 00:01:00,768
‫But anyway, let's open up or script.js here.

18
00:01:00,768 --> 00:01:05,284
‫And as we see it already contains some starter data.

19
00:01:05,284 --> 00:01:07,260
‫So we have this array here

20
00:01:07,260 --> 00:01:09,969
‫which contains five book objects.

21
00:01:09,969 --> 00:01:12,047
‫So we have one object for each book

22
00:01:12,047 --> 00:01:15,870
‫which has a title, a date, and so on.

23
00:01:15,870 --> 00:01:18,165
‫So all the relevant stuff about books.

24
00:01:18,165 --> 00:01:21,869
‫And then also I created two functions down here.

25
00:01:21,869 --> 00:01:25,304
‫So this Get Books will basically simply return

26
00:01:25,304 --> 00:01:29,067
‫this data here, and then we have Get Book by id

27
00:01:29,067 --> 00:01:32,700
‫which basically simply returns the book with

28
00:01:32,700 --> 00:01:34,593
‫the ID that we pass in here.

29
00:01:37,050 --> 00:01:41,763
‫All right, so again, this lecture is about destructuring.

30
00:01:43,499 --> 00:01:48,119
‫And to start, let's create a variable called books

31
00:01:48,119 --> 00:01:52,978
‫which will simply be the result of calling Get books.

32
00:01:52,978 --> 00:01:57,120
‫Now, in order to actually execute this code, we will now

33
00:01:57,120 --> 00:02:01,637
‫use a special extension for that, which is called Quokka.

34
00:02:02,620 --> 00:02:06,117
‫So just go ahead and download this extension

35
00:02:06,117 --> 00:02:10,710
‫which will allow us to run some JavaScript code right inside

36
00:02:10,710 --> 00:02:12,000
‫of VS code.

37
00:02:12,000 --> 00:02:14,850
‫So without us having to connect this script

38
00:02:14,850 --> 00:02:17,301
‫with some HTML file, for example.

39
00:02:17,301 --> 00:02:18,978
‫So very helpful.

40
00:02:18,978 --> 00:02:22,980
‫And then to start Quokka on this file, we can come

41
00:02:22,980 --> 00:02:26,574
‫to our command pallet, which is down here, or simply

42
00:02:26,574 --> 00:02:28,936
‫you can use this keyboard shortcut.

43
00:02:28,936 --> 00:02:31,830
‫So you should actually memorize this because this command

44
00:02:31,830 --> 00:02:34,739
‫pallet is really useful all the time.

45
00:02:34,739 --> 00:02:38,525
‫So to start Quokka now on this file, you just type Quokka

46
00:02:38,525 --> 00:02:42,843
‫and type it correctly and then start.

47
00:02:43,922 --> 00:02:45,960
‫So then it is this one.

48
00:02:45,960 --> 00:02:49,650
‫So start on current file, hit enter, and you see

49
00:02:49,650 --> 00:02:53,040
‫that immediately it opened this panel down here.

50
00:02:53,040 --> 00:02:54,940
‫So in this output tab

51
00:02:54,940 --> 00:02:59,765
‫and also it activated this tool here on the left side.

52
00:02:59,765 --> 00:03:03,389
‫And so now this code is actually already being executed

53
00:03:03,389 --> 00:03:06,150
‫but to see anything we can, for example

54
00:03:06,150 --> 00:03:08,820
‫simply write now this variable.

55
00:03:08,820 --> 00:03:11,040
‫So this books that we already have

56
00:03:11,040 --> 00:03:12,960
‫and it will immediately print it

57
00:03:12,960 --> 00:03:16,140
‫down here to this kind of console.

58
00:03:16,140 --> 00:03:18,222
‫It will show up here on the left side

59
00:03:18,222 --> 00:03:21,608
‫so in this extension here, in this tab.

60
00:03:21,608 --> 00:03:26,125
‫And also it shows right here inside this file.

61
00:03:26,125 --> 00:03:28,650
‫So this is actually really helpful

62
00:03:28,650 --> 00:03:30,786
‫especially for smaller values.

63
00:03:30,786 --> 00:03:32,460
‫So when you have an object

64
00:03:32,460 --> 00:03:35,883
‫it's easier to check it out here in this sidebar.

65
00:03:35,883 --> 00:03:39,300
‫So here we can now see this entire array

66
00:03:39,300 --> 00:03:41,484
‫and all the objects that are in there.

67
00:03:41,484 --> 00:03:44,760
‫Okay. And now with all the setup in place

68
00:03:44,760 --> 00:03:47,528
‫let's actually quickly talk about Destructuring.

69
00:03:47,528 --> 00:03:51,243
‫So Destructuring is very very useful all the time

70
00:03:51,243 --> 00:03:55,338
‫whenever we need to basically get some data out of an object

71
00:03:55,338 --> 00:03:56,978
‫or out of an array.

72
00:03:56,978 --> 00:04:00,943
‫So for example, let's say we needed the title and the author

73
00:04:00,943 --> 00:04:04,230
‫of a certain book, and to demonstrate this,

74
00:04:04,230 --> 00:04:08,610
‫let's actually use get book here with some id.

75
00:04:08,610 --> 00:04:09,802
‫For example, ID 2.

76
00:04:09,802 --> 00:04:11,845
‫It's also call it here.

77
00:04:11,845 --> 00:04:13,263
‫Just book.

78
00:04:14,426 --> 00:04:16,200
‫Okay.

79
00:04:16,200 --> 00:04:19,101
‫And now again if you wanted to take the title

80
00:04:19,101 --> 00:04:21,864
‫out of this book object,

81
00:04:21,864 --> 00:04:26,670
‫so let's say we wanted to create a new variable

82
00:04:26,670 --> 00:04:27,600
‫called title.

83
00:04:27,600 --> 00:04:31,907
‫We could do book.title, right?

84
00:04:33,039 --> 00:04:36,690
‫And now using the Quokka extension, we can see

85
00:04:36,690 --> 00:04:40,893
‫that the title is The Cyberiad or something like that.

86
00:04:41,740 --> 00:04:46,740
‫And indeed, if we go here to the book with the ID 2

87
00:04:48,450 --> 00:04:51,643
‫then we get exactly that title, right?

88
00:04:51,643 --> 00:04:55,222
‫And of course we can take other data out of this.

89
00:04:55,222 --> 00:04:58,930
‫For example, let's say we wanted the author as well

90
00:05:01,425 --> 00:05:04,983
‫we would do book.author.

91
00:05:06,252 --> 00:05:09,766
‫And then here, let's just see that.

92
00:05:09,766 --> 00:05:14,766
‫Okay. And by the way, we can also simply do console dot log

93
00:05:16,042 --> 00:05:19,143
‫which will get a similar result.

94
00:05:20,369 --> 00:05:24,180
‫So again, this author here, but then we can do multiple

95
00:05:24,180 --> 00:05:27,570
‫at the same time, which can be a bit more helpful.

96
00:05:27,570 --> 00:05:29,520
‫Now, reading data from the book object

97
00:05:29,520 --> 00:05:32,670
‫like this can become a little bit cumbersome, especially

98
00:05:32,670 --> 00:05:36,000
‫when we have lots of properties that we need to take out.

99
00:05:36,000 --> 00:05:38,304
‫Then we would have to write one line of code for each

100
00:05:38,304 --> 00:05:39,790
‫of these properties.

101
00:05:39,790 --> 00:05:42,090
‫So that's really not ideal.

102
00:05:42,090 --> 00:05:44,866
‫And so that's why we have Object Destructuring.

103
00:05:44,866 --> 00:05:48,329
‫So at Object Destructuring, we can simply create

104
00:05:48,329 --> 00:05:50,669
‫these new variables all at once.

105
00:05:50,669 --> 00:05:54,465
‫So let's again say title and author.

106
00:05:54,465 --> 00:05:58,620
‫And right now vs code is complaining 'cause we're already

107
00:05:58,620 --> 00:05:59,970
‫defining them up here

108
00:05:59,970 --> 00:06:01,948
‫but nevermind that for now.

109
00:06:01,948 --> 00:06:05,190
‫And so then here we simply specify the object

110
00:06:05,190 --> 00:06:08,619
‫out of which we want to take the title and the author.

111
00:06:08,619 --> 00:06:10,725
‫And that's actually it.

112
00:06:10,725 --> 00:06:13,773
‫So let's comment out these two and then we see

113
00:06:13,773 --> 00:06:16,623
‫that we get the exact same results down here.

114
00:06:17,910 --> 00:06:19,470
‫Now here, what's crucial is

115
00:06:19,470 --> 00:06:22,050
‫that we actually give these variable names here

116
00:06:22,050 --> 00:06:25,710
‫exactly the same name as the properties in the object.

117
00:06:25,710 --> 00:06:29,673
‫So if we had titles here, then that would not work.

118
00:06:30,708 --> 00:06:35,070
‫So you see that it would then be undefined here, and that's

119
00:06:35,070 --> 00:06:38,673
‫because there's no titles property in the book object.

120
00:06:40,866 --> 00:06:44,880
‫Okay? So really, really helpful all the time

121
00:06:44,880 --> 00:06:47,839
‫especially whenever we get some data from an api

122
00:06:47,839 --> 00:06:50,670
‫which is basically what we're simulating here

123
00:06:50,670 --> 00:06:52,950
‫with this get book function.

124
00:06:52,950 --> 00:06:55,770
‫So this is of course not an asynchronous function

125
00:06:55,770 --> 00:06:58,590
‫but it simulates that we're getting this book from some kind

126
00:06:58,590 --> 00:07:02,011
‫of API that's abstracted behind this function.

127
00:07:02,011 --> 00:07:05,440
‫And so then once we get that data usually as an object

128
00:07:05,440 --> 00:07:08,130
‫we can then destructure all the properties

129
00:07:08,130 --> 00:07:10,500
‫out of there that we need.

130
00:07:10,500 --> 00:07:12,679
‫And actually let's take out some more properties

131
00:07:12,679 --> 00:07:17,530
‫let's do pages, let's do the publication date

132
00:07:19,235 --> 00:07:22,173
‫let's do the genres.

133
00:07:23,940 --> 00:07:26,730
‫I think that's what it's called.

134
00:07:26,730 --> 00:07:30,667
‫And then has movie adaptation now, right?

135
00:07:34,278 --> 00:07:39,278
‫So again, let's just basically lock the book here

136
00:07:39,930 --> 00:07:43,020
‫so that we can have it here on this left sidebar.

137
00:07:43,020 --> 00:07:44,100
‫And so then here with this

138
00:07:44,100 --> 00:07:47,040
‫we can easily see all the properties that are

139
00:07:47,040 --> 00:07:48,750
‫inside the book object.

140
00:07:48,750 --> 00:07:51,570
‫And so these ones are the ones that I'm taking

141
00:07:51,570 --> 00:07:53,880
‫out now basically out of the book

142
00:07:53,880 --> 00:07:56,323
‫and storing them into their own variables.

143
00:07:56,323 --> 00:08:01,323
‫And so there's no need to lock all of them here now, okay.

144
00:08:01,800 --> 00:08:05,539
‫So this is how this destructuring works in a nutshell.

145
00:08:05,539 --> 00:08:08,037
‫For objects there's actually some more stuff that we can do

146
00:08:08,037 --> 00:08:10,481
‫but I will not go into that here.

147
00:08:10,481 --> 00:08:14,580
‫And instead, let's now move on to Destructuring with a race,

148
00:08:14,580 --> 00:08:16,110
‫which is pretty similar

149
00:08:16,110 --> 00:08:19,297
‫but instead of relying on the property names

150
00:08:19,297 --> 00:08:23,221
‫it simply relies on the order of the elements in the array.

151
00:08:23,221 --> 00:08:27,233
‫So for the example, let's walk with the genres array.

152
00:08:28,230 --> 00:08:29,590
‫So we'll just lock it here

153
00:08:31,980 --> 00:08:34,743
‫so that we can see what this array looks like.

154
00:08:37,590 --> 00:08:40,200
‫So this is the array that we're going to work with

155
00:08:40,200 --> 00:08:44,400
‫and it has all these five genres that the book belongs to.

156
00:08:44,400 --> 00:08:47,098
‫And so let's say that these genres right here

157
00:08:47,098 --> 00:08:49,980
‫are basically ordered by importance.

158
00:08:49,980 --> 00:08:52,740
‫And so the primary genre is this one,

159
00:08:52,740 --> 00:08:54,750
‫this one is the secondary one

160
00:08:54,750 --> 00:08:57,273
‫And these other ones are not that important.

161
00:08:59,116 --> 00:09:02,130
‫So let's say that we wanted to create a variable

162
00:09:02,130 --> 00:09:06,097
‫called primary genre.

163
00:09:06,097 --> 00:09:09,522
‫I'm not sure if I'm saying that right

164
00:09:09,522 --> 00:09:13,053
‫but that doesn't really matter.

165
00:09:14,711 --> 00:09:19,711
‫So we could do genres and then taking out the first element.

166
00:09:21,270 --> 00:09:25,803
‫And then for the secondary genre, we could simply do this.

167
00:09:29,781 --> 00:09:31,830
‫Let's log it to the console.

168
00:09:31,830 --> 00:09:33,210
‫And here again, I'm using

169
00:09:33,210 --> 00:09:36,960
‫that snippet that we defined in the previous section.

170
00:09:36,960 --> 00:09:38,610
‫Remember that?

171
00:09:38,610 --> 00:09:43,050
‫So primary genre and the secondary one.

172
00:09:43,050 --> 00:09:48,050
‫And so indeed we get science fiction and humor, but again

173
00:09:48,300 --> 00:09:51,543
‫this can be done in a better way using destructuring.

174
00:09:54,932 --> 00:09:58,773
‫So let's use destructuring.

175
00:09:59,670 --> 00:10:01,560
‫So defining some variables.

176
00:10:01,560 --> 00:10:04,982
‫And then here, instead of the curly brackets for the object

177
00:10:04,982 --> 00:10:08,883
‫we use these square brackets, which is how we define a race.

178
00:10:10,080 --> 00:10:13,623
‫Now here, primary genre and secondary.

179
00:10:14,879 --> 00:10:19,383
‫And then simply equal genres,

180
00:10:22,530 --> 00:10:23,760
‫give it a save.

181
00:10:23,760 --> 00:10:26,643
‫And then here we have the exact same result.

182
00:10:27,720 --> 00:10:30,612
‫So basically the first variable that we define here

183
00:10:30,612 --> 00:10:33,510
‫this in this way, in this destructuring

184
00:10:33,510 --> 00:10:36,000
‫will take the first element out of the array

185
00:10:36,000 --> 00:10:38,130
‫and assign it to this variable.

186
00:10:38,130 --> 00:10:40,470
‫And then here, of course, the second one.

187
00:10:40,470 --> 00:10:41,910
‫So it takes the second element out

188
00:10:41,910 --> 00:10:45,600
‫of the array and assigns it to this variable.

189
00:10:45,600 --> 00:10:47,490
‫And of course we could keep going

190
00:10:47,490 --> 00:10:48,930
‫but here we are only interested

191
00:10:48,930 --> 00:10:51,630
‫in the primary and in the secondary genre.

192
00:10:51,630 --> 00:10:52,830
‫So we take these two

193
00:10:52,830 --> 00:10:55,623
‫out of this array by using array destructuring.