1

[Link],120 --> [Link],680

2
[Link],710 --> [Link],610
arrays.

3
[Link],790 --> [Link],000
And the goal of this lesson is to really make it clear in your mind how
destructuring works in JavaScript

4
[Link],030 --> [Link],080
ES6 and get really used to the syntax.

5
[Link],080 --> [Link],000
Now if you're already pretty familiar with this concept of destructuring and you've
already used it

6
[Link],390 --> [Link],620
and you have no problems using it at all, then feel free to simply just complete
the challenge and if

7
[Link],620 --> [Link],610
you can complete it without any problems then feel free to skip this lesson.

8
[Link],630 --> [Link],950
So the idea is to uncomment all of the code below the challenge line and what we
want to happen is to

9
[Link],950 --> [Link],380
render the stats that come from our [Link] file where there's a constant
called cars. And

10
[Link],380 --> [Link],880
this is a relatively complex structure.

11
[Link],900 --> [Link],310
It's an array with two objects inside the object.

12
[Link],310 --> [Link],380
There's other nested objects and there's also other nested arrays.

13
[Link],250 --> [Link],790
So the idea is to not change any of this code here and try to use these names of
variables to make this
14
[Link],790 --> [Link],410
work by destructuring the code from our [Link] file.

15
[Link],150 --> [Link],020
Here's what you should be able to achieve once you complete the challenge.

16
[Link],020 --> [Link],550
We have this table over here with the brand, the top speed and the top color. And
all of this data is

17
[Link],550 --> [Link],390
being pulled out from our cars array.

18
[Link],420 --> [Link],190
The model corresponds to this first column and then the top speed corresponds to
this property topSpeed

19
[Link],580 --> [Link],250
and the top color is the first color in the array.

20
[Link],260 --> [Link],660
Now don't worry if you see these errors in the console. It's not related to any of
your code.

21
[Link],740 --> [Link],320
It's to do with how we're structuring our HTML that React doesn't like.

22
[Link],420 --> [Link],890
But I wanted to keep the table simple so we can focus on destructuring.

23
[Link],220 --> [Link],220
So the idea is to make the errors go away without touching any of the existing code
and just adding

24
[Link],220 --> [Link],530
some code right here to destructure the array inside [Link].

25
[Link],590 --> [Link],170
And if you can complete this without problems, then I'm happy for you to skip this
lesson. But if you

26
[Link],180 --> [Link],650
are

27
[Link],640 --> [Link],860
not sure where to start or if you get stuck during the challenge, then I recommend
watching this video

28
[Link],040 --> [Link],100
where I'm going to dive deeper into how to destructure nested arrays how to provide
default values and

29
[Link],100 --> [Link],330
all of that.

30
[Link],510 --> [Link],730
So let's get started by forking a copy of the starting sandbox. And to start off

31
[Link],750 --> [Link],560
I'm actually going to ignore this entire challenge and

32
[Link],560 --> [Link],360
I'm just gonna make some space for myself inside the [Link]. And we're not gonna
be working

33
[Link],360 --> [Link],970
with the [Link] data yet.

34
[Link],970 --> [Link],970
We're going to start off using this file called [Link]. And I want to quickly
reiterate some

35
[Link],970 --> [Link],100
of the things I spoke about when I first introduced you to this concept of
destructuring.

36
[Link],100 --> [Link],420
So here we have an array called animals and it has two objects as the first and
second items.

37
[Link],470 --> [Link],490
Now the first thing I'm gonna do is I'm going to export this animals as the default
export and then

38
[Link],490 --> [Link],160
I'm gonna import it into my [Link].

39
[Link],270 --> [Link],610
All right.

40
[Link],710 --> [Link],620
So I'm pulling animals that array in from my file data and now the first thing to
do is I'm just going

41
[Link],620 --> [Link],000
to log what animals looks like because this is probably what you're going to be
doing when you're looking

42
[Link],000 --> [Link],140
at data that's coming from another provider say an API or some sort of module or
some sort of framework

43
[Link],140 --> [Link],000
like React.

44
[Link],340 --> [Link],010
So we notice that we've got two objects:

45
[Link],010 --> [Link],540
one is a cat and one is a dog.

46
[Link],140 --> [Link],150
So the first thing I'm gonna do is I'm going to destructure this array of animals
into a variable so

47
[Link],200 --> [Link],720
I can hold the first object in a variable called cat

48
[Link],860 --> [Link],450
and the second object in a variable called dog.

