1 00:00:00,180 --> 00:00:05,790 In this video we're going to talk about a couple of iOS 6 features that make it much easier to work 2 00:00:05,790 --> 00:00:08,720 with objects when it comes to creating objects. 3 00:00:08,730 --> 00:00:14,400 And when it comes to accessing properties on an object then we'll take what we learned and we'll actually 4 00:00:14,400 --> 00:00:17,480 integrate it into the weather application to improve it. 5 00:00:17,700 --> 00:00:23,130 But to kick things off let's go ahead and create a brand new file in the playground directory. 6 00:00:23,160 --> 00:00:28,650 I'm gonna make a new one starting with the number five and we're gonna call this five a hyphen. 7 00:00:28,650 --> 00:00:36,810 Yes six objects dot J S in here we're going to mess around with two new features then we'll take what 8 00:00:36,810 --> 00:00:41,570 we learned and integrate it into the weather app and that'll be your challenge for the video. 9 00:00:41,640 --> 00:00:47,710 Let's get started with the easier of the two features which is the object of property shorthand. 10 00:00:47,790 --> 00:00:54,430 This allows us to add values onto an object with a shorthand syntax under certain conditions. 11 00:00:54,540 --> 00:00:58,910 So to kick things off and explore how this is going to work let's make two variables. 12 00:00:58,980 --> 00:01:02,810 I'm going to create a const name and I'm going to store my first name. 13 00:01:02,850 --> 00:01:05,910 Now for this example the variable names are important. 14 00:01:05,940 --> 00:01:08,820 So make sure to use the same ones I use. 15 00:01:08,820 --> 00:01:15,850 Next up we're going to create a constant called user age and I'm gonna set that equal to my age. 16 00:01:15,960 --> 00:01:19,570 Now from here the goal is to create a user object. 17 00:01:19,590 --> 00:01:21,700 So we're gonna set that object up. 18 00:01:21,870 --> 00:01:25,440 We want their name and age coming from these variables. 19 00:01:25,440 --> 00:01:30,820 And I want to store their location which I'll just set up right inside of the object definition. 20 00:01:31,020 --> 00:01:37,760 So name comes from the name variable then age comes from the user age variable. 21 00:01:37,920 --> 00:01:41,640 And finally location comes from an inline string. 22 00:01:41,640 --> 00:01:44,490 So right here I'll just to find my current location. 23 00:01:44,490 --> 00:01:45,710 Philadelphia. 24 00:01:45,780 --> 00:01:50,400 Now we have an object and we could print that to the console and we wouldn't get any surprises. 25 00:01:50,430 --> 00:01:56,340 So right here console dot log user I'm going to save the program and run it just to make sure things 26 00:01:56,340 --> 00:02:03,330 are working so far at this point we are not taking advantage of the new syntax down below in the terminal. 27 00:02:03,330 --> 00:02:09,870 I'll use these dot dot forward slash playground to switch into that directory from here I'll clear the 28 00:02:09,900 --> 00:02:17,640 terminal output and run my new script that's going gonna be node 5 hyphen yes 6 hyphen objects dot J 29 00:02:17,660 --> 00:02:20,290 S and when I run it what do I see. 30 00:02:20,400 --> 00:02:27,420 I see my object with those three properties name age and location with the correct value for each. 31 00:02:27,420 --> 00:02:34,230 Now let's talk about the object property shorthand syntax this syntax can be used when defining an object 32 00:02:34,260 --> 00:02:40,860 like we're doing here it comes into play when we're setting up a property whose value comes from a variable 33 00:02:40,950 --> 00:02:47,640 of the same name and that is exactly what we do here we're setting up a name property the value comes 34 00:02:47,640 --> 00:02:54,120 from a variable with the same name and that means we can actually use the shorthand syntax. 35 00:02:54,120 --> 00:02:54,990 So what do we do. 36 00:02:55,140 --> 00:03:01,710 We remove the colon and we remove the variable name leaving one just looks like the property name but 37 00:03:01,710 --> 00:03:04,040 this is actually a shorthand syntax. 38 00:03:04,050 --> 00:03:10,860 When we do this it's going to create a name property on user whose value comes from the value of the 39 00:03:10,860 --> 00:03:12,440 name variable. 40 00:03:12,450 --> 00:03:16,830 So in this case we are going to get the exact same result we got before. 41 00:03:16,920 --> 00:03:21,690 Down below I can save the file with the new syntax in place and run the script. 42 00:03:21,690 --> 00:03:22,660 What do I get. 43 00:03:22,740 --> 00:03:25,860 I get the exact same thing showing up. 44 00:03:25,860 --> 00:03:29,400 Now it's important to note that the names need to match up exactly. 45 00:03:29,400 --> 00:03:30,930 So we have age right here. 46 00:03:30,960 --> 00:03:34,800 But its value comes from the user age variable. 47 00:03:34,800 --> 00:03:39,870 That means we're not gonna be able to take advantage of the shorthand syntax like this because there 48 00:03:39,870 --> 00:03:42,510 is no age variable defined. 49 00:03:42,570 --> 00:03:48,390 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 50 00:03:48,420 --> 00:03:49,590 in its current state. 51 00:03:49,680 --> 00:03:50,640 And what do I get. 52 00:03:50,700 --> 00:03:52,190 I get a reference error. 53 00:03:52,200 --> 00:03:57,030 Age is not defined and they're right there is no age variable. 54 00:03:57,120 --> 00:04:02,910 So when we do want to create a property whose value comes from a variable of a different name we still 55 00:04:02,910 --> 00:04:04,110 have to list that out. 56 00:04:04,290 --> 00:04:09,660 But here we can use these shorthand syntax because the property name we're trying to create does match 57 00:04:09,660 --> 00:04:11,730 up with that variable name. 58 00:04:11,730 --> 00:04:17,070 Now this is not an earth shattering feature that's going to make your programs faster or more scalable 59 00:04:17,220 --> 00:04:20,420 but it is a very nice syntax improvement. 60 00:04:20,520 --> 00:04:25,680 And I'd take advantage of it constantly and there are a few places in our code where we can take advantage 61 00:04:25,680 --> 00:04:30,370 of it as well before we worry about integrating this into our code. 62 00:04:30,390 --> 00:04:34,210 Let's go ahead and explore the other feature which is going to take a bit more time. 63 00:04:34,230 --> 00:04:43,030 This is known as object D structuring now object D structuring is useful when you have an object and 64 00:04:43,030 --> 00:04:45,700 you're trying to access properties from it. 65 00:04:45,700 --> 00:04:48,460 So let's start by creating an object we can work with. 66 00:04:48,700 --> 00:04:52,330 Let's get started by defining the object we're going to d structure. 67 00:04:52,330 --> 00:04:58,360 So right here const a product equals we're gonna set up an object and we could say this is an object 68 00:04:58,360 --> 00:05:04,270 for a fictitious inventory system let's say for our store we have a label for each product which is 69 00:05:04,270 --> 00:05:06,700 shown on the shelf below the product. 70 00:05:06,700 --> 00:05:11,800 I could call this one something like red notebook and from there we'll add a couple of other properties 71 00:05:11,830 --> 00:05:13,740 into the mix I'll add price. 72 00:05:13,750 --> 00:05:19,930 Let's say this notebook is three bucks I'll add these stock we can say we have two hundred and one in 73 00:05:19,930 --> 00:05:20,830 stock. 74 00:05:20,830 --> 00:05:26,500 And finally I'll add something like sale price and we'll say that the item is currently not on sale 75 00:05:26,530 --> 00:05:30,940 by setting the sale price property equal to undefined. 76 00:05:30,940 --> 00:05:37,480 Now from here we can go ahead and use de structuring the whole goal of D structuring is to extract object 77 00:05:37,480 --> 00:05:44,680 properties end their values into individual variables so instead of a product price of property I could 78 00:05:44,680 --> 00:05:51,370 have a price variable with the value of three or instead of a label property on product I could get 79 00:05:51,370 --> 00:05:55,900 access to a label variable with the value red notebook. 80 00:05:55,900 --> 00:06:00,850 This is really useful especially when you're working with complex objects that have a lot of properties 81 00:06:00,850 --> 00:06:02,920 you're constantly referencing. 82 00:06:02,920 --> 00:06:08,710 It's nice to have those standalone variables that you can easily use we can achieve the same behavior 83 00:06:08,710 --> 00:06:14,890 without a new syntax by simply creating individual variables like a concert label whose value comes 84 00:06:14,890 --> 00:06:21,850 from product label and we could do the same thing for something else like a concept stock whose value 85 00:06:21,850 --> 00:06:24,190 comes from product dot stock. 86 00:06:24,250 --> 00:06:30,160 Now we have a label and stock variable we can access throughout the rest of the program without having 87 00:06:30,160 --> 00:06:34,080 to grab it off of the object each and every time we want to use it. 88 00:06:34,090 --> 00:06:39,060 Now the problem with this obviously is that we end up writing a lot of code for each one. 89 00:06:39,070 --> 00:06:40,370 We want to extract. 90 00:06:40,450 --> 00:06:45,460 So we're gonna have multiple lines to pull off multiple values with dy structuring. 91 00:06:45,460 --> 00:06:51,160 We get an improved syntax so I'm going to comment out those two lines and down below we'll explore the 92 00:06:51,160 --> 00:06:53,010 deep structuring syntax. 93 00:06:53,020 --> 00:06:58,000 Now I'll admit it's gonna be a bit weird at first but I promise you'll get comfortable with it as we 94 00:06:58,000 --> 00:07:00,430 use it more and more throughout the class. 95 00:07:00,430 --> 00:07:04,580 So to start we are indeed still trying to create new variables. 96 00:07:04,600 --> 00:07:12,010 So I am going to set up const and in this case we are going to after const add a pair of curly braces 97 00:07:12,280 --> 00:07:15,470 we'll talk about what goes inside of there in just a second. 98 00:07:15,550 --> 00:07:22,600 After that we are going to set it equal to and this is where we put the object we're trying to D structure. 99 00:07:22,750 --> 00:07:28,850 In this case I'm trying to pull values off of product so I'm going to reference it right there. 100 00:07:28,870 --> 00:07:30,970 Now let's do the same thing we did above. 101 00:07:30,970 --> 00:07:37,570 Instead of accessing product out label and product dot stock I want an individual label and stock a 102 00:07:37,560 --> 00:07:43,540 variable to get that done inside of the curly braces we list out all of the properties we're trying 103 00:07:43,600 --> 00:07:44,580 to extract. 104 00:07:44,590 --> 00:07:50,020 So that would be a label comma followed by the next one which would be stock. 105 00:07:50,020 --> 00:07:52,420 Now the space in between is completely optional. 106 00:07:52,420 --> 00:07:58,840 I typically add a space when I'm working with D structuring and now what do we have we have individual 107 00:07:58,840 --> 00:08:02,530 label and stock variables which we can use down below. 108 00:08:02,530 --> 00:08:04,130 And to prove it we're going to log them. 109 00:08:04,150 --> 00:08:10,550 So console dot log label followed by console dot log to print these stack. 110 00:08:10,570 --> 00:08:15,850 And if we run the program we're gonna see that we do indeed get red notebook followed by two hundred 111 00:08:15,870 --> 00:08:17,780 and one down below. 112 00:08:17,950 --> 00:08:23,380 I am going to rerun the program using the up arrow key and enter and when I do I get the two values 113 00:08:23,380 --> 00:08:25,820 that I just mentioned we would get. 114 00:08:25,870 --> 00:08:33,250 So with the D structuring syntax it makes it really easy to extract properties off of an object creating 115 00:08:33,250 --> 00:08:37,340 individual variables that store those property values. 116 00:08:37,360 --> 00:08:41,110 So in this case we are pulling a label property off of product. 117 00:08:41,110 --> 00:08:46,510 We are getting its value and we are creating a new label variable and we're doing the same thing with 118 00:08:46,510 --> 00:08:47,220 stock. 119 00:08:47,290 --> 00:08:53,710 We're creating a new stock variable whose value comes from the stock property on product. 120 00:08:53,710 --> 00:08:59,860 When you are de structuring you can grab as many things as you want by listing them out in a comma separated 121 00:08:59,860 --> 00:09:02,110 list inside of these curly braces. 122 00:09:02,230 --> 00:09:08,410 And that could include properties that don't exist on the object at all like rating maybe I'm storing 123 00:09:08,440 --> 00:09:10,540 a star rating for each product. 124 00:09:10,540 --> 00:09:13,270 There is no property defined up above. 125 00:09:13,270 --> 00:09:15,970 So what are we going to get as the rating variable. 126 00:09:15,970 --> 00:09:18,730 Well we're going to get undefined down below. 127 00:09:18,740 --> 00:09:23,190 Consult dot log if I print that new rating variable. 128 00:09:23,200 --> 00:09:27,400 The program isn't going to crash because there's no property rating. 129 00:09:27,400 --> 00:09:32,710 It's just going to store undefined and that's exactly what we can see down below. 130 00:09:32,710 --> 00:09:36,340 Now there are two other nice things we can do with D structuring. 131 00:09:36,340 --> 00:09:41,030 One is that we can rename the variable we end up creating. 132 00:09:41,130 --> 00:09:47,160 So let's say that I want to create a label variable but instead of calling a label I want to call it 133 00:09:47,160 --> 00:09:49,300 something like product label. 134 00:09:49,380 --> 00:09:54,120 But obviously I'm still trying to get it from the label property on product. 135 00:09:54,120 --> 00:09:57,010 To do this we use the following syntax. 136 00:09:57,060 --> 00:10:02,910 We list out the property that we're trying to grab followed by a colon followed by the new name. 137 00:10:03,030 --> 00:10:08,040 So in this case product label would be the new name we want to create. 138 00:10:08,040 --> 00:10:11,720 So this is going to create a new constant called product label. 139 00:10:11,820 --> 00:10:15,940 Who gets its value from the product label property. 140 00:10:15,960 --> 00:10:18,220 Now let's go ahead and test this out. 141 00:10:18,270 --> 00:10:21,270 If I run the program in its current state it's going to fail. 142 00:10:21,270 --> 00:10:24,770 There is no longer a label variable defined. 143 00:10:24,810 --> 00:10:27,300 We have renamed that product label. 144 00:10:27,510 --> 00:10:34,190 If I reference product label we're gonna see this time around that things will indeed work. 145 00:10:34,240 --> 00:10:39,160 I'm going to rerun the program and now we are correctly seeing red notebook print. 146 00:10:39,160 --> 00:10:45,820 So being able to rename the variable we create D structuring can be really handy especially if that 147 00:10:45,820 --> 00:10:49,600 name happens to be already taken maybe as an example. 148 00:10:49,660 --> 00:10:55,600 We already have a label variable up above and the program and we can't use that down here but we still 149 00:10:55,600 --> 00:10:57,640 want to take advantage of D structuring. 150 00:10:57,700 --> 00:11:04,090 One last little feature we get when using D structuring is the ability to set up a default value for 151 00:11:04,090 --> 00:11:07,880 the variable should the object not have that property. 152 00:11:07,900 --> 00:11:13,930 We could do this for a label or stock or rating to explore this let's do it for a rating since there 153 00:11:13,930 --> 00:11:16,330 is no rating property up above. 154 00:11:16,510 --> 00:11:20,760 Right here we just say rating equals followed by a value. 155 00:11:20,800 --> 00:11:27,250 Let's say if there is no rating property we will use the number five as a five star rating. 156 00:11:27,250 --> 00:11:30,490 Now if I run the program we're going to see five print. 157 00:11:30,490 --> 00:11:36,540 It's important to note that this default will only be used if there is no property matching on product. 158 00:11:36,550 --> 00:11:39,790 If there is the default won't be used. 159 00:11:39,790 --> 00:11:46,560 So for example if I set up a rating let's set it equal to four point two stars up above. 160 00:11:46,630 --> 00:11:52,010 Now that value is going to be used instead of the default we can save the program. 161 00:11:52,240 --> 00:11:56,410 We can rerun things and that is exactly what we end up seeing below. 162 00:11:56,410 --> 00:12:00,890 Now we can also use these structuring when we're working with function arguments. 163 00:12:00,940 --> 00:12:05,500 That's the last thing we're going to cover before we move on to the challenge where you're going to 164 00:12:05,500 --> 00:12:09,140 use these two tools in the weather application. 165 00:12:09,370 --> 00:12:15,250 Right here I'm going to comment out all of the code we have for D structuring and we're going to create 166 00:12:15,280 --> 00:12:19,570 a function that takes in that product object. 167 00:12:19,570 --> 00:12:20,230 So right here. 168 00:12:20,260 --> 00:12:22,520 Let's go ahead and create a function. 169 00:12:22,630 --> 00:12:29,280 I'm going to create something like const I'll call this transaction and we're gonna set it equal to 170 00:12:29,280 --> 00:12:33,420 a function and this function is going to expect two arguments. 171 00:12:33,420 --> 00:12:38,280 Let's say there's a transaction type am I selling a product or am I placing an order. 172 00:12:38,410 --> 00:12:43,710 Let's say we also need to know the information about the product that we are making this transaction 173 00:12:43,710 --> 00:12:44,410 with. 174 00:12:44,430 --> 00:12:48,450 So I'll call this something like my product. 175 00:12:48,450 --> 00:12:55,590 Now we can pass that value in to transaction using a very basic syntax transaction calling it with those 176 00:12:55,590 --> 00:12:56,510 two arguments. 177 00:12:56,520 --> 00:13:03,120 Let's just use these string order as the first argument and then we'll pass in our object as the second 178 00:13:04,120 --> 00:13:09,370 so right here we have an object as the value for my product. 179 00:13:09,370 --> 00:13:15,730 Now if we wanted to distract your values off of that we could just add a line down below cost inside 180 00:13:15,730 --> 00:13:22,420 of curly braces equals my product and I could d structure something like the label that would indeed 181 00:13:22,420 --> 00:13:23,710 work as expected. 182 00:13:23,710 --> 00:13:30,310 Now we have a local label variable we can use but we can actually take things one step further and d 183 00:13:30,310 --> 00:13:33,820 structure the argument right here in the arguments list. 184 00:13:34,210 --> 00:13:41,020 So instead of giving a name for that argument we simply set up the curly braces and now we can d structure 185 00:13:41,020 --> 00:13:46,630 whatever we want off of that variable without ever having access to the whole thing. 186 00:13:46,630 --> 00:13:51,630 So right here we're gonna have access to just the values we choose to D structure. 187 00:13:51,790 --> 00:13:59,230 I could for example D structure label and our destruction or something else like these stock to values 188 00:13:59,230 --> 00:14:01,740 that might be important when making an order. 189 00:14:01,810 --> 00:14:03,340 And down below we can use them. 190 00:14:03,730 --> 00:14:12,110 So console dialogue I'll just print out the type followed by the label followed by the stock just to 191 00:14:12,110 --> 00:14:15,980 make sure all of those variables actually exist. 192 00:14:15,980 --> 00:14:18,340 If I run the program down below. 193 00:14:18,560 --> 00:14:19,280 What do I see. 194 00:14:19,280 --> 00:14:20,800 I see the order type. 195 00:14:20,990 --> 00:14:27,060 I see my label and I see these stock printing all getting their values correctly assigned. 196 00:14:27,110 --> 00:14:33,140 So when we're using D structuring we can d structure a standard object outside of the arguments for 197 00:14:33,140 --> 00:14:35,990 a function using the syntax up above. 198 00:14:36,050 --> 00:14:41,480 If we know that an argument is an object though we can always d structure it right in line. 199 00:14:41,480 --> 00:14:46,050 Both are perfectly valid and we'll end up using both throughout the course. 200 00:14:46,040 --> 00:14:51,530 That's where we're gonna stop for this one now that we know how to use the property shorthand syntax 201 00:14:51,560 --> 00:14:58,730 and object D structuring in the next video it's going to be up to you to use both in the weather application. 202 00:14:58,730 --> 00:15:04,220 I'm excited to get to that challenge video so let's go ahead and jump right in to the next one.