Welcome, everyone.
Today, we are going to talk about New Year's 11 or ECMAScript 20/20 features.
How cool is this?
So first, we have dynamic, important and big in the private class variables.
Prom is all settled and optional chaining operator.
Now, there are a couple of others, but these are one of the most important ones.
Now, first, I'm going to start with dynamic import.
So on the desktop I create a folder called S11 only.
So you can do the same thing.
You can create a folder or you can sit back and watch me.
What I'm going to do now for the first dynamic import, I need to create a couple of files in order
to show you.
So I'm going to create a new file called Name.
That is nice.
I'm going to create a new folder called Modules Actually Models, and I'm going to create a new folder
called Use.
Now, remember the last project that we do with the API, the MAPI movies, API, so we used modules
and we export and import files.
So we're going to do this same.
But dynamic import is a little bit a different way of importing.
So what we have used so far was called static and now we can go back and change everything if you want.
So in the models, I'm going to create a file called model.
Remember the convention capital N and in views, I'm going to say you are actually going to save you
here that just nothing else.
Now inside here, we're going to export a function you can export of any function you want.
So I'm going to export const hello view and it will not take any parameters and it will return only
actually not going to return because I'm going to consulate like here and I'm going to say export done
by the view that I'm going to copy the same thing and I'm going to paste it in the model.
But instead hello view.
It's going to be Hello Model Nice and export done by the model.
Nice.
So the models interviews are done the is it's where we are going to import things but we're not importing
static, but we're going to import dynamic.
And for that reason I need a new file called indexed HTML.
So I want to see the result.
So I'm going to use the Emet abbreviation here.
I'm going to enter and that will create HTML5 markup now in the body.
I'm going to use the script S.A.C. and I'm going to load the model XML domain mean that is now you can
test this one out.
I'm going to use the open left server or you can open from the folder.
The file.
Right, OK, and I'm going to grab this one.
I'm not going to work in the I'm not going to work in the Firefox.
I'm going to work here in the in the Google Chrome.
OK, now so how do we know it's working.
Console that lock.
It's working.
OK, let's save it.
Inspect it.
Console.
Here we go.
Everything is nice.
Now I am going to do the dynamic dynamic important.
But first I need to tell you that dynamic import introduce a new function like form of import import
that unlocks new capabilities compared to the static way of importing so we can use it as a lazy loading.
So now we, we know that the importing modules from different folders.
It's very important.
And I'm going to do it here in two ways.
The first way that I'm going to do is actually I'm going to import the model.
Right.
So I'm going to see constant here within the clear, constant call model.
And I need to use a path here.
So this part will go to the current directory, then models, then model dodgiest.
Remember here, we didn't include the years before, but now actually you need to write.
OK, so I'm going to import using again the keyword import in here.
I'm going to pass in the model.
So if anything is wrong, it's not going to go there.
But I haven't told you that every time that we are importing dynamically that will return a promise
and we know how to handle promise.
Right.
Using that method now inside is then method.
I'm going to create a module so you can call it whatever you want and I'm going to create a narrow function
here.
OK, inside this, I'm going to use the module to call hello.
Model, the function that we created inside the model, so I have access to this one, right.
Let's see here.
Here it is, export done by the model.
Nice how we can do this the other way.
I told you that I'm going to do it in a different way, so I'm going to use the async away function.
Remember, when we are dealing with promises, we can always do that.
So async function called load, it's not going to take any parameters here.
I'm going to say let's get view data and I'm going to say I'll wait here and I'm going to import it
again.
Now, where is this stored?
Interviews.
Who interviews?
Jay is very cool.
Now I'm going to say here, get new data that.
Hello.
You know, I do have the access of the view and that is pretty much it.
So save it.
Let's go back here.
It's not working because we are not calling this low function nice.
So you now know how this dynamic import is working now?
Again, dynamic import unlocks new capabilities of of compared to the static one.
And we can just get a new way of doing things.
So you can just do this wherever we want.
Right.
So I didn't do it at top here.
I didn't declare the import on top like before.
Remember all of the inputs, we put it on the top.
OK, next next function is called big int he and I'm going to call this one here and back it.
Now what is big into.
So one of the most anticipated features of JavaScript is here and it's actually allows developers to
use much greater numbers in a four hour Jasco.
Right for our is for data processing or data handling.
Now at the moment, the maximum number we can use, we can store as an integer is to buy power of three
minus one.
So big integer will make this, will improve this.
I'm not going to default but will improve the way we are doing.
We are doing with the whole number.
So we are going to have a larger whole numbers.
There will be larger than to the power to buy power of fifty three minus one.
Right.
OK, now big integer can be used for example by developers.
If we for example type.
Let's create let old number here.
And I'm just want to show you that we can use the three, we can use the number primitive here.
Right.
And I'm going to say Max safe integer and console log the old number.
Now I'm going to copy this one here.
I'm going to paste it here.
Nice.
I do have this number.
So this is coming by to two by power of fifty three minus one.
So well it's not always working.
For example, I'm just going to comment this one out and I'm going to use comes a couple of times here.
I'm going to add oops I'm going to add plus one, I'm going to add plus ten sorry plus two and I'm going
to add plus ten.
OK, and actually uncommon this one.
So I'm going to copy it again.
Paste it here.
Put it there.
That's it.
So I adding one.
This is the first one actually I'm adding one.
It's correct but I'm adding two and this is not changed.
I'm adding ten.
Look at this.
This is not correct.
That's why we need to use the big integer.
So how we are going to create this one.
So these three here actually are false.
They're not correct.
Representation of what we're trying to achieve.
So how we can use the big integer.
So we need to actually have N in the end.
So we need to have and end letter and append it at the end of the number.
So the end annotates that this is a big integer and should be treated by the JavaScript engine a little
bit differently.
Right now I'm going to create your new number and the new number will be big sorry, big integer from
the old number.
Right.
And I'm going to come as a log the new number
so I'm going to copy again every day now based there based them here again and here it is.
So I have the old number and I have the new integer that ends with N so.
This tells the JavaScript engine, OK, so we are dealing with big integers right now.
Also, what we can say here is that any mathematical operations that are can be done with the the numbers
can be also used in the with the integers.
OK, now also we can check the type of for example, I can see type of and if I have one and just imagine
it, I will just see it.
Is this equal to big begin and they should return me.
True.
Right.
Also what I can say the typo and I'm going to say big int and here I'm going to pass this one just like
that and I will see if this is equal to big and I will hit enter.
That means it's true.
So any number that we're going to put here, we can convert it to the big integer.
Right.
So also when wrapped in object, a big integer will be considered as a normal object.
And this we will check with the type of, again, type of object.
And I'm going to pass here once and again.
And if this is equal to object, then we go, then it is true.
That's it.
So when wrapped in an object, integer will be considered as a normal object.
OK, so the big integer are nothing special.
We can just used larger numbers and they're defined with at the end.
Cool.
Let's move on now.
What's the next.
Next one is private class variables.
OK, for this one we need to write a class.
So private class variable means that we can add a simple hash symbol in front of our variable or a function
and we can reserve them just for that class to be used internally inside of that class.
So here I'm going to say here, begin
now.
This one will be number three.
Right.
And I'm going to copy it.
OK, now I'm going to create a class student here and this class will have an empty constructor, I'm
not going to set anything inside.
This is just to show you that we can do it like this.
So I'm going to have an empty constructor and I'm going to specify a variable called Wawn and I'm going
to pass my year of birth.
Right.
Simple calc each function.
This function will just consulate like the current year 2020, minus the this actually dot board.
Next.
OK, so as I told you here, we use hash in the name of the variable in this by adding this hash symbol
means that we are reserving these variable as a private and debt to be used entirely for inside this
class.
OK, now can we use it outside of class?
That is the question.
So I'm going to say const student and I'm going to create I'm going to create the instance of the new
student class.
Right.
It doesn't require any parameters if I'm going to say student, but first I'm going to say corkage and
let's see what will happen.
I'm just going to copy the entire one, save it, based it here, enter.
And here it is is calling thirty three.
But if I use student that
hash one look at this error.
Uncaught syntax private field born must be declared in the inclosing class night so we can declare the
private class variable by adding the hash symbol in front of it.
Right.
And we can access the private fields when we have an instant, when we stenchy the object of that same
class.
But this is not possible outside.
So we can do direct accessing through the student instance, right?
It's not possible because a private pool.
So this is the UNCAC syntax error.
Nice.
Next one.
So this is all about the private classes so we can even create a private function and then we may not
be able to access it here outside.
Nice.
So the number four was the number for the number four is actually promise all settled now.
I've included the promises last lecture and now you will see why.
Because here I wouldn't be able to explain this one correctly.
And I'm going to just going to clean everything on top here.
We don't need us now.
Promise.
All settled method is implementation of asynchronous operations.
So all the promises are implementation of asynchronous operation.
So promise in JavaScript.
I'm going to go back a little bit.
Just the history are used to handle asynchronous operations.
Each promise has three stages, right?
States or stages, fulfilled or resolved for successful rejected, four failed and either fulfilled
or rejected.
There are no other state.
So promises are implemented in the standard part of JavaScript core language.
And we have last lecture.
We just look at all res reject and resolve.
Now, you know, I'm going to show you both now I'm going to say problem is that all in then I'm going
to use the example, same example with promise that all setup now all set of metal, on the other hand,
is introduced at this stage in E is twenty twenty.
So before we didn't have this all settled method, now we had the old and we are going to do this for
no promise that oh first I'm going to do year six, promise that.
Oh remember the promise that old takes and the array of promises holds the execution, throw out error
and reject promise once rejected promise occur in the array of promises.
So if something is happening is going to halt the execution.
OK, enough talking.
Let's do something.
Const promise one equal new promise and here is hopes each side will have resolve and reject.
Right create another function.
We're not going to pass anything here, just we're going to set the set timeout and we set them out.
Actually said time out now set them will always run successful.
This is not API that something can go wrong.
So we know that after a couple of by the milliseconds that we define, we know that this will be resolved
in here.
We can pass the state resolve.
We can pass the milliseconds.
I'm going to start with five hundred in the last one.
I'm going to put a value that later on I will print it out.
So promise one.
Nice.
So oops.
Instead of semicolon I just put it.
Yeah.
Close.
So copy this two more times and change this to promise to you and this will be promise to, this will
be worth let's say reject this one.
And this will be one thousand milliseconds, so after one second and this will be after two seconds,
milliseconds, we're talking about milliseconds.
This should be three here.
This should be three right now when we did promise.
So we have the access of the promised class.
Now, I didn't explain here.
So promise one is an instance of the promise class, right?
Because they are all stored in the promise.
So we have access to this promise class.
So promise that all in here I'm going to pass an array of promises.
So I'm going to see a promise, one promise to and promise three.
Right, OK, then I'm going to use the then method on it and I have the data.
And I'm going to Locke what so what we need to counsel here, only the data, that's it right here I'm
going to say catch.
So we're going to catch the error if there is an error.
And obviously we do have one.
Right.
And I'm going to say cancel the error happened and I'm going to see error here.
That's it.
Semicolon at the end.
No copying 30.
So if something is happening here, the problem is spending an error happened.
The execution of the problem is all right.
It's halted.
That's it.
So takes in the real promises.
Halt the execution if something happens, throws in there or.
Yep.
And that's it.
Now, this was promised that.
Oh, but we do have now something else called.
I'm just going to comment this one comment called Promise.
From promise that all settled, right?
So problem is that all settled?
So what's the difference here?
OK.
The problem is that all settled return returns a result of promises, but that will be regardless if
they are rejected or fulfilled and it will just return the result.
So how are we going to do it here?
OK, now the syntaxes promised that all settled in here.
We're going to pass the array of the promises so I can copy the same one.
Actually, I can copy the scene.
I can uncommented and here I'm going to change all set up nice.
So everything is pretty much it.
So this actually will return an array of promises, regardless of if they are rejected or fulfilled.
And I'm going to copy the entire one actually.
First, I'm going to copy this.
I'm going to pasted there.
Nice kind of copy this one.
Imgur pasted there.
And here it is.
I do have array of three and it give me the status.
It's fulfilled for the first one.
So the first one will go, its return is going to be resolved successfully and it's going to be fulfilled
in the values promise one.
The second one will be rejected.
Here it is.
And the reason promised to do is give you the reason and the third is going to be again resolved and
he's going to give us a value is going to be fulfilled, resolved in a value.
So regardless of any error here happening or any.
So if anything happens here, it's still going to be executed.
That's why I'm trying to say it now.
It's still going to return an array of promises, regardless of their outcome.
Either will be the status will be fulfilled or rejected.
So there is.
That's it.
Nothing else can be here.
Nice.
So one more I do have.
And that is the optional chaining operator.
No.
This is the last one, I promise, this lecture is going to crazy long, but we have to do it.
So the optional chaining operated optional training operator provides a way to simplify accessing values
through the connected object when it's possible.
So the optional training operator has a syntax like this question mark dot.
So this permits reading the value of a property located deep in the chain of the connected object without
having to expressly validate that each reference in the chain is valid to question mark dot operator
function similarly to dot changing operator.
Nice.
So let's create here an example and you will understand where all of this I just mumbled seconds adventurer.
And this will be of an object that holds a name and I'm going to put it here, Rick, and also a cat
that will have another object that will have a name of a cat.
Right.
Nice.
I'm I'm done with this object.
So now if I create a const here dog named, for example, and I just try to access this chain, here
it is.
So this is inside a chain.
So if I access this chain by adventure, dog name, sorry, dot, dot, dot name, what will happen?
I don't have a dog here.
Right.
So this should throw me an error.
But what kind of an error so uncute cannot read property name of undefined ness.
So this is an error.
But with, with this optional chaining operator, we can do this, we can simplify this by saying,
OK, so I'm going to come in this one, I'm going to say cost dog name and we can check in the adventure.
Right.
The dog.
Then I'm going to use the question that need now what what this will do, it will not actually throw
us an error back.
It's going to give us undefined and it will continue working with the execution right now.
That is that is the point of the question mark operator.
So it is similar to the dot chaining operator, except that instead of causing an error, if a reference
is all or undefined, it will return value of undefined, and that's pretty much it.
So it can be used.
Same for the function calls.
So if we something's wrong with the function, it is also going to return undefined if the function
doesn't exist.
So how we can check this simple I'm going to call a function that doesn't exist, but first I'm going
to do it like we did before.
So adventurer I'm going to use.
So why is not giving me this?
OK, it doesn't matter.
So I'm going to say adventurer dot some non existent method and I'm going to say it here.
I'm going to call it like this copy paste it down.
Actually, I need to refresh because I'm using the same constant here.
If you don't want to do it, OK, I need to select oops.
I need to select to delete it now.
It will work.
Here is an adventure that some nonexisting method is not a function qu so is giving me not a function.
So how we can escape this one with optional chaining operator.
OK, let's do so.
I'm going to come in this one again and I am going to say cancel that log.
So I'm going to cancel the log the the one that what we trying to do adventurer.
And I'm just going to copy it.
So adventurer that some not existing method in here.
I'm going to use the question mark dot and then the brackets.
Now I should expect here to return undefined output.
Actually we need to copy the entire thing again.
We need to refresh it, based it there.
And here it is.
The first one defined is coming from this in the second.
Undefined is coming for this now.
It's not going to throw us and there we will be able to continue working in.
That is the difference between the optional changing operator and the dot changing operator.
So instead of causing us an error, if a reference is no or undefined, it will return to value.
So this is actually a value of undefined.
Right.
And also the function it will return is undefined as well if that function doesn't exist.
So, yeah, that is it for this one.
So what we have done, the optional training operator, the problem is that all it's different than
from the all settled because the old setup will just go through all of the promises regardless of their
outcome.
Right in this one was halting, stopping if something was wrong, if someone was rejected.
Nice.
Now we have primitive class variables we can define with dash sorry hash in the name of that one.
And also they can be used inside function, but they will not be able to be called like this, a console
that log.
So I'm going to write it here.
Student that hash board that.
So this will throw an error.
Right.
So you're not going to be able to call it now.
The big integer.
Big integer is something that will help us to deal with the larger numbers.
And this is how we write it down and actually.
It's Friday and at the end of the number, right, and we can check the type of weekend check.
Yeah, we can do all of the mathematical operations for the normal numbers and the dynamic import.
I just explain you with the main dodgiest file.
We can import it.
First, we need to call the entire path here and we can just import it because it's going to return
promise.
We need to use that.
Or more simple, we can use async function in a way is only working with async functions as well, and
that is pretty much it.
So thank you very much.
This lecturer has been super long, but I'm so sorry and I will see you in the next one.