1
00:00:00,240 --> 00:00:05,820
In this video it's going to be up to you to use the object properties shorthand and d structuring which

2
00:00:05,820 --> 00:00:10,470
we covered in the last video inside of the weather application.

3
00:00:10,470 --> 00:00:16,530
Now to start I'm going to take our D structuring and object property shorthand playground file and I'll

4
00:00:16,530 --> 00:00:18,560
move that off to the right hand side.

5
00:00:18,570 --> 00:00:23,660
So we have all of our weather app scripts side by side over here and from the terminal.

6
00:00:23,670 --> 00:00:28,540
I am going to switch back into the weather app directory since we'll be running that application.

7
00:00:28,560 --> 00:00:34,130
In this lesson so S.D. dot dot forward slash weather hyphen app.

8
00:00:34,140 --> 00:00:40,710
Now once we're here the goal is to figure out what exactly we're supposed to do and as always with challenges.

9
00:00:40,860 --> 00:00:45,360
I have a set of challenged comments describing what I'd like you to get done.

10
00:00:45,460 --> 00:00:51,900
The big picture goal is to use both the destruction thing and the property shorthand syntax inside of

11
00:00:51,900 --> 00:00:53,550
the weather application.

12
00:00:53,550 --> 00:01:00,990
First up you're going to use de structuring an apt J S forecast to dot J.S. and geo code dot J S all

13
00:01:00,990 --> 00:01:06,270
three of these have an instance where we're using properties from an object that we could just d structure

14
00:01:06,270 --> 00:01:07,070
instead.

15
00:01:07,200 --> 00:01:13,050
Down below we grab things off of data those properties could be d structured into individual variables

16
00:01:13,530 --> 00:01:14,470
in forecast.

17
00:01:14,520 --> 00:01:21,540
J ust end in geo coded dot J S the only thing we ever use off of the response object is body that could

18
00:01:21,540 --> 00:01:23,940
be destruction as well.

19
00:01:23,940 --> 00:01:28,080
From there we can talk about using the property shorthand syntax.

20
00:01:28,110 --> 00:01:36,120
This can be used in forecast J Yes and in geo code J S in both files we set up the options object we

21
00:01:36,120 --> 00:01:40,530
pass to request and we could use that syntax in there.

22
00:01:40,530 --> 00:01:45,840
So take some time to knock out all of those re factors in the files listed for each.

23
00:01:45,840 --> 00:01:51,750
Then when you're done test your work so make sure you can still run the application and get the expected

24
00:01:51,960 --> 00:01:53,320
weather output.

25
00:01:53,460 --> 00:01:54,030
All right.

26
00:01:54,030 --> 00:01:58,380
Pause the video knock that out and when you're done come back and click play

27
00:02:02,270 --> 00:02:03,140
how'd that go.

28
00:02:03,140 --> 00:02:09,230
I'm going to kick things off with app dot J S now in here we can use d structuring but there is no use

29
00:02:09,230 --> 00:02:17,330
case for the object property shorthand syntax and that's OK down below geo code has its callback called

30
00:02:17,330 --> 00:02:24,680
with two arguments The first is error which is a string and the second is data and we know that data

31
00:02:24,830 --> 00:02:31,580
is an object we use three properties from it latitude longitude and location we're gonna go ahead and

32
00:02:31,580 --> 00:02:38,840
destructor those instead of accessing them off of data up above we have data I'm gonna remove that and

33
00:02:38,840 --> 00:02:45,020
we are going to d structure the second argument passed to the callback right here we are gonna grab

34
00:02:45,020 --> 00:02:51,630
three things from it first up we have latitude then we're gonna have longitude and finally we're gonna

35
00:02:51,650 --> 00:02:57,890
have location this is Andrew from the future with a quick update as a couple of students correctly pointed

36
00:02:57,890 --> 00:03:03,170
out there is a small problem with the line of code that we just wrote and you can see that line of code

37
00:03:03,200 --> 00:03:05,570
under existing code right up top.

38
00:03:05,570 --> 00:03:11,840
Now the problem is something you'll only run into if you end up calling geo code and an error occurs

39
00:03:12,080 --> 00:03:18,230
if you call geo code and you do indeed get back the latitude long to 2D and location things will still

40
00:03:18,230 --> 00:03:19,610
work just fine.

41
00:03:19,640 --> 00:03:25,420
Now this is a legitimate error but it is something that I plan to cover later in the class.

42
00:03:25,490 --> 00:03:31,190
So all of the stuff we're going to talk about right here it is covered in much more detail in the fourth

