WEBVTT 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.