Original subtitles

So maybe you've been noticing

that we have been talking a lot about ES6 features

and even newer additions to the language.

And so let's continue with that now

with yet another enhancement,

which is enhanced object literals.

And so let's take a closer look at

or restaurant object here.

So this restaurant object is an object literal,

so you can see that because we basically wrote

this object literally in our code using

this curly braces syntax.

So well you get the point, so all of this object here has

been written using the object literal syntax.

Now ES6 introduced three ways, which make it easier

to write object literals like this.

And so let's go through them one by one now, first off let's

say that we have an object that is outside of this object.

So let's take this one and create a separate object with it.

So, const opening hours equal and so now

this is its separate variable.

Now here, we need a semicolon to fix this error there

but now, we still want to have the opening hours object

inside of the restaurant.

So before ES6, we would have to write opening hours

so that's the property name that we want

and then set it equal to opening hours.

And so then, basically the restaurant object

is restored let's see that here quickly.

So you see that, here we still have

the opening hours just like before.

Now the problem here is and it's not really a problem

but it can become annoying is that this property name

is exactly the same as the variable name

from which we're getting this new object, right?

And so with enhanced object literals you don't need to write

this, so we can just do this, let me write this ES6 enhanced

object literals and so what this will do now is to take

this opening hours object and put it

into the restaurant object and create a property name

with exactly that variable name.

So as we will reload now, then you will see

that it's still here just like before.

And of course we could change this now

but then we would also have to change it here.

Otherwise, JavaScript will not know what this variable is.

And so now as you can guess we have a property called hours.

All right, so that's a very handy enhancement

and so let's not check out the second one.

So the second enhancement to object literals

is about writing methods.

So in ES6 we no longer have to create a property,

and then set it to a function expression,

like we have always been doing, right?

So essentially, we create a property just like we do all

the other properties and then we set that

to a function expression.

But again, now we no longer need to do that

we can write it in an easier way which is to get rid

of this function, even of the semicolon

and then just like this.

And so this now works exactly the same as before

but with a slightly easier syntax.

And I actually personally really prefer this new syntax,

so I'm gonna change this entire object to the new way

of writing methods, but this actually comes down

to personal preference once again.

So if you prefer the old way you can just keep it like that.

So maybe you think it's more explicit

if you can actually read the function keyword there,

but for me it's enough that we have the parenthesis here.

So that alone already shows that it has to be a function

and VS code itself is also helpful as it changes the color

of the methods to green.

So VS code is really smart in that regard.

And finally, the third enhancement is

that we can now actually compute property names instead

of having to write them out manually and literally.

And compute just means like calculate

and so let's try that here.

So let's say that we had an array with all the weekdays.

Weekdays, so Monday, Tuesday, Wednesday, Thursday, Friday,

Saturday and Sunday.

And now we wanted to take these property names here out

of that array, okay?

So instead of having to write them here manually,

so we can do that by using again the square bracket syntax.

And then in here, we can put any expression basically,

so this was Thursday, so let's say weekdays

on position number zero, one, two, three.

And of course we could use this structuring here,

but this is just a demonstration.

Anyways, so weekdays four and then here weekdays five.

But let me just show you that we could really

do anything here, so we could also compute the name

in some other way.

Let's just say, two plus two or two plus four,

so this doesn't make sense but yeah, I just want to show you

that we can do this.

Let's take a look at the object now here, opening hours

and so you see that we still get Thursday and Friday

and then here we get day six.

So we computed this property name using a template literal

and then also this expression in here.

And this is sometimes extremely helpful

to be able to do this.

So before we could only compute the values so here

for example, this could be 12 plus 12, right?

But we could not compute these property names

but now we can do that as well.