43
00:03:31,190 --> 00:03:32,880
lesson of Section 8.

44
00:03:32,900 --> 00:03:38,130
Now if you run into the problem between now and then you might think your application is broken.

45
00:03:38,210 --> 00:03:42,140
So I'll take a quick moment to talk about b code change will end up making.

46
00:03:42,230 --> 00:03:46,900
So you can put it in place right now then in the fourth lesson of Section 8.

47
00:03:47,000 --> 00:03:50,330
We'll end up talking about this in greater detail.

48
00:03:50,330 --> 00:03:54,910
Let's start by exploring the problem by talking about the existing code right up top.

49
00:03:54,920 --> 00:04:00,740
So if we call a geo code and there's no error things go well we do get our object as the second argument

50
00:04:00,740 --> 00:04:07,100
to the callback we do structure latitude longitude and location and we will be able to use those in

51
00:04:07,100 --> 00:04:08,740
our function down below.

52
00:04:08,810 --> 00:04:14,390
The problem that we're going to talk about comes up if you call geo code and an error occurs.

53
00:04:14,390 --> 00:04:21,440
So if an error occurs the callback is only called with that first argument the error no value is provided

54
00:04:21,440 --> 00:04:27,710
for the second argument and we know that if we call a function and no value is provided for an argument

55
00:04:27,950 --> 00:04:30,620
the default value is undefined.

56
00:04:30,620 --> 00:04:38,090
So long story short if we call geo code and an error occurs what we end up doing is trying to destructor

57
00:04:38,120 --> 00:04:41,630
off of undefined which is going to throw an error.

58
00:04:41,630 --> 00:04:44,480
We could only de structure off of an object.

59
00:04:44,480 --> 00:04:49,240
So now that we've explored the problem let's talk about the solution briefly.

60
00:04:49,550 --> 00:04:52,680
Let's get started by talking about the code at the very bottom.

61
00:04:52,700 --> 00:04:58,280
So at the very bottom we are using the iOS 6 default function parameters syntax.

62
00:04:58,280 --> 00:05:00,370
This is the new feature of JavaScript.

63
00:05:00,380 --> 00:05:03,260
We'll talk about in detail in Section 8.

64
00:05:03,260 --> 00:05:09,080
Lesson 4 but let's briefly touch on it here just so we can understand the change will make to that one

65
00:05:09,080 --> 00:05:09,830
line of code.

66
00:05:10,160 --> 00:05:15,640
So down below we set up a pretty standard function called great it takes in the user's name and it prints

67
00:05:15,640 --> 00:05:18,300
on message using console dot log.

68
00:05:18,320 --> 00:05:24,710
So if the name was Mike it would print yellow followed by Mike followed by an exclamation mark.

69
00:05:24,710 --> 00:05:27,410
Now what if we call green with no name.

70
00:05:27,440 --> 00:05:30,980
In that case we would get something like Hello undefined.

71
00:05:30,980 --> 00:05:34,690
So what if we wanted to provide a good value for name.

72
00:05:34,790 --> 00:05:41,060
If no name is provided when the function is called we can do that using the default function parameters

73
00:05:41,120 --> 00:05:42,260
syntax.

74
00:05:42,260 --> 00:05:46,750
So I've added a red underline under the new code that uses this feature.

75
00:05:46,760 --> 00:05:51,000
So right there inside of parentheses I call my first argument name.

76
00:05:51,110 --> 00:05:55,780
Then I ad space equals space followed by the string user.

77
00:05:55,790 --> 00:05:57,860
So that is the new syntax.

78
00:05:57,860 --> 00:06:03,700
This says if we have a value for the first argument go ahead and use that value.

79
00:06:03,830 --> 00:06:09,140
If we don't have a value for that first argument go ahead and use the string user.

80
00:06:09,380 --> 00:06:12,500
So we can see this in action in our two function calls.

81
00:06:12,500 --> 00:06:16,790
Down below when I call greet and I pass in Andrew I see.

82
00:06:16,820 --> 00:06:17,940
Hello Andrew.

83
00:06:17,960 --> 00:06:22,670
When I call greet and I don't pass in any arguments I see Hello user.

84
00:06:22,730 --> 00:06:24,980
So it falls back to the default.

85
00:06:25,040 --> 00:06:29,000
Now you could run this code in your application to see this in action.

86
00:06:29,000 --> 00:06:34,160
And as mentioned we'll cover this in a way more detail later but that's a quick idea of what we can

