In this video it's going to be up to you to use the object properties shorthand and d structuring which
we covered in the last video inside of the weather application.
Now to start I'm going to take our D structuring and object property shorthand playground file and I'll
move that off to the right hand side.
So we have all of our weather app scripts side by side over here and from the terminal.
I am going to switch back into the weather app directory since we'll be running that application.
In this lesson so S.D. dot dot forward slash weather hyphen app.
Now once we're here the goal is to figure out what exactly we're supposed to do and as always with challenges.
I have a set of challenged comments describing what I'd like you to get done.
The big picture goal is to use both the destruction thing and the property shorthand syntax inside of
the weather application.
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
three of these have an instance where we're using properties from an object that we could just d structure
instead.
Down below we grab things off of data those properties could be d structured into individual variables
in forecast.
J ust end in geo coded dot J S the only thing we ever use off of the response object is body that could
be destruction as well.
From there we can talk about using the property shorthand syntax.
This can be used in forecast J Yes and in geo code J S in both files we set up the options object we
pass to request and we could use that syntax in there.
So take some time to knock out all of those re factors in the files listed for each.
Then when you're done test your work so make sure you can still run the application and get the expected
weather output.
All right.
Pause the video knock that out and when you're done come back and click play
how'd that go.
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
case for the object property shorthand syntax and that's OK down below geo code has its callback called
with two arguments The first is error which is a string and the second is data and we know that data
is an object we use three properties from it latitude longitude and location we're gonna go ahead and
destructor those instead of accessing them off of data up above we have data I'm gonna remove that and
we are going to d structure the second argument passed to the callback right here we are gonna grab
three things from it first up we have latitude then we're gonna have longitude and finally we're gonna
have location this is Andrew from the future with a quick update as a couple of students correctly pointed
out there is a small problem with the line of code that we just wrote and you can see that line of code
under existing code right up top.
Now the problem is something you'll only run into if you end up calling geo code and an error occurs
if you call geo code and you do indeed get back the latitude long to 2D and location things will still
work just fine.
Now this is a legitimate error but it is something that I plan to cover later in the class.
So all of the stuff we're going to talk about right here it is covered in much more detail in the fourth
lesson of Section 8.
Now if you run into the problem between now and then you might think your application is broken.
So I'll take a quick moment to talk about b code change will end up making.
So you can put it in place right now then in the fourth lesson of Section 8.
We'll end up talking about this in greater detail.
Let's start by exploring the problem by talking about the existing code right up top.
So if we call a geo code and there's no error things go well we do get our object as the second argument
to the callback we do structure latitude longitude and location and we will be able to use those in
our function down below.
The problem that we're going to talk about comes up if you call geo code and an error occurs.
So if an error occurs the callback is only called with that first argument the error no value is provided
for the second argument and we know that if we call a function and no value is provided for an argument
the default value is undefined.
So long story short if we call geo code and an error occurs what we end up doing is trying to destructor
off of undefined which is going to throw an error.
We could only de structure off of an object.
So now that we've explored the problem let's talk about the solution briefly.
Let's get started by talking about the code at the very bottom.
So at the very bottom we are using the iOS 6 default function parameters syntax.
This is the new feature of JavaScript.
We'll talk about in detail in Section 8.
Lesson 4 but let's briefly touch on it here just so we can understand the change will make to that one
line of code.
So down below we set up a pretty standard function called great it takes in the user's name and it prints
on message using console dot log.
So if the name was Mike it would print yellow followed by Mike followed by an exclamation mark.
Now what if we call green with no name.
In that case we would get something like Hello undefined.
So what if we wanted to provide a good value for name.
If no name is provided when the function is called we can do that using the default function parameters
syntax.
So I've added a red underline under the new code that uses this feature.
So right there inside of parentheses I call my first argument name.
Then I ad space equals space followed by the string user.
So that is the new syntax.
This says if we have a value for the first argument go ahead and use that value.
If we don't have a value for that first argument go ahead and use the string user.
So we can see this in action in our two function calls.
Down below when I call greet and I pass in Andrew I see.
Hello Andrew.
When I call greet and I don't pass in any arguments I see Hello user.
So it falls back to the default.
Now you could run this code in your application to see this in action.
And as mentioned we'll cover this in a way more detail later but that's a quick idea of what we can
do with the iOS 6 default function parameters.
Now let's talk about how we'll end up changing that one line of code.
So up top we have our existing code that we just wrote in the middle.
We have the new code with a few characters added and I've underlined those in red.
So right there we are using the default function parameters syntax to set up a default value for that
second parameter.
So if a value is provided we'll use it.
If no value is provided the default of an empty object has been configured.
So now let's explore the two scenarios when geo code runs successfully and when geo code fails.
So if geo code runs successfully we'll end up calling our callback with a value for the second argument.
If we provide a value then our default won't be used.
So we'll deal structure all of the data that we got back from the API and we'll be able to use that
in the function down below.
That was never the problem.
The problem is if we got an error.
So if we call geo code and an error occurs the callback is called with just the first argument in that
case.
The second argument would not be provided and our default of an empty object would be used.
So from there we would end up de structuring latitude longitude and location off of that empty object.
And that's fine.
That is perfectly valid.
The value for all three will be undefined.
So the program won't crash we will just get undefined for those three values which is fine because we're
never going to use them if the error exists.
So that's their brief change we need to make.
And once again you might have been able to go through the class without ever running into this before
I explained it but a few students were they were confused.
And my goal is to create a class that's seamless that works from beginning to end without problems.
So right here I just wanted to jump in with an exclamation excuse me with an explanation and we'll go
back and talk about all of this in more detail in the future.
So sorry for that quite long transgression but now that we can understand the change we need to make
and what it does.
Let's add that change to our code then we'll jump back in to the regular lesson now at this point our
program is broken because we're still using that data variable but it no longer exists.
We're going to remove data and Dot in all three locations.
Now we're just referencing latitude which is indeed defined.
We're just referencing longitude from up above and down below referencing location.
Now that we have this in place we can actually test our work but more before moving on to the other
files.
It's always a good idea to test your work as you refactor.
So instead of getting to the end and having a bunch of different files that could have caused the error
it's easier to isolate the problem.
If you run the program multiple times.
So node app dot J S if this works with a search term like Philadelphia then we know our refactoring
here is good.
If it doesn't work we know that it must just be the changes we made to this particular file making it
easier to figure out what went wrong.
Now let's move on to the other files forecast.
J.S. and geo code dot J.S. both which can use de structuring and that shorthand syntax over in forecast
J S we can use these shorthand syntax in the object we pass to request instead of referencing you are
L variable to get the U R L property we can use these shorthand syntax which does the exact same thing.
This is still setting up a U R L property whose value comes from the variable up above because the names
are identical.
Now we can also use a little bit of distraction.
Down below we have error and we have response we know response is an object but the only property we're
ever using off of it is body.
So we could just de structure that.
I'll remove the response argument set up my curly braces and list out body right here down below.
We can now remove any use cases of response replacing them with just the call to bodies.
So right here instead of response dot body dot error.
I have body dot error and I'll remove response dot down below I have it three times as we generate the
forecast and I'll remove it in all three.
Now we are just referencing body which does indeed exist as a standalone variable because we do structured
it up above.
Last up we can move to geo coded dot J S which is very similar to the forecast file I can use the shorthand
syntax right here once again when setting up the U R L and once again I can d structure a body off of
response.
Now there are four situations where we used response before.
Once you write here to fetch the length of the features array that's gonna be just body dot features
dot length now and down below we used it for each of these three property values.
So I'm gonna take all three I'm gonna remove response dot accessing just dead body object.
Now that we have this in place we've done all the refactoring that is steps one and two and we're going
to move on to step three and actually test things out for a final time.
So down below from the terminal.
Let's go ahead and rerun the program right here.
What do I get.
I get my forecast.
Still printing it is for the correct location.
Philadelphia Pennsylvania.
In the United States.
And I have my forecast rain in the morning.
Yep it is indeed raining outside.
It's currently a bit chilly with a zero percent chance of rain.
As we continue through the day now that we have this in place we are all done and that is the introduction
to yes six D structuring and the object property shorthand we're going to use both of these extensively
throughout the class.
Now that we know about them.
Sure there are other situations where we could have used these in notes dot J S but we'll just continue
to use these features going forward instead speaking of going forward.
Let's go ahead and jump right in to the next video.