49
[Link],490 --> [Link],600
So if you want to give that a go, pause the video now. All right.

50
[Link],620 --> [Link],560
So in order to destructure this, I'm going to create a new constant and because I'm
destructuring an

51
[Link],560 --> [Link],020
array, the variable names go inside an array literal like this,

52
[Link],040 --> [Link],660
so two square brackets. Now the first item in that animal's array if we remember
was a cat

53
[Link],830 --> [Link],860
and the second was a dog.
54
[Link],930 --> [Link],790
So I'm going to set these as the names of the first item and the second item from
this animals array.

55
[Link],570 --> [Link],050
So now what my code has done is it reached inside this array of animals pulled out
the first item and

56
[Link],050 --> [Link],730
assigned it a name of cat, pulled out a second item and assigned it a name of dog.

57
[Link],880 --> [Link],010
If I decide to log the value of cat, you can see it is just a single object with
two properties.

58
[Link],010 --> [Link],150
So I've freed it from the array effectively. And this is pretty much the same as
saying var cat =

59
[Link],270 --> [Link],100
animals[0].

60
[Link],120 --> [Link],730
It does exactly the same thing but obviously in a much more concise kind of syntax.

61
[Link],900 --> [Link],410
The other thing to remember is that when you destructure anything say an array or
an object into

62
[Link],500 --> [Link],760
separate variable names,

63
[Link],930 --> [Link],470
these names need to be unique inside your file.

64
[Link],470 --> [Link],440
So for example, you can't destructure this animals array and pull out something to
be held inside a variable

65
[Link],440 --> [Link],280
called cat and then create another variable called cat. You will get an error
saying that identify cat

66
[Link],310 --> [Link],590
has already been used and declared. So these names
67
[Link],750 --> [Link],560
when you destructure must be unique. So now that we've destructured our array,
let's think about how

68
[Link],560 --> [Link],240
we can destructure an object. So we know that our cat is now pulled out of animals
and it is in fact

69
[Link],690 --> [Link],860
an object right?

70
[Link],250 --> [Link],870
So if we wanted to destructure this object, how would we go about it?

71
[Link],870 --> [Link],220
Well the syntax is very similar but this time because we're destructuring an object
we're going to create

72
[Link],370 --> [Link],290
a object literal using a set of curly braces instead. And inside these curly braces
we can pull out any

73
[Link],290 --> [Link],560
of the properties that we want from the object. So we know that the cat object has
two properties, one

74
[Link],560 --> [Link],210
called name and the other is called sound.

75
[Link],210 --> [Link],580
So if we wanted to, we can pull out both of these properties, name and sound, and
get it out of that cat

76
[Link],760 --> [Link],010
object.

77
[Link],020 --> [Link],520
Now we have a variable called name and a variable called sound which is equivalent
to [Link] and

78
[Link],520 --> [Link],780
[Link].

79
[Link],130 --> [Link],140
And if I decide to log the value of say sound, you can see that I get the word
'meow' being printed out.

80
[Link],090 --> [Link],330
And this provides us a lot of convenience because going from this original array of
animals, in order

81
[Link],330 --> [Link],380
to get this sound 'meow' logged, we would have had to say animals[0].sound and we
would have

82
[Link],380 --> [Link],120
to do this every single time we needed the value inside this property. But remember
that there's a crucial

83
[Link],120 --> [Link],470
difference when you're destructuring objects versus arrays.

84
[Link],470 --> [Link],620
Notice how in the array we could have basically called each of these destructured
variables any name

85
[Link],620 --> [Link],430
we wanted. I could call this c and call this d.

86
[Link],180 --> [Link],820
And I decide to log c, notice how it is still going to log cat. But when you
destructure an object, these

87
[Link],820 --> [Link],460
names that are going inside here have to match with the property names of that
object.

88
[Link],510 --> [Link],580
This way it knows which one to actually pull out.

89
[Link],630 --> [Link],490
So these have to be the same as the keys that you see here.

90
[Link],590 --> [Link],620
Now notice how if I decide to change this to animalSound instead of sound which is
what is actually

91
[Link],620 --> [Link],310
called, this no longer works and it prints undefined because it looks inside this
object tries to find

92
[Link],310 --> [Link],980
the value for this key animalSound and clearly there is no key called animalSound.

93
[Link],010 --> [Link],030
So this comes back as undefined instead. Now destructuring can be useful for other
things as well.