87
00:06:34,160 --> 00:06:38,450
do with the iOS 6 default function parameters.

88
00:06:38,450 --> 00:06:41,600
Now let's talk about how we'll end up changing that one line of code.

89
00:06:41,660 --> 00:06:45,420
So up top we have our existing code that we just wrote in the middle.

90
00:06:45,440 --> 00:06:50,340
We have the new code with a few characters added and I've underlined those in red.

91
00:06:50,420 --> 00:06:57,050
So right there we are using the default function parameters syntax to set up a default value for that

92
00:06:57,050 --> 00:06:58,370
second parameter.

93
00:06:58,370 --> 00:07:00,740
So if a value is provided we'll use it.

94
00:07:00,860 --> 00:07:06,020
If no value is provided the default of an empty object has been configured.

95
00:07:06,020 --> 00:07:12,700
So now let's explore the two scenarios when geo code runs successfully and when geo code fails.

96
00:07:12,710 --> 00:07:18,870
So if geo code runs successfully we'll end up calling our callback with a value for the second argument.

97
00:07:19,070 --> 00:07:22,120
If we provide a value then our default won't be used.

98
00:07:22,160 --> 00:07:27,470
So we'll deal structure all of the data that we got back from the API and we'll be able to use that

99
00:07:27,500 --> 00:07:29,120
in the function down below.

100
00:07:29,120 --> 00:07:30,580
That was never the problem.

101
00:07:30,590 --> 00:07:32,810
The problem is if we got an error.

102
00:07:32,870 --> 00:07:39,140
So if we call geo code and an error occurs the callback is called with just the first argument in that

103
00:07:39,140 --> 00:07:39,680
case.

104
00:07:39,680 --> 00:07:45,350
The second argument would not be provided and our default of an empty object would be used.

105
00:07:45,650 --> 00:07:52,960
So from there we would end up de structuring latitude longitude and location off of that empty object.

106
00:07:53,060 --> 00:07:53,770
And that's fine.

107
00:07:53,780 --> 00:07:55,280
That is perfectly valid.

108
00:07:55,280 --> 00:07:58,230
The value for all three will be undefined.

109
00:07:58,280 --> 00:08:04,400
So the program won't crash we will just get undefined for those three values which is fine because we're

110
00:08:04,400 --> 00:08:07,740
never going to use them if the error exists.

111
00:08:07,790 --> 00:08:09,870
So that's their brief change we need to make.

112
00:08:09,950 --> 00:08:14,990
And once again you might have been able to go through the class without ever running into this before

113
00:08:15,020 --> 00:08:18,600
I explained it but a few students were they were confused.

114
00:08:18,680 --> 00:08:24,440
And my goal is to create a class that's seamless that works from beginning to end without problems.

115
00:08:24,440 --> 00:08:30,800
So right here I just wanted to jump in with an exclamation excuse me with an explanation and we'll go

116
00:08:30,800 --> 00:08:34,370
back and talk about all of this in more detail in the future.

117
00:08:34,370 --> 00:08:40,190
So sorry for that quite long transgression but now that we can understand the change we need to make

118
00:08:40,250 --> 00:08:41,340
and what it does.

119
00:08:41,420 --> 00:08:48,700
Let's add that change to our code then we'll jump back in to the regular lesson now at this point our

120
00:08:48,700 --> 00:08:54,430
program is broken because we're still using that data variable but it no longer exists.

121
00:08:54,430 --> 00:08:58,030
We're going to remove data and Dot in all three locations.

122
00:08:58,030 --> 00:09:01,750
Now we're just referencing latitude which is indeed defined.

123
00:09:01,810 --> 00:09:07,570
We're just referencing longitude from up above and down below referencing location.

124
00:09:07,570 --> 00:09:12,370
Now that we have this in place we can actually test our work but more before moving on to the other

125
00:09:12,370 --> 00:09:13,320
files.

126
00:09:13,330 --> 00:09:17,050
It's always a good idea to test your work as you refactor.

127
00:09:17,050 --> 00:09:21,730
So instead of getting to the end and having a bunch of different files that could have caused the error

128
00:09:22,000 --> 00:09:24,790
it's easier to isolate the problem.

129
00:09:24,880 --> 00:09:27,240
If you run the program multiple times.

130
00:09:27,370 --> 00:09:34,510
So node app dot J S if this works with a search term like Philadelphia then we know our refactoring

131
00:09:34,510 --> 00:09:35,770
here is good.

