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.