94
[Link],039 --> [Link],809
For example, if you wanted to actually give these variables a different name to
what they were as the

95
[Link],809 --> [Link],600
properties of the object, you can do that.

96
[Link],690 --> [Link],420
You can simply add a colon and say this is going to be called catName

97
[Link],420 --> [Link],610
and this is going to be called catsound.

98
[Link],610 --> [Link],230
So now what happens is you no longer have access to these variable names sound and
name.

99
[Link],270 --> [Link],970
Instead you've turned it into catSound which comes out as meow and catName which
comes out as cat.

100
[Link],990 --> [Link],560
This is a way of providing an alternative name for the properties that come from an
object.

101
[Link],740 --> [Link],280
And this is really useful especially when your getting hold of data from public
APIs where you didn't

102
[Link],280 --> [Link],130
really get the chance to name the properties inside those JSONs.

103
[Link],170 --> [Link],210
Sometimes they make sense, sometimes they don't.

104
[Link],210 --> [Link],160
Sometimes they're very very short and and if you wanted to put your own touch then
this is how you might

105
[Link],160 --> [Link],780
do it. Now

106
[Link],810 --> [Link],780
the other thing I wanted to show you is how you would provide a default value.

107
[Link],000 --> [Link],940
For example, if we were going to destructure our cats object again and we have our
name and our sound

108
[Link],150 --> [Link],070
set to equal to cat,

109
[Link],550 --> [Link],110
but I wanted to give name and sound a custom value.

110
[Link],110 --> [Link],930
How might I do that?

111
[Link],940 --> [Link],360
Well you could simply just add in an equal sign, say name is equal to, let's call
it I don't know,

112
[Link],500 --> [Link],050
Fluffy and sound is equal to Purr.

113
[Link],060 --> [Link],100
So now what happens when I log

114
[Link],100 --> [Link],010
name is that it comes out as cat because that is the value for name from this
object cat.

115
[Link],100 --> [Link],910
But if it didn't have a name, let's say we go into the data

116
[Link],080 --> [Link],000
I delete the name and I come back, then notice how it's now being printed as
fluffy.

117
[Link],050 --> [Link],780
So this basically says if name is undefined, then use this value instead. And this
is also really helpful

118
[Link],810 --> [Link],030
because sometimes when you're getting data again from the Internet, a lot of these
fields might not be

119
[Link],030 --> [Link],610
filled.

120
[Link],630 --> [Link],050
So you don't want your app or your website to just crash.

121
[Link],050 --> [Link],920
You want to give it some default value so that it will actually get displayed. Now

122
[Link],930 --> [Link],900
the final thing I want to show you regarding destructuring objects is what to do
when you have a

123
[Link],900 --> [Link],890
nested object. So let's say that in addition to the properties name and sound, we
had another property

124
[Link],890 --> [Link],930
called feedingRequirements. And this property is going to hold its own object and
it has a property

125
[Link],930 --> [Link],050
called food and another one called water.

126
[Link],050 --> [Link],450
So let's say that food is two times a day and they have to be watered three times a
day.

127
[Link],450 --> [Link],460
So in this case we've now got an object which has an object inside it.

128
[Link],050 --> [Link],290
So how would we destructure these nested objects?

129
[Link],310 --> [Link],030
Let's say that I wanted to log the number of times that I have to feed my cat.

130
[Link],030 --> [Link],080
So I want to be able to log the value of food that lives inside this cat object.
Well we start out with

131
[Link],080 --> [Link],720
our const and our cat object remember has those two properties, name and sound.
132
[Link],800 --> [Link],830
So let's go ahead and destructure it down to name and sound.

133
[Link],240 --> [Link],490
But we've now got an extra one called feedingRequirements so let's add that in here
as well.

134
[Link],670 --> [Link],090
So now let's set it to equal to cat

135
[Link],160 --> [Link],710
and if I go ahead and log the value of feedingRequirements

136
[Link],410 --> [Link],820
you can see that I get this object being logged right?

137
[Link],890 --> [Link],890
It's got food and water as properties.

138
[Link],890 --> [Link],650
Now I can if I want to get hold of food by simply writing [Link]
which is our

139
[Link],650 --> [Link],640
usual syntax.

140
[Link],910 --> [Link],320
But what if I wanted to get hold of just food by itself without having to use the
dot syntax effectively

141
[Link],350 --> [Link],080
destructuring it again?

142
[Link],230 --> [Link],100
How would I do that?

