In this video we're going to talk about a couple of iOS 6 features that make it much easier to work
with objects when it comes to creating objects.
And when it comes to accessing properties on an object then we'll take what we learned and we'll actually
integrate it into the weather application to improve it.
But to kick things off let's go ahead and create a brand new file in the playground directory.
I'm gonna make a new one starting with the number five and we're gonna call this five a hyphen.
Yes six objects dot J S in here we're going to mess around with two new features then we'll take what
we learned and integrate it into the weather app and that'll be your challenge for the video.
Let's get started with the easier of the two features which is the object of property shorthand.
This allows us to add values onto an object with a shorthand syntax under certain conditions.
So to kick things off and explore how this is going to work let's make two variables.
I'm going to create a const name and I'm going to store my first name.
Now for this example the variable names are important.
So make sure to use the same ones I use.
Next up we're going to create a constant called user age and I'm gonna set that equal to my age.
Now from here the goal is to create a user object.
So we're gonna set that object up.
We want their name and age coming from these variables.
And I want to store their location which I'll just set up right inside of the object definition.
So name comes from the name variable then age comes from the user age variable.
And finally location comes from an inline string.
So right here I'll just to find my current location.
Philadelphia.
Now we have an object and we could print that to the console and we wouldn't get any surprises.
So right here console dot log user I'm going to save the program and run it just to make sure things
are working so far at this point we are not taking advantage of the new syntax down below in the terminal.
I'll use these dot dot forward slash playground to switch into that directory from here I'll clear the
terminal output and run my new script that's going gonna be node 5 hyphen yes 6 hyphen objects dot J
S and when I run it what do I see.
I see my object with those three properties name age and location with the correct value for each.
Now let's talk about the object property shorthand syntax this syntax can be used when defining an object
like we're doing here it comes into play when we're setting up a property whose value comes from a variable
of the same name and that is exactly what we do here we're setting up a name property the value comes
from a variable with the same name and that means we can actually use the shorthand syntax.
So what do we do.
We remove the colon and we remove the variable name leaving one just looks like the property name but
this is actually a shorthand syntax.
When we do this it's going to create a name property on user whose value comes from the value of the
name variable.
So in this case we are going to get the exact same result we got before.
Down below I can save the file with the new syntax in place and run the script.
What do I get.
I get the exact same thing showing up.
Now it's important to note that the names need to match up exactly.
So we have age right here.
But its value comes from the user age variable.
That means we're not gonna be able to take advantage of the shorthand syntax like this because there
is no age variable defined.
If I do try to use this we're gonna get an error when we run the script down below I can run the program
in its current state.
And what do I get.
I get a reference error.
Age is not defined and they're right there is no age variable.
So when we do want to create a property whose value comes from a variable of a different name we still
have to list that out.
But here we can use these shorthand syntax because the property name we're trying to create does match
up with that variable name.
Now this is not an earth shattering feature that's going to make your programs faster or more scalable
but it is a very nice syntax improvement.
And I'd take advantage of it constantly and there are a few places in our code where we can take advantage
of it as well before we worry about integrating this into our code.
Let's go ahead and explore the other feature which is going to take a bit more time.
This is known as object D structuring now object D structuring is useful when you have an object and
you're trying to access properties from it.
So let's start by creating an object we can work with.
Let's get started by defining the object we're going to d structure.
So right here const a product equals we're gonna set up an object and we could say this is an object
for a fictitious inventory system let's say for our store we have a label for each product which is
shown on the shelf below the product.
I could call this one something like red notebook and from there we'll add a couple of other properties
into the mix I'll add price.
Let's say this notebook is three bucks I'll add these stock we can say we have two hundred and one in
stock.
And finally I'll add something like sale price and we'll say that the item is currently not on sale
by setting the sale price property equal to undefined.
Now from here we can go ahead and use de structuring the whole goal of D structuring is to extract object
properties end their values into individual variables so instead of a product price of property I could
have a price variable with the value of three or instead of a label property on product I could get
access to a label variable with the value red notebook.
This is really useful especially when you're working with complex objects that have a lot of properties
you're constantly referencing.
It's nice to have those standalone variables that you can easily use we can achieve the same behavior
without a new syntax by simply creating individual variables like a concert label whose value comes
from product label and we could do the same thing for something else like a concept stock whose value
comes from product dot stock.
Now we have a label and stock variable we can access throughout the rest of the program without having
to grab it off of the object each and every time we want to use it.
Now the problem with this obviously is that we end up writing a lot of code for each one.
We want to extract.
So we're gonna have multiple lines to pull off multiple values with dy structuring.
We get an improved syntax so I'm going to comment out those two lines and down below we'll explore the
deep structuring syntax.
Now I'll admit it's gonna be a bit weird at first but I promise you'll get comfortable with it as we
use it more and more throughout the class.
So to start we are indeed still trying to create new variables.
So I am going to set up const and in this case we are going to after const add a pair of curly braces
we'll talk about what goes inside of there in just a second.
After that we are going to set it equal to and this is where we put the object we're trying to D structure.
In this case I'm trying to pull values off of product so I'm going to reference it right there.
Now let's do the same thing we did above.
Instead of accessing product out label and product dot stock I want an individual label and stock a
variable to get that done inside of the curly braces we list out all of the properties we're trying
to extract.
So that would be a label comma followed by the next one which would be stock.
Now the space in between is completely optional.
I typically add a space when I'm working with D structuring and now what do we have we have individual
label and stock variables which we can use down below.
And to prove it we're going to log them.
So console dot log label followed by console dot log to print these stack.
And if we run the program we're gonna see that we do indeed get red notebook followed by two hundred
and one down below.
I am going to rerun the program using the up arrow key and enter and when I do I get the two values
that I just mentioned we would get.
So with the D structuring syntax it makes it really easy to extract properties off of an object creating
individual variables that store those property values.
So in this case we are pulling a label property off of product.
We are getting its value and we are creating a new label variable and we're doing the same thing with
stock.
We're creating a new stock variable whose value comes from the stock property on product.
When you are de structuring you can grab as many things as you want by listing them out in a comma separated
list inside of these curly braces.
And that could include properties that don't exist on the object at all like rating maybe I'm storing
a star rating for each product.
There is no property defined up above.
So what are we going to get as the rating variable.
Well we're going to get undefined down below.
Consult dot log if I print that new rating variable.
The program isn't going to crash because there's no property rating.
It's just going to store undefined and that's exactly what we can see down below.
Now there are two other nice things we can do with D structuring.
One is that we can rename the variable we end up creating.
So let's say that I want to create a label variable but instead of calling a label I want to call it
something like product label.
But obviously I'm still trying to get it from the label property on product.
To do this we use the following syntax.
We list out the property that we're trying to grab followed by a colon followed by the new name.
So in this case product label would be the new name we want to create.
So this is going to create a new constant called product label.
Who gets its value from the product label property.
Now let's go ahead and test this out.
If I run the program in its current state it's going to fail.
There is no longer a label variable defined.
We have renamed that product label.
If I reference product label we're gonna see this time around that things will indeed work.
I'm going to rerun the program and now we are correctly seeing red notebook print.
So being able to rename the variable we create D structuring can be really handy especially if that
name happens to be already taken maybe as an example.
We already have a label variable up above and the program and we can't use that down here but we still
want to take advantage of D structuring.
One last little feature we get when using D structuring is the ability to set up a default value for
the variable should the object not have that property.
We could do this for a label or stock or rating to explore this let's do it for a rating since there
is no rating property up above.
Right here we just say rating equals followed by a value.
Let's say if there is no rating property we will use the number five as a five star rating.
Now if I run the program we're going to see five print.
It's important to note that this default will only be used if there is no property matching on product.
If there is the default won't be used.
So for example if I set up a rating let's set it equal to four point two stars up above.
Now that value is going to be used instead of the default we can save the program.
We can rerun things and that is exactly what we end up seeing below.
Now we can also use these structuring when we're working with function arguments.
That's the last thing we're going to cover before we move on to the challenge where you're going to
use these two tools in the weather application.
Right here I'm going to comment out all of the code we have for D structuring and we're going to create
a function that takes in that product object.
So right here.
Let's go ahead and create a function.
I'm going to create something like const I'll call this transaction and we're gonna set it equal to
a function and this function is going to expect two arguments.
Let's say there's a transaction type am I selling a product or am I placing an order.
Let's say we also need to know the information about the product that we are making this transaction
with.
So I'll call this something like my product.
Now we can pass that value in to transaction using a very basic syntax transaction calling it with those
two arguments.
Let's just use these string order as the first argument and then we'll pass in our object as the second
so right here we have an object as the value for my product.
Now if we wanted to distract your values off of that we could just add a line down below cost inside
of curly braces equals my product and I could d structure something like the label that would indeed
work as expected.
Now we have a local label variable we can use but we can actually take things one step further and d
structure the argument right here in the arguments list.
So instead of giving a name for that argument we simply set up the curly braces and now we can d structure
whatever we want off of that variable without ever having access to the whole thing.
So right here we're gonna have access to just the values we choose to D structure.
I could for example D structure label and our destruction or something else like these stock to values
that might be important when making an order.
And down below we can use them.
So console dialogue I'll just print out the type followed by the label followed by the stock just to
make sure all of those variables actually exist.
If I run the program down below.
What do I see.
I see the order type.
I see my label and I see these stock printing all getting their values correctly assigned.
So when we're using D structuring we can d structure a standard object outside of the arguments for
a function using the syntax up above.
If we know that an argument is an object though we can always d structure it right in line.
Both are perfectly valid and we'll end up using both throughout the course.
That's where we're gonna stop for this one now that we know how to use the property shorthand syntax
and object D structuring in the next video it's going to be up to you to use both in the weather application.
I'm excited to get to that challenge video so let's go ahead and jump right in to the next one.