Hey there everyone.
We're now ready for yes 10 or Xmas script 20 19.
That's right.
Every year.
They're constantly trying to improve the language and that is javascript.
And now ESPN is the latest.
So what new features do we get in this new version of JavaScript.
Well luckily for you there aren't too many.
So let's start off with my favorite one and it's called flat and flat is a method that we can use on
a race.
Let me show you what I mean let's say I have a array variable that contains a very exciting array of
1 2 3 4 5 if I now run array dot flat.
Let's copy this code and run it here.
What do you think will happen.
Well absolutely nothing we return to a new array.
It looks like but it looks the exact same but this is where Flight gets exciting.
Imagine if this had nested arrays.
So for example two and three where it's own array and then four and five were also an array nested inside
of a bigger array.
If I now copy this and let's call this array to find out.
Copy this and pasted in here Hey check that out.
We get a new array that is flattened.
That is there's no nested Arrays anymore.
All right let's keep going then and what happens if we have array 3 and array 3 is even more nested
than we had before let's say we have one two three like this and then maybe we'll have a five that is
well nested pretty deep like that.
So now we have an array there's an other array and inside of that there's another array.
What do you think will happen here.
Want to copy and paste run this code.
All right.
So I get a new array back but we see that there's actually not a completely flat array.
Instead we have one two three four but then five was only flattened one level so essentially just removed
these brackets.
Now the interesting thing with flat is that we can tell it how many layers to fly in the array.
So if we go back to our example and in here the default was 1.
But if we change this to two now
let's copy and paste let's refreshes and run it again a look at that we have a completely flattened
array.
So in here I can tell it how many times I want to fly in or how many layers I want to fly in the array.
All right.
But I have a really exciting example for you.
Get ready for this.
Congratulations you just became the owner of Jurassic Park.
You have a park with all these ancient creatures and the t rex over here is extremely dangerous.
That's why.
Well it's in its own contained area of the park with a lot of barricades around because we don't want
the t rex going wild.
But here's the problem.
You're a bad guy at Jurassic Park.
If I asked you hey how can you completely flan this array how would you go about doing it.
Pause the video.
Think about it.
Ready for the answer.
Well we can do Jurassic Park dot flat and then you might want to actually count how many arrays are
nested in here but there is a trick here.
I could maybe just do 50 let's see what happens if I copy this let's make this a little bit bigger.
I refresh here.
Copy and paste this.
Let's see what happens.
And Jurassic Park should be Jurassic Park.
Let's copy this again.
Let's refresh.
All right.
All the barricades are down and the animals are now going wild.
And I just randomly picked 50 because I knew that 50 wasn't.
Well how many nested arrays we have now in the exercise after this video.
I'm gonna show you a cool little trick of making sure that we can fund the utmost level but that's for
the exercise.
Another really useful thing that you can do with flat is let's say you get a bunch of entries and these
entries from your users come in and maybe we get Bob we get Sally entering their name but then we also
get a bunch of entries that are completely empty with maybe Cindy at the end here using flat.
We can actually offline the entries and clean up our data so I can say entries dot flat like this.
And if I copy and paste this look at that it cleans up the data for me which is really really nice.
All right.
The next feature of ESPN is flat map and flat map as the name suggests allows us to use a flat function
and the map function or method on an array.
So let's do something fun here.
Let's say we have the Jurassic Park again and this time around we're going to use flat map.
So let's say Jurassic Park and we'll call this new variable.
Let's do concept.
Jurassic Park.
Chaos and this chaos will have.
While the Jurassic Park array that we had above.
Let's make this a little bit bigger.
And now we can use a flat map to do something interesting.
I can say for each item that we're going to fun we're going to get a creature and this creature using
arrow functions is going to get creature plus the T-Rex.
So I'm going to copy the T-Rex over here.
So each creature is going to get a T-Rex as a neighbor which is well not good.
They're all going to get eaten by the T-Rex is the T-Rex they cannot carnivore I'm not sure you'll have
to google that on your own.
All right.
So we have the Jurassic Park flat map so I'm flattening the Jurassic Park and then mapping over this
flattened array and doing some sort of a map function to it.
So let's see what happens if I now copy this and I paste this in if I now check out what Jurassic Park
chaos is and I hit enter oh boy look at that we have t rex neighbors with all the creatures and while
it's absolute chaos and Jurassic Park flat map allows us to use the basic map function and then flattens
the result to a depth of one.
All right let's keep going.
Next is a very very simple one.
Let's say you get a user email and user email.
Well it gets entered a little incorrectly so we get a bunch of spaces and then we have Eddie the Eagle
at gmail dot com that we receive from the user or maybe we have user email too.
And this time around Johnny Dangerous at G.M. dot com enters their information but we have again some
blank spaces.
What can we do.
Well with the new iOS 10 feature we can simply say user email dot trim start on a string and it will
trim the beginning and user email too can say trim and and trim the end of the string.
So let's console dialogue log this and see what happens
if I copy this and make sure we declare these variables so be const and make sure that I can smell e-mail
right.
If I copy this now and enter it in here
I don't know if you can see but now my strings don't have any blank spaces in them.
If I check out user email here you see that the blank space is still there but the new generated string
user email start won't have any blank spaces.
Nice and easy.
All right we're flying through these.
What's next.
We only have a few more left.
Actually two more left.
The next one is called form entries.
It transforms a list of key value pairs into an object.
Let me show you what I mean let's clear this and let's just comment.
All of this.
Maybe bring it down to the bottom and focus on this one.
So imagine we had some user profiles that we receive but these user profiles are formatted in the wrong
way.
So we have let's say an array and inside of an array we have the user profiles of a game.
So we have let's call him Commander Tom as the player name and Commander Tom is 23 years old.
Next we have a let's say an array of Derek Zealander and Derek Zealander is let's say 40 let's make
this a little bit bigger.
And then finally we have an array Hansel and Hansel is 18 so we have these user profiles but as a race
they're not really useful right now.
Wouldn't it be great if we can convert them into an object where each user name is associated with an
H.
Well this is exactly what entries is used for.
We simply do object dot form or from entries so from entries and from entries is going to receive an
array like this.
So let's do user profiles here and see what happens fight.
Copy this code
paste it in here.
Hey look at that.
We get an object now with Commander Tom.
Twenty three.
Derek Zealander has a key and a value of 40 and Hansel has a key of Hansel and value of eighteen.
Now the name might trigger something while you're watching this because in yes eight we talked about
something called entries right.
Object dot entries allowed us to do well the exact opposite thing.
So for example if this was now an object if I do object entries on this object now.
So let's copy and paste refreshes
I get exactly what I had originally back.
So from entries the name from entries simply comes from.
Well object dot entries.
All right.
One last one I promise.
And then we're done.
The last part is an update to a feature that we have in JavaScript which is the try catch block like
this.
Now this try catch block is something we're going to talk about a lot more when we get into the asynchronous
javascript part of the course.
But essentially the try and cache block in JavaScript allow us to try a piece of code and if there's
any errors to catch them.
So for example if I do hear let's say four plus five and I run this piece of code i click Run I get
nine.
It's the exact same thing as us writing four plus five.
The only difference is that within this tribe block we're telling javascript Hey try this and if there's
any errors on line three here then do something within the cache block.
So I could for example say console dot log you messed up and now if I do let's say true or true plus
hi fi copy and paste this and run this code I get true high because of something we've seen before that
is type coercion.
So it tried this in javascript that is valid javascript because it turns true into a string and combines
it with high.
But if we let's say do a variable that we haven't seen before.
So instead of true let's say we have a bob variable fire run this I get to the cache block which says
you messed up because while this through an error and as soon as it throws an error it catches and here's
the thing.
You actually saw a new feature here in ESPN because back in the day before yes 10 in order for this
code to actually catch you had to pass it an error object or parameter.
So I could have called this whatever I want.
So I had to do error like this so that I could perhaps say error.
So if I copy this refresh and let's give Bob here so that we error out I get you messed up but then
I also catch the error which is a reference error.
Bob is not defined.
So before we had to pass it a parameter otherwise this whole block of code even if it was working properly
would actually error because we didn't pass it the parameter with.
Yes Stan we have an update where you're not forced to use that parameter if you don't want to.
Again this is something we'll cover later on in the course when we talk about asynchronous javascript
oh boy that looked like a lot but I mean it wasn't that much rain.
Nice and easy nice and simple.
I'll see you in the next video.
Bye bye.