132
00:09:35,770 --> 00:09:41,140
If it doesn't work we know that it must just be the changes we made to this particular file making it

133
00:09:41,170 --> 00:09:43,930
easier to figure out what went wrong.

134
00:09:43,930 --> 00:09:46,710
Now let's move on to the other files forecast.

135
00:09:46,840 --> 00:09:54,790
J.S. and geo code dot J.S. both which can use de structuring and that shorthand syntax over in forecast

136
00:09:54,990 --> 00:10:02,300
J S we can use these shorthand syntax in the object we pass to request instead of referencing you are

137
00:10:02,300 --> 00:10:08,720
L variable to get the U R L property we can use these shorthand syntax which does the exact same thing.

138
00:10:08,890 --> 00:10:15,220
This is still setting up a U R L property whose value comes from the variable up above because the names

139
00:10:15,280 --> 00:10:16,740
are identical.

140
00:10:16,780 --> 00:10:19,550
Now we can also use a little bit of distraction.

141
00:10:19,840 --> 00:10:26,220
Down below we have error and we have response we know response is an object but the only property we're

142
00:10:26,260 --> 00:10:28,330
ever using off of it is body.

143
00:10:28,480 --> 00:10:30,380
So we could just de structure that.

144
00:10:30,640 --> 00:10:37,340
I'll remove the response argument set up my curly braces and list out body right here down below.

145
00:10:37,360 --> 00:10:43,180
We can now remove any use cases of response replacing them with just the call to bodies.

146
00:10:43,190 --> 00:10:46,570
So right here instead of response dot body dot error.

147
00:10:46,570 --> 00:10:53,050
I have body dot error and I'll remove response dot down below I have it three times as we generate the

148
00:10:53,050 --> 00:10:55,890
forecast and I'll remove it in all three.

149
00:10:55,930 --> 00:11:02,270
Now we are just referencing body which does indeed exist as a standalone variable because we do structured

150
00:11:02,290 --> 00:11:03,430
it up above.

151
00:11:03,870 --> 00:11:10,660
Last up we can move to geo coded dot J S which is very similar to the forecast file I can use the shorthand

152
00:11:10,660 --> 00:11:17,110
syntax right here once again when setting up the U R L and once again I can d structure a body off of

153
00:11:17,110 --> 00:11:19,060
response.

154
00:11:19,090 --> 00:11:22,600
Now there are four situations where we used response before.

155
00:11:22,660 --> 00:11:28,690
Once you write here to fetch the length of the features array that's gonna be just body dot features

156
00:11:28,690 --> 00:11:33,790
dot length now and down below we used it for each of these three property values.

157
00:11:33,850 --> 00:11:41,580
So I'm gonna take all three I'm gonna remove response dot accessing just dead body object.

158
00:11:41,580 --> 00:11:46,880
Now that we have this in place we've done all the refactoring that is steps one and two and we're going

159
00:11:46,890 --> 00:11:51,210
to move on to step three and actually test things out for a final time.

160
00:11:51,540 --> 00:11:53,630
So down below from the terminal.

161
00:11:53,730 --> 00:11:58,000
Let's go ahead and rerun the program right here.

162
00:11:58,000 --> 00:11:58,990
What do I get.

163
00:11:58,990 --> 00:12:00,310
I get my forecast.

164
00:12:00,310 --> 00:12:03,070
Still printing it is for the correct location.

165
00:12:03,070 --> 00:12:04,660
Philadelphia Pennsylvania.

166
00:12:04,660 --> 00:12:06,210
In the United States.

167
00:12:06,310 --> 00:12:09,040
And I have my forecast rain in the morning.

168
00:12:09,040 --> 00:12:11,470
Yep it is indeed raining outside.

169
00:12:11,470 --> 00:12:14,730
It's currently a bit chilly with a zero percent chance of rain.

170
00:12:14,830 --> 00:12:22,450
As we continue through the day now that we have this in place we are all done and that is the introduction

171
00:12:22,450 --> 00:12:29,050
to yes six D structuring and the object property shorthand we're going to use both of these extensively

172
00:12:29,050 --> 00:12:29,970
throughout the class.

173
00:12:29,980 --> 00:12:31,570
Now that we know about them.

174
00:12:31,640 --> 00:12:37,150
Sure there are other situations where we could have used these in notes dot J S but we'll just continue

175
00:12:37,150 --> 00:12:41,530
to use these features going forward instead speaking of going forward.

176
00:12:41,560 --> 00:12:44,440
Let's go ahead and jump right in to the next video.