Jonas: 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.