Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:00,759 --> 00:00:03,240
So maybe you've been noticing
2
2
00:00:03,240 --> 00:00:07,340
that we have been talking a lot about ES6 features
3
3
00:00:07,340 --> 00:00:10,330
and even newer additions to the language.
4
4
00:00:10,330 --> 00:00:12,310
And so let's continue with that now
5
5
00:00:12,310 --> 00:00:14,440
with yet another enhancement,
6
6
00:00:14,440 --> 00:00:17,523
which is enhanced object literals.
7
7
00:00:19,030 --> 00:00:21,350
And so let's take a closer look at
8
8
00:00:21,350 --> 00:00:23,860
or restaurant object here.
9
9
00:00:23,860 --> 00:00:27,830
So this restaurant object is an object literal,
10
10
00:00:27,830 --> 00:00:31,080
so you can see that because we basically wrote
11
11
00:00:31,080 --> 00:00:34,280
this object literally in our code using
12
12
00:00:34,280 --> 00:00:35,923
this curly braces syntax.
13
13
00:00:36,910 --> 00:00:41,560
So well you get the point, so all of this object here has
14
14
00:00:41,560 --> 00:00:44,990
been written using the object literal syntax.
15
15
00:00:44,990 --> 00:00:49,140
Now ES6 introduced three ways, which make it easier
16
16
00:00:49,140 --> 00:00:52,240
to write object literals like this.
17
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
18
00:00:56,500 --> 00:01:01,300
say that we have an object that is outside of this object.
19
19
00:01:01,300 --> 00:01:05,853
So let's take this one and create a separate object with it.
20
20
00:01:09,530 --> 00:01:14,420
So, const opening hours equal and so now
21
21
00:01:14,420 --> 00:01:16,563
this is its separate variable.
22
22
00:01:17,420 --> 00:01:22,060
Now here, we need a semicolon to fix this error there
23
23
00:01:22,060 --> 00:01:25,590
but now, we still want to have the opening hours object
24
24
00:01:25,590 --> 00:01:27,133
inside of the restaurant.
25
25
00:01:28,370 --> 00:01:33,370
So before ES6, we would have to write opening hours
26
26
00:01:35,090 --> 00:01:37,660
so that's the property name that we want
27
27
00:01:37,660 --> 00:01:40,603
and then set it equal to opening hours.
28
28
00:01:41,880 --> 00:01:44,210
And so then, basically the restaurant object
29
29
00:01:44,210 --> 00:01:48,833
is restored let's see that here quickly.
30
30
00:01:50,740 --> 00:01:53,477
So you see that, here we still have
31
31
00:01:53,477 --> 00:01:56,720
the opening hours just like before.
32
32
00:01:56,720 --> 00:02:00,440
Now the problem here is and it's not really a problem
33
33
00:02:00,440 --> 00:02:04,370
but it can become annoying is that this property name
34
34
00:02:04,370 --> 00:02:07,210
is exactly the same as the variable name
35
35
00:02:07,210 --> 00:02:10,340
from which we're getting this new object, right?
36
36
00:02:10,340 --> 00:02:13,830
And so with enhanced object literals you don't need to write
37
37
00:02:13,830 --> 00:02:18,830
this, so we can just do this, let me write this ES6 enhanced
38
38
00:02:21,780 --> 00:02:26,510
object literals and so what this will do now is to take
39
39
00:02:26,510 --> 00:02:29,750
this opening hours object and put it
40
40
00:02:29,750 --> 00:02:33,260
into the restaurant object and create a property name
41
41
00:02:33,260 --> 00:02:36,143
with exactly that variable name.
42
42
00:02:36,980 --> 00:02:41,090
So as we will reload now, then you will see
43
43
00:02:41,090 --> 00:02:44,810
that it's still here just like before.
44
44
00:02:44,810 --> 00:02:46,710
And of course we could change this now
45
45
00:02:47,830 --> 00:02:50,253
but then we would also have to change it here.
46
46
00:02:51,210 --> 00:02:54,543
Otherwise, JavaScript will not know what this variable is.
47
47
00:02:58,200 --> 00:03:02,593
And so now as you can guess we have a property called hours.
48
48
00:03:04,630 --> 00:03:08,370
All right, so that's a very handy enhancement
49
49
00:03:08,370 --> 00:03:12,090
and so let's not check out the second one.
50
50
00:03:12,090 --> 00:03:14,910
So the second enhancement to object literals
51
51
00:03:14,910 --> 00:03:17,180
is about writing methods.
52
52
00:03:17,180 --> 00:03:21,070
So in ES6 we no longer have to create a property,
53
53
00:03:21,070 --> 00:03:23,450
and then set it to a function expression,
54
54
00:03:23,450 --> 00:03:26,610
like we have always been doing, right?
55
55
00:03:26,610 --> 00:03:30,650
So essentially, we create a property just like we do all
56
56
00:03:30,650 --> 00:03:33,190
the other properties and then we set that
57
57
00:03:33,190 --> 00:03:35,600
to a function expression.
58
58
00:03:35,600 --> 00:03:38,430
But again, now we no longer need to do that
59
59
00:03:38,430 --> 00:03:41,890
we can write it in an easier way which is to get rid
60
60
00:03:41,890 --> 00:03:45,640
of this function, even of the semicolon
61
61
00:03:46,760 --> 00:03:48,600
and then just like this.
62
62
00:03:48,600 --> 00:03:51,800
And so this now works exactly the same as before
63
63
00:03:51,800 --> 00:03:54,263
but with a slightly easier syntax.
64
64
00:03:55,410 --> 00:03:59,810
And I actually personally really prefer this new syntax,
65
65
00:03:59,810 --> 00:04:03,500
so I'm gonna change this entire object to the new way
66
66
00:04:03,500 --> 00:04:08,500
of writing methods, but this actually comes down
67
67
00:04:08,670 --> 00:04:11,110
to personal preference once again.
68
68
00:04:11,110 --> 00:04:15,510
So if you prefer the old way you can just keep it like that.
69
69
00:04:15,510 --> 00:04:17,960
So maybe you think it's more explicit
70
70
00:04:17,960 --> 00:04:21,200
if you can actually read the function keyword there,
71
71
00:04:21,200 --> 00:04:25,260
but for me it's enough that we have the parenthesis here.
72
72
00:04:25,260 --> 00:04:28,670
So that alone already shows that it has to be a function
73
73
00:04:28,670 --> 00:04:33,180
and VS code itself is also helpful as it changes the color
74
74
00:04:33,180 --> 00:04:35,160
of the methods to green.
75
75
00:04:35,160 --> 00:04:39,060
So VS code is really smart in that regard.
76
76
00:04:39,060 --> 00:04:41,730
And finally, the third enhancement is
77
77
00:04:41,730 --> 00:04:45,610
that we can now actually compute property names instead
78
78
00:04:45,610 --> 00:04:49,760
of having to write them out manually and literally.
79
79
00:04:49,760 --> 00:04:53,450
And compute just means like calculate
80
80
00:04:53,450 --> 00:04:55,560
and so let's try that here.
81
81
00:04:55,560 --> 00:04:59,253
So let's say that we had an array with all the weekdays.
82
82
00:05:01,970 --> 00:05:06,970
Weekdays, so Monday, Tuesday, Wednesday, Thursday, Friday,
83
83
00:05:16,700 --> 00:05:20,610
Saturday and Sunday.
84
84
00:05:20,610 --> 00:05:24,800
And now we wanted to take these property names here out
85
85
00:05:24,800 --> 00:05:27,010
of that array, okay?
86
86
00:05:27,010 --> 00:05:30,090
So instead of having to write them here manually,
87
87
00:05:30,090 --> 00:05:35,090
so we can do that by using again the square bracket syntax.
88
88
00:05:35,230 --> 00:05:39,160
And then in here, we can put any expression basically,
89
89
00:05:39,160 --> 00:05:43,390
so this was Thursday, so let's say weekdays
90
90
00:05:44,720 --> 00:05:48,203
on position number zero, one, two, three.
91
91
00:05:49,970 --> 00:05:52,830
And of course we could use this structuring here,
92
92
00:05:52,830 --> 00:05:56,640
but this is just a demonstration.
93
93
00:05:56,640 --> 00:06:01,420
Anyways, so weekdays four and then here weekdays five.
94
94
00:06:02,300 --> 00:06:04,050
But let me just show you that we could really
95
95
00:06:04,050 --> 00:06:08,310
do anything here, so we could also compute the name
96
96
00:06:08,310 --> 00:06:10,280
in some other way.
97
97
00:06:10,280 --> 00:06:15,280
Let's just say, two plus two or two plus four,
98
98
00:06:16,740 --> 00:06:20,720
so this doesn't make sense but yeah, I just want to show you
99
99
00:06:20,720 --> 00:06:22,210
that we can do this.
100
100
00:06:22,210 --> 00:06:27,210
Let's take a look at the object now here, opening hours
101
101
00:06:27,820 --> 00:06:32,650
and so you see that we still get Thursday and Friday
102
102
00:06:32,650 --> 00:06:34,750
and then here we get day six.
103
103
00:06:34,750 --> 00:06:39,200
So we computed this property name using a template literal
104
104
00:06:39,200 --> 00:06:41,770
and then also this expression in here.
105
105
00:06:41,770 --> 00:06:44,550
And this is sometimes extremely helpful
106
106
00:06:44,550 --> 00:06:46,700
to be able to do this.
107
107
00:06:46,700 --> 00:06:50,690
So before we could only compute the values so here
108
108
00:06:50,690 --> 00:06:54,090
for example, this could be 12 plus 12, right?
109
109
00:06:54,090 --> 00:06:57,650
But we could not compute these property names
110
110
00:06:57,650 --> 00:06:59,563
but now we can do that as well.
9971
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.