143
[Link],670 --> [Link],930
Well, you can simply set this feedingRequirements instead of giving it an
alternative name,

144
[Link],930 --> [Link],060
you open up a set of curly braces and you pull out the values inside.

145
[Link],330 --> [Link],770
So those things were called food and water.
146
[Link],770 --> [Link],690
So now if you console log food, you're going to get the number of times that the
cat needs to be fed.

147
[Link],750 --> [Link],360
And this is done through a extensive destructuring.

148
[Link],490 --> [Link],670
So we got a hold of our object cat which is this one, we pulled out the
feedingRequirements object and

149
[Link],670 --> [Link],000
then out of that object we further destructed it

150
[Link],030 --> [Link],410
so we had a variable called food which is set to the value of two and water which
is set to the value

151
[Link],410 --> [Link],550
of three.

152
[Link],550 --> [Link],120
Now remember you can destructure as much or as little as you want.

153
[Link],120 --> [Link],850
So for example for our cat, if I only wanted the feeding requirements destructed,
then I can do that.

154
[Link],870 --> [Link],330
You don't have to do it for all of the keys and values inside an object.

155
[Link],330 --> [Link],500
So hopefully that clears things up a little bit more and you've got some new ideas
of how to destructure

156
[Link],920 --> [Link],400
arrays and how to destructure objects.

157
[Link],870 --> [Link],720
So the next thing I want to show you is a little bit about how the sets states
function might look. If

158
[Link],870 --> [Link],710
inside our [Link] let's say that we had a function and it was called useAnimals.
159
[Link],740 --> [Link],750
This sounds like some animal abuse but it's not.

160
[Link],840 --> [Link],740
No animals are going to be harmed in this function but what we are going to do is
we're going to accept

161
[Link],830 --> [Link],340
an animal as an input to this function and we're going to return an array. This
array has two values

162
[Link],430 --> [Link],360
only. It's going to be the [Link] and a function.

163
[Link],360 --> [Link],260
So this function is going to console log the [Link]. So it's going to
effectively make the

164
[Link],260 --> [Link],990
sound right?

165
[Link],290 --> [Link],470
Now that we've created this function called useAnimals and it returns an array with
two items

166
[Link],470 --> [Link],280
one is a string the name of the animal,

167
[Link],440 --> [Link],600
and the other is a function which does something. When it's activated

168
[Link],610 --> [Link],800
it just makes a sound.

169
[Link],800 --> [Link],300
Now if we go ahead and export this function as well, useAnimals and we go back
inside our index.

170
[Link],310 --> [Link],740
.js we can now import it in the same kind of syntax as we imported

171
[Link],740 --> [Link],540
our useState right? By tagging after the default

172
[Link],550 --> [Link],050
export like so. Now let's say that I decided to use this function called useAnimals
and pass my animal

173
[Link],080 --> [Link],810
object cat inside.

174
[Link],810 --> [Link],070
Now if I go ahead and log the value of this useAnimals with cat, then you can see
that what gets logged

175
[Link],220 --> [Link],750
is an array with two items.

176
[Link],920 --> [Link],160
The first item is the string cats and the second item is a function.

177
[Link],160 --> [Link],130
Now that I know that the output of this function is an array, well I can simply
just destructure it right?

178
[Link],520 --> [Link],050
So I can create a const, add a set of square brackets to create an array literal,
so the first item that

179
[Link],050 --> [Link],770
goes in here is gonna be the name of the first item of the array which I'll just
call animal.

180
[Link],770 --> [Link],080
And the second item is going to be assigned the value of the function.

181
[Link],210 --> [Link],700
So I'll call the function makeSound. And then I'm gonna set it equal to the output
of this function

182
[Link],710 --> [Link],760
useAnimals with cat.

183
[Link],780 --> [Link],579
Now if I console log animal, you can see that I'm going to get cat printed out. And
if I go ahead and

184
[Link],579 --> [Link],510
get hold of makeSound and I call it, then you'll see it says 'meow'. So this would,
I imagine, be very similar

185
[Link],540 --> [Link],330
to how useState would look. And I hope by deconstructing our own example you can
better understand how

186
[Link],330 --> [Link],560
that code for useState actually works.

187
[Link],560 --> [Link],630
So now that you've learned a lot more about destructuring, it's time to complete
this challenge.

188
[Link],780 --> [Link],120
Pause the video now and I'll show you the solution in the next lesson.