WEBVTT 1 00:00:00.759 --> 00:00:03.240 So maybe you've been noticing 2 00:00:03.240 --> 00:00:07.340 that we have been talking a lot about ES6 features 3 00:00:07.340 --> 00:00:10.330 and even newer additions to the language. 4 00:00:10.330 --> 00:00:12.310 And so let's continue with that now 5 00:00:12.310 --> 00:00:14.440 with yet another enhancement, 6 00:00:14.440 --> 00:00:17.523 which is enhanced object literals. 7 00:00:19.030 --> 00:00:21.350 And so let's take a closer look at 8 00:00:21.350 --> 00:00:23.860 or restaurant object here. 9 00:00:23.860 --> 00:00:27.830 So this restaurant object is an object literal, 10 00:00:27.830 --> 00:00:31.080 so you can see that because we basically wrote 11 00:00:31.080 --> 00:00:34.280 this object literally in our code using 12 00:00:34.280 --> 00:00:35.923 this curly braces syntax. 13 00:00:36.910 --> 00:00:41.560 So well you get the point, so all of this object here has 14 00:00:41.560 --> 00:00:44.990 been written using the object literal syntax. 15 00:00:44.990 --> 00:00:49.140 Now ES6 introduced three ways, which make it easier 16 00:00:49.140 --> 00:00:52.240 to write object literals like this. 17 00:00:52.240 --> 00:00:56.500 And so let's go through them one by one now, first off let's 18 00:00:56.500 --> 00:01:01.300 say that we have an object that is outside of this object. 19 00:01:01.300 --> 00:01:05.853 So let's take this one and create a separate object with it. 20 00:01:09.530 --> 00:01:14.420 So, const opening hours equal and so now 21 00:01:14.420 --> 00:01:16.563 this is its separate variable. 22 00:01:17.420 --> 00:01:22.060 Now here, we need a semicolon to fix this error there 23 00:01:22.060 --> 00:01:25.590 but now, we still want to have the opening hours object 24 00:01:25.590 --> 00:01:27.133 inside of the restaurant. 25 00:01:28.370 --> 00:01:33.370 So before ES6, we would have to write opening hours 26 00:01:35.090 --> 00:01:37.660 so that's the property name that we want 27 00:01:37.660 --> 00:01:40.603 and then set it equal to opening hours. 28 00:01:41.880 --> 00:01:44.210 And so then, basically the restaurant object 29 00:01:44.210 --> 00:01:48.833 is restored let's see that here quickly. 30 00:01:50.740 --> 00:01:53.477 So you see that, here we still have 31 00:01:53.477 --> 00:01:56.720 the opening hours just like before. 32 00:01:56.720 --> 00:02:00.440 Now the problem here is and it's not really a problem 33 00:02:00.440 --> 00:02:04.370 but it can become annoying is that this property name 34 00:02:04.370 --> 00:02:07.210 is exactly the same as the variable name 35 00:02:07.210 --> 00:02:10.340 from which we're getting this new object, right? 36 00:02:10.340 --> 00:02:13.830 And so with enhanced object literals you don't need to write 37 00:02:13.830 --> 00:02:18.830 this, so we can just do this, let me write this ES6 enhanced 38 00:02:21.780 --> 00:02:26.510 object literals and so what this will do now is to take 39 00:02:26.510 --> 00:02:29.750 this opening hours object and put it 40 00:02:29.750 --> 00:02:33.260 into the restaurant object and create a property name 41 00:02:33.260 --> 00:02:36.143 with exactly that variable name. 42 00:02:36.980 --> 00:02:41.090 So as we will reload now, then you will see 43 00:02:41.090 --> 00:02:44.810 that it's still here just like before. 44 00:02:44.810 --> 00:02:46.710 And of course we could change this now 45 00:02:47.830 --> 00:02:50.253 but then we would also have to change it here. 46 00:02:51.210 --> 00:02:54.543 Otherwise, JavaScript will not know what this variable is. 47 00:02:58.200 --> 00:03:02.593 And so now as you can guess we have a property called hours. 48 00:03:04.630 --> 00:03:08.370 All right, so that's a very handy enhancement 49 00:03:08.370 --> 00:03:12.090 and so let's not check out the second one. 50 00:03:12.090 --> 00:03:14.910 So the second enhancement to object literals 51 00:03:14.910 --> 00:03:17.180 is about writing methods. 52 00:03:17.180 --> 00:03:21.070 So in ES6 we no longer have to create a property, 53 00:03:21.070 --> 00:03:23.450 and then set it to a function expression, 54 00:03:23.450 --> 00:03:26.610 like we have always been doing, right? 55 00:03:26.610 --> 00:03:30.650 So essentially, we create a property just like we do all 56 00:03:30.650 --> 00:03:33.190 the other properties and then we set that 57 00:03:33.190 --> 00:03:35.600 to a function expression. 58 00:03:35.600 --> 00:03:38.430 But again, now we no longer need to do that 59 00:03:38.430 --> 00:03:41.890 we can write it in an easier way which is to get rid 60 00:03:41.890 --> 00:03:45.640 of this function, even of the semicolon 61 00:03:46.760 --> 00:03:48.600 and then just like this. 62 00:03:48.600 --> 00:03:51.800 And so this now works exactly the same as before 63 00:03:51.800 --> 00:03:54.263 but with a slightly easier syntax. 64 00:03:55.410 --> 00:03:59.810 And I actually personally really prefer this new syntax, 65 00:03:59.810 --> 00:04:03.500 so I'm gonna change this entire object to the new way 66 00:04:03.500 --> 00:04:08.500 of writing methods, but this actually comes down 67 00:04:08.670 --> 00:04:11.110 to personal preference once again. 68 00:04:11.110 --> 00:04:15.510 So if you prefer the old way you can just keep it like that. 69 00:04:15.510 --> 00:04:17.960 So maybe you think it's more explicit 70 00:04:17.960 --> 00:04:21.200 if you can actually read the function keyword there, 71 00:04:21.200 --> 00:04:25.260 but for me it's enough that we have the parenthesis here. 72 00:04:25.260 --> 00:04:28.670 So that alone already shows that it has to be a function 73 00:04:28.670 --> 00:04:33.180 and VS code itself is also helpful as it changes the color 74 00:04:33.180 --> 00:04:35.160 of the methods to green. 75 00:04:35.160 --> 00:04:39.060 So VS code is really smart in that regard. 76 00:04:39.060 --> 00:04:41.730 And finally, the third enhancement is 77 00:04:41.730 --> 00:04:45.610 that we can now actually compute property names instead 78 00:04:45.610 --> 00:04:49.760 of having to write them out manually and literally. 79 00:04:49.760 --> 00:04:53.450 And compute just means like calculate 80 00:04:53.450 --> 00:04:55.560 and so let's try that here. 81 00:04:55.560 --> 00:04:59.253 So let's say that we had an array with all the weekdays. 82 00:05:01.970 --> 00:05:06.970 Weekdays, so Monday, Tuesday, Wednesday, Thursday, Friday, 83 00:05:16.700 --> 00:05:20.610 Saturday and Sunday. 84 00:05:20.610 --> 00:05:24.800 And now we wanted to take these property names here out 85 00:05:24.800 --> 00:05:27.010 of that array, okay? 86 00:05:27.010 --> 00:05:30.090 So instead of having to write them here manually, 87 00:05:30.090 --> 00:05:35.090 so we can do that by using again the square bracket syntax. 88 00:05:35.230 --> 00:05:39.160 And then in here, we can put any expression basically, 89 00:05:39.160 --> 00:05:43.390 so this was Thursday, so let's say weekdays 90 00:05:44.720 --> 00:05:48.203 on position number zero, one, two, three. 91 00:05:49.970 --> 00:05:52.830 And of course we could use this structuring here, 92 00:05:52.830 --> 00:05:56.640 but this is just a demonstration. 93 00:05:56.640 --> 00:06:01.420 Anyways, so weekdays four and then here weekdays five. 94 00:06:02.300 --> 00:06:04.050 But let me just show you that we could really 95 00:06:04.050 --> 00:06:08.310 do anything here, so we could also compute the name 96 00:06:08.310 --> 00:06:10.280 in some other way. 97 00:06:10.280 --> 00:06:15.280 Let's just say, two plus two or two plus four, 98 00:06:16.740 --> 00:06:20.720 so this doesn't make sense but yeah, I just want to show you 99 00:06:20.720 --> 00:06:22.210 that we can do this. 100 00:06:22.210 --> 00:06:27.210 Let's take a look at the object now here, opening hours 101 00:06:27.820 --> 00:06:32.650 and so you see that we still get Thursday and Friday 102 00:06:32.650 --> 00:06:34.750 and then here we get day six. 103 00:06:34.750 --> 00:06:39.200 So we computed this property name using a template literal 104 00:06:39.200 --> 00:06:41.770 and then also this expression in here. 105 00:06:41.770 --> 00:06:44.550 And this is sometimes extremely helpful 106 00:06:44.550 --> 00:06:46.700 to be able to do this. 107 00:06:46.700 --> 00:06:50.690 So before we could only compute the values so here 108 00:06:50.690 --> 00:06:54.090 for example, this could be 12 plus 12, right? 109 00:06:54.090 --> 00:06:57.650 But we could not compute these property names 110 00:06:57.650 --> 00:06:59.563 but now we can do that as well.