ES8 has a few more new features that were introduced in 2017, compared to ES7. In this video,
We'll just go over the important ones.
So the very first one is 'string padding'.
We have new functions that we can add to strings which is '.padStart' and '.padEnd'. Now to demonstrate
this, let's go into the console. And just do a 'Turtle' and we'll do a '.padStart' of 10, if I do this,
I get 'Turtle' with 10 spaces in front of it.
If I do '.padEnd' get 'Turtle' with 10 spaces after it, and this is useful just for aligning characters, of
strings, if you want specific padding for them. Again very very simple easy to pick up, just another string
method that we received.
All right let's go into the second one.
The second one that we got is something called trailing commas in function's parameter lists and calls.
Hmm!, what does that mean?
Well, now I can do something like 'const fun', 'a,b,c,d' and add a comma at the end.
And, if I do a function let's just say 'console.log'(s)
'a', just a silly simple function.
I can now run this function, like one, two, three, four and then a comma at the end.
And this is still valid javascript. If I run this,
You see that, it works.
Console log 'a'.
Which is one, gets logged.
Now why would this be useful at all?
The main reason is, when you start getting really really big parameter lists, you'll see a lot of people
doing things similar to this.
Just to make things a little bit cleaner.
And when you start doing this, every time you add a new parameter, it's a lot easier.
But also in github, when you make changes, it actually makes the difference.
The green and the red differences is a lot cleaner.
So it's just syntactic and just make things look a little bit nicer.
Again, you normally wouldn't want to do something like this, but maybe when you have a long parameter list
like that, the ending comma is now valid and it won't give out an error. All right.
Let's look at the next one.
The next one is, we have 'object.values'
and 'object.entries' and these are very very useful because before these, we had something called
'object.keys' and 'object.keys' allowed us to do something similar to arrays but on objects.
So for example, if we had an object(obj) that, let's say will have an object and this object
will have 'userName0', 'Santa', we have 'userName1', 'Rudolph'.
And we also have, 'userName2', 'Mr. Grinch'.
Now looking at this object, because it's not an array
we can't do the 'map' or 'filter' or 'reduce' but this kind of an ugly object.
And this illustrates a good point, sometimes when you're working with servers, you'll get objects that
you don't really like or you don't want to work with but you still want to iterate over that.
And before we could do something like this with 'object.keys', le'me make a little bit more space over here,
so we can see, I could do 'object.keys' and in here, we'll throw the object.
And now, I can use it like an array or go one by one.
Like an array.
So it's as if, it's an array.
But except, it has property and values.
So let's say, we wanted to do a 'forEach' loop and for each key, that is, for each key in the array.
So for each 'username', we also have the index that is 0, 1, 2, just rap this in brackets.
And now, within hear, we can say 'console.log(key)' and then 'object[key]'.
So now, we're grabbing the object with the key 'username'.
So if I 'console.log' this, let's copy and paste this, clean this up a bit and I see that I have,
'username' 'Santa', 'username1' 'Rudolph', 'username2' 'Mr. Grinch'.
And that's one way for us to iterate or loop through objects, but with 'object.entries',
things become a little bit easier.
For example, we can do 'object', must make more space, we can do 'object.values' and the 'object.values',
if I do a 'forEach' here, I simply grab the 'value' from the value.
I can just 'console.log(value)'.
And now, I get the value of each object.
That is it loops through 'Santa', 'Rudolf' and 'Mr. Grinch'.
With the entries, if I do 'object.entries'.
Well, let's see what happens.
Let's clear this, I get an array of 'username' 'Santa', 'username1 ' 'Rudolph' and 'username2' 'Mr. Grinch'.
So this gives you a lot of control you get both property and value or key and value, and you can do whatever
you want with it and use 'foreach', 'map', 'reduce', 'filter' all those array functions.
So let's use a real life scenario here.
Let's say, we wanted to, we just received this from the backend, the backend just send us a bunch of
users that they had in the database and we want to generate 'usernames' for that because we don't like
the 'username0', 'username1', 'username2', you want to display name that displays the 'Santa' with
the ID numbe, that is 0, for 'Rudolf' will be 1, for 'Mr. Grinch' will be 2.
How can we do that? using our newfound powers.
Well, I can just simply do something with 'object.entries',
and 'object.entries' will have an 'object' that I can map over and this will give us a 'value',
again remember that this will return arrays.
And here we just want to return to a value of 1 because we want to grab 'Santa', 'Rudolph' and 'Mr. Grinch'.
So that is the second item in the array.
And then we want to add to that, like a string 'value 0' which is the first item.
So 'username0', 'username1', 'username2'.
And here we want to 'replace',
this is just a function that we can use on strings and we want it replace 'username' with an empty string('').
So what we're doing here is, we're creating a new string with 'Santa', 0
because we don't need the username in here.
So now, even though we have an object, we can loop through it like an array, and like that we have new
usernames, 'Santa0', 'Rudolph1' and 'Mr. Grinch2'.
How cool is that?
So, these are really really useful additions to the language, especially 'object.values' and
'objects.entries', you can do a lot with it, but there is one big ES8 feature that has arrived and
everybody's excited about, and they're called 'Async', Oh wait!
Now it's brand new and everybody in the community is really excited about it.
However, in order to fully grasp the benefit and understand it, we need an entire video on its own.
So I'll see you in that one.
Buh-bye.