1 00:00:01,275 --> 00:00:03,150 In this video, you're gonna learn 2 00:00:03,150 --> 00:00:05,790 how to retrieve data from objects 3 00:00:05,790 --> 00:00:08,350 and also how to change data in objects, 4 00:00:08,350 --> 00:00:11,513 using both the dot and the bracket notation. 5 00:00:13,400 --> 00:00:16,360 So let's actually get the object here 6 00:00:16,360 --> 00:00:18,510 from the previous lecture, 7 00:00:18,510 --> 00:00:20,750 so that Jonas object. 8 00:00:20,750 --> 00:00:22,380 And I noticed that we actually 9 00:00:22,380 --> 00:00:25,853 didn't even take a look at it and a console, 10 00:00:27,060 --> 00:00:28,533 so let's quickly log it, 11 00:00:29,390 --> 00:00:33,390 but we're actually not gonna see a big surprise. 12 00:00:33,390 --> 00:00:37,080 So all it shows us it's really the same object 13 00:00:37,080 --> 00:00:38,823 that we just wrote in code. 14 00:00:39,940 --> 00:00:41,420 So it looks like this. 15 00:00:41,420 --> 00:00:45,210 So essentially just as it is here in the code, 16 00:00:45,210 --> 00:00:48,760 the only thing that's different is that the properties here 17 00:00:48,760 --> 00:00:50,900 are ordered alphabetically. 18 00:00:50,900 --> 00:00:53,750 And so that's what I mean when I said in the last lecture 19 00:00:53,750 --> 00:00:57,120 that the order of properties does not matter. 20 00:00:57,120 --> 00:00:59,600 And that's because we simply get the properties 21 00:00:59,600 --> 00:01:03,510 from the object using the property name itself. 22 00:01:03,510 --> 00:01:06,180 So that's actually the topic of this video. 23 00:01:06,180 --> 00:01:09,660 And so let me show you the two ways in which we do that. 24 00:01:09,660 --> 00:01:13,440 So the first way of getting a property from an object 25 00:01:13,440 --> 00:01:15,690 is by using the dot notation 26 00:01:15,690 --> 00:01:18,073 and that is very straight forward. 27 00:01:19,310 --> 00:01:21,203 So let's log that to console. 28 00:01:22,110 --> 00:01:25,110 And so let's say that we want to get the last name. 29 00:01:25,110 --> 00:01:27,180 So all we have to do is to write 30 00:01:27,180 --> 00:01:32,180 Jonas dot last name and that's it 31 00:01:35,320 --> 00:01:38,440 you see here is my last name 32 00:01:38,440 --> 00:01:41,730 coming straight from the Jonas object 33 00:01:41,730 --> 00:01:45,030 so Jonas dot last name. 34 00:01:45,030 --> 00:01:48,000 And this dot here is actually an operator 35 00:01:48,000 --> 00:01:50,360 which will go to this object 36 00:01:50,360 --> 00:01:52,190 and then retrieve to property 37 00:01:52,190 --> 00:01:55,060 with the name that we specified here. 38 00:01:55,060 --> 00:01:57,380 Now we can do the exact same thing 39 00:01:57,380 --> 00:02:00,260 using the brackets notation. 40 00:02:00,260 --> 00:02:03,720 So let me show that as well. 41 00:02:03,720 --> 00:02:07,450 So Jonas, and then we use brackets in a similar way 42 00:02:07,450 --> 00:02:10,240 in which we retrieve data from an array, 43 00:02:10,240 --> 00:02:14,270 but here we need to specify a string with the property name. 44 00:02:14,270 --> 00:02:19,270 So with the key, so let's do my name again, 45 00:02:20,270 --> 00:02:21,820 or actually a last name. 46 00:02:21,820 --> 00:02:25,490 And so these results should be exactly the same here. 47 00:02:25,490 --> 00:02:28,240 Now, the big difference between these two here 48 00:02:28,240 --> 00:02:31,330 is that in the bracket notation here, 49 00:02:31,330 --> 00:02:35,980 we can actually put any expression that we'd like, 50 00:02:35,980 --> 00:02:39,340 so we don't have to explicitly write the string here, 51 00:02:39,340 --> 00:02:42,650 but instead we can compute it from some operation 52 00:02:42,650 --> 00:02:44,590 because remember that an operation 53 00:02:44,590 --> 00:02:46,540 is basically an expression. 54 00:02:46,540 --> 00:02:48,890 So something that produces a value 55 00:02:48,890 --> 00:02:52,800 and so we can put that here, inside the brackets. 56 00:02:52,800 --> 00:02:55,340 So let's actually try that and imagine 57 00:02:55,340 --> 00:02:59,490 that we had a variable in which we store the repeating part 58 00:02:59,490 --> 00:03:02,330 in first name and last name. 59 00:03:02,330 --> 00:03:05,210 So we have name here in both 60 00:03:05,210 --> 00:03:09,800 and so let's store just that inside of a variable. 61 00:03:09,800 --> 00:03:12,150 And you will see my point here in a second 62 00:03:12,150 --> 00:03:13,913 this will all make sense, trust me. 63 00:03:15,310 --> 00:03:19,230 So name key, and then just name. 64 00:03:19,230 --> 00:03:21,300 So again, that's the repeating part 65 00:03:21,300 --> 00:03:25,320 in these two property names. 66 00:03:25,320 --> 00:03:27,240 And now we can use that variable 67 00:03:27,240 --> 00:03:29,943 to get both the first and the last name. 68 00:03:31,140 --> 00:03:36,140 So console dot log and then Jonas records. 69 00:03:37,220 --> 00:03:40,400 And so now here we can insert the expression. 70 00:03:40,400 --> 00:03:43,670 So let's create a string first 71 00:03:43,670 --> 00:03:47,513 and concatenate it with name key. 72 00:03:48,400 --> 00:03:50,940 And here we could have built this string 73 00:03:50,940 --> 00:03:52,720 using a template literal, 74 00:03:52,720 --> 00:03:55,163 but in this case it's not really necessary. 75 00:03:56,190 --> 00:04:01,140 So let's just copy this and then also last. 76 00:04:01,140 --> 00:04:02,690 So what will happen here 77 00:04:02,690 --> 00:04:05,900 is that as JavaScript sees this line of code, 78 00:04:05,900 --> 00:04:09,490 it will start by executing this plus operation 79 00:04:09,490 --> 00:04:12,270 and so it will create a string first name. 80 00:04:12,270 --> 00:04:15,080 And then it will go to the Jonas object 81 00:04:15,080 --> 00:04:17,060 and retrieve that property 82 00:04:17,060 --> 00:04:19,080 at the same for the last name 83 00:04:19,080 --> 00:04:22,290 here and the second line of code. 84 00:04:22,290 --> 00:04:26,190 And so that's how we get Jonas and Schmedtman. 85 00:04:26,190 --> 00:04:28,940 And doing something like this is more common 86 00:04:28,940 --> 00:04:30,480 than you might think 87 00:04:30,480 --> 00:04:34,010 and so that's why it's important that we understand 88 00:04:34,010 --> 00:04:35,580 that in the square brackets, 89 00:04:35,580 --> 00:04:38,950 we could put any expression here, okay. 90 00:04:38,950 --> 00:04:41,090 Now the same thing would not work 91 00:04:41,090 --> 00:04:46,090 with the dot operator or the dot notation. 92 00:04:46,620 --> 00:04:51,340 So we cannot write Jonas dot and then this here, 93 00:04:51,340 --> 00:04:54,383 for example, this would not work at all, 94 00:04:58,270 --> 00:05:00,683 so and unexpected string. 95 00:05:01,670 --> 00:05:03,570 And so that's the reason why we need 96 00:05:03,570 --> 00:05:06,330 the brackets notation and dot notation. 97 00:05:06,330 --> 00:05:09,440 We have to use the real final property name 98 00:05:09,440 --> 00:05:12,160 and not a computed property name. 99 00:05:12,160 --> 00:05:14,060 So for example this one, 100 00:05:14,060 --> 00:05:15,630 this one is a real property name 101 00:05:15,630 --> 00:05:18,410 as it appears in the object 102 00:05:18,410 --> 00:05:21,503 and so that's why it works here in this case. 103 00:05:22,610 --> 00:05:26,260 So in what situations should we use the dot notation 104 00:05:26,260 --> 00:05:29,660 and when do we have to use deep brackets notation? 105 00:05:29,660 --> 00:05:32,250 And I kind of already replied to that, 106 00:05:32,250 --> 00:05:34,340 but this is just to recap. 107 00:05:34,340 --> 00:05:37,900 So when we need to first compute the property name, 108 00:05:37,900 --> 00:05:41,710 like we did here with the first and last name, 109 00:05:41,710 --> 00:05:45,020 then of course we have to use the bracket notation 110 00:05:45,020 --> 00:05:47,960 in any other case, just use the dot notation, 111 00:05:47,960 --> 00:05:52,960 which looks a lot cleaner and it's also easier to use, okay. 112 00:05:53,720 --> 00:05:56,470 And now to make the need for the bracket notation 113 00:05:56,470 --> 00:06:00,080 even more clear, let me show you another example, 114 00:06:00,080 --> 00:06:02,700 which I think is gonna be really fun. 115 00:06:02,700 --> 00:06:05,410 So let's say that we don't know yet 116 00:06:05,410 --> 00:06:07,850 which property we want to show, 117 00:06:07,850 --> 00:06:10,510 and instead we get this information 118 00:06:10,510 --> 00:06:12,140 from some user interface 119 00:06:13,300 --> 00:06:17,040 so, for that we can use the prompt function. 120 00:06:17,040 --> 00:06:20,590 Remember, so we can use prompt 121 00:06:20,590 --> 00:06:23,460 and prompt is yet another built in function 122 00:06:23,460 --> 00:06:25,350 that is built into JavaScript 123 00:06:25,350 --> 00:06:28,520 and that we can use in any script. 124 00:06:28,520 --> 00:06:30,260 So here we can write a string 125 00:06:30,260 --> 00:06:32,780 and then this will create a popup window 126 00:06:32,780 --> 00:06:33,970 with an input field. 127 00:06:33,970 --> 00:06:37,950 Remember, so here we can write, 128 00:06:37,950 --> 00:06:42,863 what do you want to know about Jonas? 129 00:06:45,080 --> 00:06:50,080 choose between first name, last name, age, job and friends. 130 00:06:57,730 --> 00:07:00,830 And remember that this function will then return a string 131 00:07:00,830 --> 00:07:05,310 and this string, we just need to store into some variable. 132 00:07:05,310 --> 00:07:10,310 So let's call this one 'interested in', alright. 133 00:07:12,810 --> 00:07:17,530 And to start, let's just log this 'interested in' value 134 00:07:17,530 --> 00:07:19,040 to the console here, 135 00:07:19,040 --> 00:07:21,123 just till we see that it actually works. 136 00:07:22,490 --> 00:07:23,960 And so here is the popup 137 00:07:24,820 --> 00:07:29,070 and so now we just write one of these options here. 138 00:07:29,070 --> 00:07:30,363 So let's say job, 139 00:07:32,290 --> 00:07:34,900 and indeed now here we get job. 140 00:07:34,900 --> 00:07:36,150 And so what we want to do now 141 00:07:36,150 --> 00:07:39,330 is to basically display the job here in the console, 142 00:07:39,330 --> 00:07:41,373 because that's what the user chose. 143 00:07:42,290 --> 00:07:44,980 So how will we do that? 144 00:07:44,980 --> 00:07:46,943 Can we use the dot notation? 145 00:07:47,900 --> 00:07:51,610 So basically, can we do this? 146 00:07:51,610 --> 00:07:54,230 Jonas dot interested in, 147 00:07:54,230 --> 00:07:56,150 well, let's find out, 148 00:07:56,150 --> 00:07:58,593 but I hope that you can guess. 149 00:08:00,080 --> 00:08:02,420 And so we get undefined 150 00:08:02,420 --> 00:08:03,830 and this is something new 151 00:08:03,830 --> 00:08:05,650 that I didn't explain yet. 152 00:08:05,650 --> 00:08:09,240 And so let me tell you now that undefined is what we get 153 00:08:09,240 --> 00:08:11,220 when we try to access a property 154 00:08:11,220 --> 00:08:14,090 on an object that does not exist. 155 00:08:14,090 --> 00:08:16,920 So Jonas does not have a property 156 00:08:16,920 --> 00:08:20,160 called 'interested in', right? 157 00:08:20,160 --> 00:08:22,250 And so therefore the result 158 00:08:22,250 --> 00:08:26,663 of trying to access 'interested in' on Jonas is undefined. 159 00:08:27,510 --> 00:08:29,090 Now, what we need to do here 160 00:08:29,090 --> 00:08:33,520 is instead of the dot notation, use the brackets notation, 161 00:08:33,520 --> 00:08:36,520 because then we can put any expression here, 162 00:08:36,520 --> 00:08:39,380 which in this case will be interested in. 163 00:08:39,380 --> 00:08:41,810 And so JavaScript will now come here 164 00:08:41,810 --> 00:08:43,600 and replace 'interested in' 165 00:08:43,600 --> 00:08:45,940 with the actual value of the variable 166 00:08:45,940 --> 00:08:47,393 and then that's the one 167 00:08:47,393 --> 00:08:50,343 that will be looked up on the Jonas object. 168 00:08:51,240 --> 00:08:52,510 So let's try that again 169 00:08:53,690 --> 00:08:58,637 and now when I say job, we get a correct result, great. 170 00:08:59,830 --> 00:09:02,090 And I hope that you did understand 171 00:09:02,090 --> 00:09:05,160 the big difference between using the dot notation 172 00:09:05,160 --> 00:09:06,980 and the bracket notation 173 00:09:06,980 --> 00:09:11,140 and why the bracket notation gave us the correct result. 174 00:09:11,140 --> 00:09:14,130 So again, it's because basically this expression 175 00:09:14,130 --> 00:09:18,220 that we put here between these brackets will get evaluated 176 00:09:18,220 --> 00:09:20,623 then this one here is job. 177 00:09:21,780 --> 00:09:24,630 Now, of course, we can also pass in something else. 178 00:09:24,630 --> 00:09:27,190 So something that is not here, for example, 179 00:09:27,190 --> 00:09:30,410 let's try to access the location 180 00:09:30,410 --> 00:09:32,550 and then again, we get undefined. 181 00:09:32,550 --> 00:09:34,980 And once more, that is because 182 00:09:34,980 --> 00:09:39,490 there is not a property called location on the object. 183 00:09:39,490 --> 00:09:41,060 So let's actually handle that 184 00:09:41,060 --> 00:09:43,560 using some knowledge that we already have. 185 00:09:43,560 --> 00:09:48,310 So we know that undefined is a false value, right? 186 00:09:48,310 --> 00:09:50,499 And so we can use that to our advantage now 187 00:09:50,499 --> 00:09:54,610 and create some logic that we'll print a custom string 188 00:09:54,610 --> 00:09:56,290 whenever the user tries to access 189 00:09:56,290 --> 00:09:58,283 a property that doesn't exist. 190 00:09:59,210 --> 00:10:02,473 So let's do that. 191 00:10:03,490 --> 00:10:08,490 And we can say, if Jonas, brackets, 'interested in', 192 00:10:10,350 --> 00:10:13,500 then log that to the console. 193 00:10:13,500 --> 00:10:14,920 So basically this, 194 00:10:14,920 --> 00:10:17,020 and again, I'm using now the option 195 00:10:17,020 --> 00:10:20,053 and arrow down to move this line. 196 00:10:21,070 --> 00:10:23,400 And so if this value exists, 197 00:10:23,400 --> 00:10:27,080 then it is a truth value because it is not undefined 198 00:10:27,080 --> 00:10:29,420 and so any string that is not empty 199 00:10:29,420 --> 00:10:31,500 or any number that is not zero 200 00:10:31,500 --> 00:10:35,530 will then trigger this code block here to be executed. 201 00:10:35,530 --> 00:10:38,920 Now, if one of these properties was actually empty or zero, 202 00:10:38,920 --> 00:10:41,030 we would then go to the else block, 203 00:10:41,030 --> 00:10:44,510 but let's not account for that here in this case, 204 00:10:44,510 --> 00:10:47,203 let's say that doesn't happen, all right. 205 00:10:50,750 --> 00:10:53,230 So in case that the value does not exist 206 00:10:53,230 --> 00:10:55,550 So for example, with location, 207 00:10:55,550 --> 00:10:57,290 we then get undefined 208 00:10:57,290 --> 00:10:58,583 and so in this case, 209 00:11:00,300 --> 00:11:04,000 Jonas 'interested in' is undefined, which is false 210 00:11:04,000 --> 00:11:07,990 and therefore we would go to the else block. 211 00:11:07,990 --> 00:11:12,990 And so let's say something like wrong request, 212 00:11:14,120 --> 00:11:17,820 and then we can repeat this sentence here. 213 00:11:21,320 --> 00:11:22,943 So let's try that again here. 214 00:11:24,820 --> 00:11:29,000 So location, and now we get wrong request, 215 00:11:29,000 --> 00:11:31,053 but if we try something that exists, 216 00:11:32,460 --> 00:11:35,720 then we get that result, great. 217 00:11:35,720 --> 00:11:40,310 So I think this was a fun little experiment here 218 00:11:40,310 --> 00:11:43,113 and now I hope you like that. 219 00:11:44,040 --> 00:11:45,310 And now that you know 220 00:11:45,310 --> 00:11:48,300 how to retrieve elements from an object, 221 00:11:48,300 --> 00:11:51,260 let's also learn how to use both the dots 222 00:11:51,260 --> 00:11:52,960 and the brackets notation 223 00:11:52,960 --> 00:11:55,563 to add new properties to the object. 224 00:11:56,410 --> 00:11:59,073 And so that's pretty straight forward. 225 00:12:00,180 --> 00:12:02,410 So all we have to do is Jonas dot 226 00:12:03,350 --> 00:12:05,310 and now let's actually use location 227 00:12:06,550 --> 00:12:08,630 and set it equal to something. 228 00:12:08,630 --> 00:12:10,003 So to some value. 229 00:12:11,010 --> 00:12:13,600 So I'm located in Portugal 230 00:12:13,600 --> 00:12:16,140 and so that's how we use the dot notation. 231 00:12:16,140 --> 00:12:18,620 And then we can also of course use 232 00:12:18,620 --> 00:12:20,663 the brackets notation just the same. 233 00:12:21,540 --> 00:12:24,563 So let's say my Twitter handle here, 234 00:12:26,110 --> 00:12:29,500 which is @Jonasschmedtman with just one N 235 00:12:32,610 --> 00:12:34,863 and you should definitely check that out. 236 00:12:36,280 --> 00:12:38,950 And now just to see that it worked, 237 00:12:38,950 --> 00:12:42,330 let's log it to the console one final time 238 00:12:44,770 --> 00:12:49,770 and okay, it's asking us for the field name again, 239 00:12:53,480 --> 00:12:56,020 but anyway, now we have the location 240 00:12:56,020 --> 00:12:58,673 and the Twitter here as well in the object. 241 00:12:59,570 --> 00:13:00,900 And of course here 242 00:13:00,900 --> 00:13:04,320 we could put any expression just like before. 243 00:13:04,320 --> 00:13:09,160 So it works in the exact same way, alright. 244 00:13:09,160 --> 00:13:13,000 And that's how we use the brackets and the dot notation. 245 00:13:13,000 --> 00:13:16,230 Now, finally, I have one small challenge for you 246 00:13:16,230 --> 00:13:18,040 that you can just do right now 247 00:13:18,040 --> 00:13:20,320 here at the end of this video. 248 00:13:20,320 --> 00:13:23,450 And so what I want you to do is to write a sentence 249 00:13:23,450 --> 00:13:25,910 like this one, that I'm going to show you now, 250 00:13:25,910 --> 00:13:28,190 but in a dynamic way. 251 00:13:28,190 --> 00:13:31,223 So let's just write challenge here. 252 00:13:33,390 --> 00:13:38,387 And so I want you to write 'Jonas has three friends 253 00:13:40,440 --> 00:13:45,123 and his best friend is called Michael'. 254 00:13:47,340 --> 00:13:52,090 So here, we suppose that the first friend in the array, 255 00:13:52,090 --> 00:13:56,640 so in the friends array is the best friend, okay. 256 00:13:56,640 --> 00:14:00,070 And for the record, I do have more than three friends, 257 00:14:00,070 --> 00:14:02,963 but of course, here, we need to keep it all very simple. 258 00:14:03,800 --> 00:14:06,720 So again, I want you to write this sentence, 259 00:14:06,720 --> 00:14:10,550 but without hard coding, any of these values. 260 00:14:10,550 --> 00:14:12,810 So what you need to get from the object 261 00:14:12,810 --> 00:14:17,810 is this value, this value and this value. 262 00:14:18,020 --> 00:14:21,400 And this is actually a bit hard, I would say. 263 00:14:21,400 --> 00:14:24,950 And so there's absolutely no need for you to nail this, 264 00:14:24,950 --> 00:14:26,700 but you can still try it 265 00:14:26,700 --> 00:14:29,250 and maybe you can do some of the parts. 266 00:14:29,250 --> 00:14:32,170 One hint that I can give you is that you will need to use 267 00:14:32,170 --> 00:14:36,100 multiple dots to get the number of friends, okay. 268 00:14:36,100 --> 00:14:38,450 So that's totally possible. 269 00:14:38,450 --> 00:14:41,970 And so take like five minutes to try this out now. 270 00:14:41,970 --> 00:14:44,973 So pause the video and I'll see you in a second. 271 00:14:46,900 --> 00:14:48,060 All right. 272 00:14:48,060 --> 00:14:50,903 And so this is how we would do this. 273 00:14:52,090 --> 00:14:55,120 So we want to lock this to the console, of course. 274 00:14:55,120 --> 00:14:58,230 And so we're starting with the name 275 00:14:58,230 --> 00:15:02,390 and this one is probably the most straightforward one. 276 00:15:02,390 --> 00:15:07,390 So that's just, Jonas dot first name. 277 00:15:08,000 --> 00:15:10,360 So that is where the name is stored 278 00:15:10,360 --> 00:15:14,300 then has, and then the number of friends. 279 00:15:14,300 --> 00:15:18,800 So the friends are stored in Jonas dot friends. 280 00:15:18,800 --> 00:15:20,920 Now, do you remember how to get 281 00:15:20,920 --> 00:15:23,660 the number of elements in an array? 282 00:15:23,660 --> 00:15:27,530 It is by writing the array dot length, right? 283 00:15:27,530 --> 00:15:28,743 And so let's do that. 284 00:15:30,650 --> 00:15:35,110 So Jonas dot friends. 285 00:15:35,110 --> 00:15:38,500 And so this is our array, right? 286 00:15:38,500 --> 00:15:42,263 And so on this array, we can now ask for the length. 287 00:15:43,420 --> 00:15:46,700 And so basically you can see here that length 288 00:15:46,700 --> 00:15:50,960 is also a property that is available on all race. 289 00:15:50,960 --> 00:15:53,610 So it's a property that we don't define ourselves, 290 00:15:53,610 --> 00:15:55,610 but it's automatically available. 291 00:15:55,610 --> 00:15:58,160 But now that you know about the dot notation, 292 00:15:58,160 --> 00:16:01,850 you can also start to understand that the dot length 293 00:16:01,850 --> 00:16:06,100 is just a property that is available on all a race. 294 00:16:06,100 --> 00:16:08,070 And so that's what we're doing here. 295 00:16:08,070 --> 00:16:11,870 So again, we have an array which is this one, 296 00:16:11,870 --> 00:16:15,403 and on there, we can simply then request dot length. 297 00:16:17,530 --> 00:16:20,170 Okay, let's continue the sentence now. 298 00:16:20,170 --> 00:16:25,170 And his best friend is called 299 00:16:27,390 --> 00:16:29,570 and now we need to simply get 300 00:16:29,570 --> 00:16:31,363 the first element from the array. 301 00:16:32,362 --> 00:16:36,130 And so that's again, Jonas dot friends 302 00:16:36,130 --> 00:16:38,800 and now remember, we get the first element 303 00:16:38,800 --> 00:16:43,800 of an array using square brackets zero, and that's it. 304 00:16:44,580 --> 00:16:47,700 So once more, this here is simply an array 305 00:16:47,700 --> 00:16:50,960 and so we learned that to take the first element 306 00:16:50,960 --> 00:16:54,230 we just use square brackets with zero. 307 00:16:54,230 --> 00:16:55,950 So in a sense on the race, 308 00:16:55,950 --> 00:16:57,883 we also have the brackets notation. 309 00:17:00,100 --> 00:17:02,743 Okay, so that's just test this, 310 00:17:03,870 --> 00:17:06,560 and again, this annoying popup, 311 00:17:06,560 --> 00:17:09,160 but indeed Jonas has three 312 00:17:09,160 --> 00:17:11,410 and we're just missing the friends here. 313 00:17:11,410 --> 00:17:16,410 So friends and his best friend is called Michael. 314 00:17:17,610 --> 00:17:21,670 So just what I had written here as a template. 315 00:17:21,670 --> 00:17:24,360 Now, in terms of operator proceedings, 316 00:17:24,360 --> 00:17:27,653 let's quickly check out why it actually works this way. 317 00:17:28,550 --> 00:17:29,943 So with the dots here. 318 00:17:31,080 --> 00:17:32,770 Because remember, as I said, 319 00:17:32,770 --> 00:17:36,510 the dot operator here is really just that 320 00:17:36,510 --> 00:17:39,513 it's just an operator and the same goes for the brackets. 321 00:17:40,440 --> 00:17:45,260 So I will, again, Google MDN operator proceedings, 322 00:17:45,260 --> 00:17:46,370 but the link to this table 323 00:17:46,370 --> 00:17:50,760 is also on the resources pages on my website. 324 00:17:50,760 --> 00:17:51,970 And the link to that one 325 00:17:51,970 --> 00:17:56,950 is right in the first text lecture of the course. 326 00:17:56,950 --> 00:18:01,420 But anyway, here we have date dot notation, 327 00:18:01,420 --> 00:18:03,790 which here is called member access 328 00:18:03,790 --> 00:18:06,300 and then we have the brackets notation, 329 00:18:06,300 --> 00:18:09,600 which is here called computed member access. 330 00:18:09,600 --> 00:18:10,520 And so the computed, 331 00:18:10,520 --> 00:18:13,800 is because as I mentioned multiple times now, 332 00:18:13,800 --> 00:18:16,073 because we can compute the property names 333 00:18:16,073 --> 00:18:18,090 that we want to access. 334 00:18:18,090 --> 00:18:21,280 Now, what matters here is that they both have a really high 335 00:18:21,280 --> 00:18:25,140 priority and both are left to right. 336 00:18:25,140 --> 00:18:26,940 And so that's why all of this works. 337 00:18:27,830 --> 00:18:30,720 So we have two dots here 338 00:18:30,720 --> 00:18:33,310 so Jonas dot friends dot length 339 00:18:33,310 --> 00:18:35,570 and they are executed left to right. 340 00:18:35,570 --> 00:18:37,030 And therefore the first thing 341 00:18:37,030 --> 00:18:40,710 that JavaScript does is Jonas dot friends. 342 00:18:40,710 --> 00:18:41,920 And so essentially, 343 00:18:41,920 --> 00:18:45,780 this will then be replaced with the array 344 00:18:45,780 --> 00:18:47,380 and then on that array 345 00:18:47,380 --> 00:18:52,260 is where the dot length is then applied 346 00:18:52,260 --> 00:18:53,170 and the same thing here. 347 00:18:53,170 --> 00:18:55,670 So first Jonas dot friends is done. 348 00:18:55,670 --> 00:18:58,990 And then this one is also left to right 349 00:18:58,990 --> 00:19:02,523 and so from there we take element number zero, okay. 350 00:19:04,440 --> 00:19:07,060 So there's no magic involved here 351 00:19:07,060 --> 00:19:11,630 there is rules for everything and everything makes sense. 352 00:19:11,630 --> 00:19:13,960 And again, you don't need to memorize this here, 353 00:19:13,960 --> 00:19:18,763 with time all of this will become second nature to you.