Javascript The Advanced Concepts

1. Course Intro: Hello, and welcome to Advanced Dava script class. My name is Join the short car. I'm Ft wave deloper, and online instructor. Today in this class, we are going to start advanced Javascript. We are going to start with introduction. Advanced Dava scrip introduction. Then we are going to learn late and cost variable. We are going to learn advanced Java p, tempest sing method, arrow function, sk operator, spray operator, object eterals, destructuring array, destructuring object, object oriented programming. Thus in heights, modern promises, promis AX, also gular KPI. The gular async method symbol, iterators, generators, syncmt, Atlas gar, zero handed. This course is for those two abs who want to enhance their Javascript skills. If you want to learn modern Javascript framework such as gs, reas, angular, then this course is for based form. In this class, I try to cover A six and the later version of JavaScript. Let's get started. 2. Advance JavaScript Let & Const Variable Tutorial : Hello, guys, good to see you back. This is the first tutorial of this series. We are going to start our advanced Java strip journey from Late and const variable. Java Striped tap total three type of variables. First one is where, then late and then const. Latin con introduced in Java slip e six version. It's main it is introduced in 2015 version. Now, let's see what is the difference between three type of variables. The first difference between all of the type variable is that declaration method. Let's see the difference for where we need to tie Q, and then we need to take the variable name equal to then v. Similarly, for late, we need to type late. Then we need to pass the variable line. For cost, we need to use cost Qd. Then we need to pass the variable line. We can redeclare variables. Here you can see, here we redeclare x variable again. If we use kw, we can redeclare our variable, and we can assign a new value to these x variable. Also we can reassign the value if we use kw. Now our x value is. Now, if we print this value, it's going to return. In case of where we can reassign the value, also redeclare the value. But in case of blade, we cannot redeclare the variable. If you do it, then it's going to return error. But we can reassign the value if we use let keyword. But we cannot redeclare the value. Now, let's talk about cost variable type. In cost variable type, we cannot redeclare our variable. If we do, is going to return error. Also, we cannot reassign our V. Also it's going to return error I do it. That's the main difference between three type of variable. Late and const. In case of, we can reassign and redeclare. In case of late, we just only reassign, not redeclare. But in case of past, we cannot redeclare and also we cannot reassign. And there is another different between them, which is related scope. Let me show you. If we talk about the first case, I mean where I'm to use a HP condition, and inside this condition, I'm going to declare a variable using QR. If I try to print this value outside the p condition, yes, we can because this is global scope. We can print this variable outside the p condition. Also we can redeclare it and also we can perform calculation outside the ep condition. That's why it is called global scope. Similarly, inside the P condition, if we declare a variable using let QR, then Then we cannot print this variable outside the P condition because this is block scope. It's mean it is only work on inside the block. Blocks mean the car ases. We can only use this variable inside the car ses, not outside the car ases. Here we can print the value. Also we can reassign the veal. But we cannot redeclare it. We can use it with conditions, loop, switches, while loop, but just we need block scope for that. At the same way, inside the ip condition, if we declare a variable using const keyword, and if we try to print it outside the block, then he's going to throw an arrow because it is also a block scope. So constant Q also follow the block scope. Let's take a practical look, what we learn. As you can see, side by side, I open my visor Sudo code editor and my browser using Live Server extension. I already created an est document name index dot HTML. You can use any code editor that are you familiar with. Here I'm going to use Visor Studio Code. As you can see inside the head tag, we have already typed the script tag. Then inside the script tag, first, I'm going to declare a variable using where Q. W and our variable M is A, A, assign w, and he am to assign a string value, and the string value is add one, and Semgra two in this line. Also, I'm going to redeclre the v. So I'm going to duplicate this line, and here again, I'm going to pass a new string Mage add one mage. Now, let's print the value in our console. Also you can print the value in your document. For that Amon type, console, the log inside the round press, I'm going to pass A, our variable name. Then smog to in this line. If I set this file and back to the browser and show you my console to show your console, just need to click, just you need to press right click on your browser. Then you can see inspect section, then click on instep. Here you can see the console section, the console tab, click on console tab. Now I'm going to increase the console for size. As you can see, it print Mg, and don't focus this two line. These are came from my extension, my JCNer extension. Here we successfully redeclare the variable. With that, also we can reassign vi. Let me show you. Hm type A equal to is that the double quotes, am pass, the string, and Ham pass, welcome. So Let's seve the file and see what it treated. As you can see up to self the file, you can see my console, this time it print, welcome. As I told you, we can redeclare and reassign our value if we use keyword. Now I'm going to use late keyword to declare a variable. Here I type late. Also, I'm going to redeclare it with late. And I'm going to comment out this line. A set this file, as you can see, it's an arrow, syntax error. Because we cannot redeclare our variable if we use late keyword. But we can reassign our value. If I comment out this line and remove the comments and reassign the value and then set the file, now you can see it print, welcome. Because ect allow us to reassign, not red. But if we use constant keyword word. Cs, and there at this file, now you can see it's written arrow because cons do not allow redeclared, also it do not allow reassigned. That's why it's Sten error. Now, as I told you, there is another difference between all of these variables, related their scope. Let me show you the example. For that, I'm going to use a condition. If inside the round process, I'm going to create a condition and our condition is always true. One equal to equal to one. Then inside the e condition, Hamod assign a variable using a A equal to 12. This time, I assign a numeric. If I set this file, as you can see in my console, it's written 12. If you notice you can see, we just declare the variable inside this dock, means inside the cases. But we call this variable outside the cases. I mean outside the block. But if I use let variable type ate, a equal to 12, and if I want to excess it outside the block and set this file, as you can see, it's sttle arrow. Uncut reference, A is not defined. But if I try to excess it, inside the block document dot right inside the round process, I'm going to pass the variable A. Then seven c two, this line. If I set this file, now you can see in my browser spin, sprint the value to a. Because, as I told you, let's follow the block scope. At the same way, if we use st keyword to declare the variable, then cost A equal to 12, and then set this file, as you can see, it's the same result. As you can see, we can excess it inside the dock. That's why it print 12 in our browser, but we cannot excess it outside the dock. That's why our console written error because cost also follow the block scope. But if we declared with variable where and this if the file, now you can see our browser and our cosol return the same result. That is the different between both the variables, cost and late. Thanks for watching this video, St tune for our next tutorial. In the next tutorial, we are going to learn template stream. 3. Template Strings Tutorial: Hello guys, good to see you back. This is the third tutorial related advanced Java speed. In this tutorial, we are going to learn template string or template rerens. This feature is introducing Java speed a six version. Some other developers call it template literals. Before template string release, we use concatinal sign to join strings. Let me show. Suppose we take a string variable and the value is add one meg and our variable m is Name. Also you can take any numeric. Now I want to use this string value with another string. Basically, I want to concatenate two string. For that, we use concatinal sign. Suppose address equal to India plus our variable m. This concatenation sign going to join both this string. This is the normal way that we can join two string, otherwise two variables. But the problem is, suppose we have a lot of variables, and we need to concate this variable in a one string. For that, every time we need to use concatenation sign. With that, also we need to use codes to join the string, and this is going to make our cote very complex. To resolve this problem, JavaScript introduce template string. Now, let's do the same thing using template string, and it's going to make our cote more efficient. I create the same variable name with the same. Now I want to concate this variable in a string. But this time I'm going to use template string, something like that. W address equal to want to use bats. These are bats. Inside the bats, I'm going to pass the string. By mistake, I type the double co sign. Then you need to use dollar sign. Then inside the calibraces, we are going to pass the variate. Remember, this special sign is not quotation. These are all bata, and you can find it above the tab in your Kibo. You need to use the bata starting an en position. And then you can pass your normal string. If you want to call any variable for that, you need to use dollar sign. After that, you need to use calibraces. Inside the clasis, you can call your variable and it's going to join two string. You'd need to use concretal sign for that. If you have multiple variables, just you need to type dollar sign and inside the calrass, you need to pass the variables. Without wasting your time, let's start the practical and see how we can use it. As you can see, side by side, I open my visa stdio code editor and my browser using Light server extension, and I already create an estimate document named Idexot este. At first, I'm going to declare a variable. For that, I'm going to use late late and our variable image user. User assign with inside the double cose, and I'm going to pass a string, and I'm going to pass a name, and the name is add one mage. Then similar to this line. Now I want to print this name in our browser. For that, I'm going to type domain dot right and say the round process with the name, I want to print a string. First, I'm going to follow our old method. I say the double cos, I'm going to pass hello. Then I'm going to use concatenation sign to join the string with user, and H I'm pass the variable name user. Subg two this line. After set this file, as you can see in my browser, as you can see in my browser, string, hello Edvard M. Now I decide I want to add another string. For that, again, we need to use concatenation sign. Then inset the double course. I'm going to type welcome. After se this file, as you can see it print, hello ad means, welcome. Every time we need to add congregation sign to join the streams. I make our code very complex. Now I'm going to use this second map, which is template string. I'm going to comment out this line. First, I'm going to remove the old content and to use back ticks. Then inside the back ticks, I'm going to tie hello. Then I want to call the variable. For that, as I told you, we need to use Donor sign. Then inside the curly recess, we need to pass the variable n, which is user user. Then I want to concatenate another street, which is welcome. If I set this file, as you can see, we can see the same result in my browser, and this very neat and rem. Now I want to add another variable in the same string. How can we do that? First, I'm going to declare another variable. Late and our variable is marks. Mark equal to add one got total 350 marks. Now I'm going to change the string bit. Hello, add one you Mark is Again, we need to use dollar sine and car ss. Inside the car ***, we need to pass the variable, Mark. Set the five. After set this file, you can see the result. How advanced ange, your marks is 350. There is another benefit if we use template string. Suppose now I decide I want to show the user name inside the double codes. Yes. Now we can use double codes. Here, I'm going to use double codes. Outside the variable. If I set this file, as you can see in my browser, now the user name come inside the double codes, and now I'm going to use temp string in a function. At first, I'm going to comment out all of this section, and then I'm going to declare a variable, late, and our variable name is first name. First name equal to, and the user name is d one. Also, I'm going to take another name, which is last name. Late. Last name Asen mage. Et's capitalize the a character. Now I'm going to use this two able in a function. For that, I'm going to create a function. Function, and our function name is full name. Full name inside the round recess, he need to pass to our two parameter, and our first parameter name is F name, and our second parameter name is A Name. Then inside the c recess. I'm going to return the full name, and I want to return first name and last name. I'm going to type written function return, and I'm going to use back ticks. Then inside the back tacks. First, I want to print the first name. Dollar sign inside the class A name. Then dollar sign inside the cases Lam and 72 in this line. Now I'm going to create a variable, which going to store a stream. For that, I'm going to use ate, and our variable ae is hello. Equal to again, to use templr. Her type, hello, Then dollar sign inside the crass, he called a function, and the function name is full name. Then inside the round brass, he to past two argmin because we are calling a function, and our first variable is first name, and our second variable is last name and Sebagal two in this line. Now, I want to print this variable in our docu So type document right in the rounds hemo call the variable name hello. If I set this file, you can see the result. Hello and one M. In this tutorial, we learn a new feature of ES six version, which is template stream. What is the benefit of using template stream? This is it for this tutorial. Thanks for watching this video, in our upcoming Tutorial, we're going to learn arrow function. 4. Arrow Functions Tutorial : Hey, guys, good to see you back. Once again, I'm back with another tutorial related advanced Java script. In this tutorial, we're going to learn arrow function. This feature is introduced in JavaScript, e six version. It is not a new function. It is the enhanced version of creating a function. Now, let's see how we can create function before the arrow function. First, we need to type function Q, then we need to type a function name. Then we need to take round grass and inside the calibraces, we can pass our code. As you can see, in our consult log, have we painted at one age. This code not going to run by itself. Until we call the function, and to call the function, just we need to pass the function name. Something like that. At the same way, we can create function like this. First we declare a variable late in our case name equal to function. Then inside the calibraces, we can pass our pole. These are the old method that we can create functions, and I know you are already familiar with that. This type of function we use before e six version. But after six version, Java strip introduce arrow function, and it's going to reduce the syntax of the function. First, we need to declare a variable for the function. In our case name. Then we don't need to tie function QR to create arrow function, only to pass round ases. Then we need to use arrowse, and to create arrowsine, we need to pass z to sine and greater than sine. Then we need to type console dot law. I mean our code. Now you can see our function become so compact. Because of arrow function. We convert all the code in a one line. Just on to use round braces and arrow sine. To call this function, just on to follow our old method, just only to pass the function name and round braces. But if you have multiple line of code, in that case, also you can use calices. This kind of arrow function is very useful for reas, nods, otherwise, angular js. All modern Javascrip framework follow arrow function. Without wasting your time, let's start the practical and see the example of arrow functions. As you can see, side by side, I open my whistles to your code or and my browser using Lip Server extension, and I already create an STL document name index dot STML. Let's create an arrow function. To create an arrow function, first, we need to declare a variable. Late, and our variable me is welcome. Equal to I set the round races and welcome is our function name. I want to pass a parameter to our function, as parameter, I'm going to take name, and then we need to use arrow operator to create arrow function. Equal to greater than sine. Then in set the cast return, return Also, I'm going to use back techs. We already learned about back techs in our previous tutorial. I want to type, hello and welcome. Then I'm going to pass dollar sign. Inside the cases, I'm going to pass the parameter name, and subcu two n this line. This is a very simple and basic arrow function. Now I want to call this arrow function. To call this arrow function, I'm going to type document dot right inside the round ress I'm going to call the function. Welcome. Then inside the round ss, we'll have to pass the argument. As argument, well to pass the name. So to type at one Mang. And semi to end this line. We need to pass Advent Mang is a d double code because it's a string. After step this file, as you can see in my browser, it's paint, hello and welcome at one meg. This is how we can create arrow function. First, we need to assign a variable name for the function, then inside the round press. If you want to pass any parameter yes, you can, otherwise, you can skip it. Then you need to use arrow operator equal to greater than sine. Then inside the calss, you can pass. Here we use tempt string method to create this string, and if I return the type of this variable, it's going to return function. Let me prove you that. So to tie console, dot log inside the round ses hemo pass typo. Type up and the variable ms, welcome. And Semgal two in this line. If I save it, as you can see, in my cashle it print, it is a function. Now I'm going to reduce the size of this arrow function. I'm going to make it one liner. At first, I'm going to remove the c braces. And then also I'm going to remove written. Yes, we can remove written ke, if we use one liner. If we use only one parameter in our function, in that case, also we can reduce the round braces. If we set this file, as you can see, it's written the same result. There is no changes. Remember, this technique only work if we use one liner. This is it for this tutorial. In the next tutorial, we are going to learn rest operator. Thanks for watching this video, state you. 5. Rest Operator Tutorial : Hello guys good to see you back. This is the another tutorial related adverse Java strip. In this tutorial, we're going to learn rest operator. Rest operator introduced in Java script es six version. Before we understand rest operator, we need to understand function with multiple argu Be rest operator introduced to resolve argu related problem. Let me show you the problem. Suppose H we create a function names, and it's going to serve to numeric v. Then I'm going to print this value in my console. Whenever I call this function as a parameter, we need to pass total two value. In our case, 2030. This function going to work perfectly. But what? If we pass total three parameter, otherwise, four parameter. If we pass more than two value, then this function not going to perform this calculation, is going to throw an error because we create this function to add only two numbers. Before six version, Java step already provide a solution, where we need to create a function. Then we need to use a in function, which is arguments, and we need to use it with 44 in argument. This argument function going to create object. If we pass total two value, then using two value is going to create an object, similarly for three and similarly for four value. As you know, to print the object, we need to use foreign loop. But in our case, I want to return this sum value of these four arguments. For that, here I need to declare a variable. Late S as zero. As you know, our foreign lo going to run for every value of argument object. If we pass three value, then this going to run for three time. For that, every time we need to add new value to the some value. S plus equal to arguments and set the square process, we need to pass the index number of this object. Then at last, we need to print the sum value. I know you are already familiar with this process. This is the older method that we can achieve the result. This function going to work perfectly. But what? If we pass any string value in our argument, suppose I pass a string value in our first parameter. But our other two value is neweric v. This time, I want to add this two value, but I want to leave our string v. As you know, we cannot sum string value with numeric value. At the same way, if we pass other multiple values. In that case, this function not going to work properly to resolve this kind of problem, six version introduce rest operator. In rest operator, we move unused value in a other variable, and the rest value except this one, we stored it in other variable, and we make this variable an array, something like that. Here you can see in some function, we take total two parameter. Our first parameter is name. It's going to store the first string value in this variable. Then you can see total three dos. Three dots mean rest operator. How do we take a variable, rs, and you can take any variable. It's a PU, rs mean arguments. I mean the rest of the arguments, except first one. Except first one, it's going to store all the value in this argument, and this r become an ad, and this process is called rest operator. Now we need to run foreign lou only for this argument. I mean this ary, something like that. H we on a fue for late in RNs. It's mean all the item in this ara. If we want to sum this argument, we need to follow the same process. First, we need to declare a variable. Late sum, assign it zero. Then sum plus equal to RTS inside the square process, we need to pass the index number. Then next, we can print this value in our document otherwise. If we want to use the name, yes, we can. We can use the name. Otherwise, we can print the name differently. With the sum value, I want to print in the name. For that, call the log inside the round recess, we can use this variable. So, now you understand the problem. Why we use rest operator. Without wasting your time, let's start the practical and learn it in details. As you can see side by side, I open my visa studio code reader and my browser using Live Server extension, and I already created an estimate document name index dot, ATML. At first, inside the script tag, I'm going to create a function. For that, we need to use function cured. Function, and our function name is sum. Then round races. Then inside the crass. For now, I'm going to leave it blank. Then outside the carass, I want to call this function. I want to type some. Then inside the round races, here I'm going to pass total three arm. These are all numeric value, 20, and 40. Again, I'm going to duplicate this line, and this time, I'm going to pass total four argumen. Fi. Now I decide I want to pass a string value as R. Here I'm going to type a name, a string value, and the string value is add one Mane. Inside the double code, I'm going to type add one g. At the same way, I want to add a string value here, and here I'm going to pass a name and the name is Step Sm. And I'm going to set this file. Now I want to store the first argument in a different variable and rest of the argument in a different variable. For that, we need to use rest operator. For the name, I'm going to create a variable and the variable is name. Then we need to use rest operator. As I told you to use rest operator, we need to use three D. I mean the rest operator, and for the rest of the argument, I'm going to take a variable me, and the variable is total. This name pyramid are going to store the first argument. For the rest of the numeric arguments, I'm going to use total variable. Is an array. Now, in our function, with the name of the student, I want to print their total. First, I'm going to calculate the total. To calculate the total, we need to declare a variable. Lay it, and our variable name is sum. Sum as with zero. I'm going to make confuse the variable limp with function. That's why I'm going to use a in capital. Late sum equal to zero. Then I'm going to use fog in loop. For inside the round brass, late I in total. This four low going to run total three time, because hey pass total three value in total variable. Similarly next time, is going to run for four time, because Herr pass total four value. Then he set the four, I'm going to increment the sum value. So I'm going to type sum plus equal to total set the square res and seal to this line. It's going to return the total, and now I want to print student name with the total. For that, hemo type document dot right inside the round recess, I'm going to use back teas. Here I'm going to use, type the string method. Then inside the back teas, I'm going to type the total of dollar sign Crass, I'm going to pass this student name. N. I call the name variable. E is. Again, I'm going to use dollar sign, and inside the Cali rasas, this time, I'm going to call the total, means S, and Segal two in this line. Here we pass the name, which pass as an argument. Now, if I set this file, as you can see in my browser, it s on the result. But here we need to use a BA tag. I'm going to use concatenation sign and inside the double, I'm going to use BA tag. If I set this file again, you can see the result. The total ad M is 90, and the total step Smith is 140. If you want to pass another string argument in this function, yes, you can. You can pass multiple arguments. It is a PU. Hm to use coma and between the Ham to pass their college name. Av is from AIT, and Smith is pro IT. Now we need to store both the argument in a different variable. For Advan Mang, I'm going to save it in a name variable, and for MIT, I'm going to save it in a college variable. D. I decide I want to print their college name with total. Her type, the total of Advang is after print the Hal type space from again, I'm going to use Dollar stile inside the Cali college. If I set this file, you can see the result. The total number of ad one is 19 from MI. Now it's clear for you, what is the usage of rest operator and how it's work. Now the question is, is water is matter in rest operator? Yes, it's matter. If we change the water of the rest operator, let me show you, so I cut, and I'm going to use rest operator as first parameter. If I set this file, as you can see in my console, is going to write an O, Uncut syntax. Rest parameter must be last formal parameter. We cannot use rest operator at start position. I need to place it last position of the parameter. Then needs to work perfectly. Otherwise, it's not going to work. So this is it for this tutorial. In the next tutorial, we're going to learn spray operator. Thanks for watching this video, state tune for the next tutorial. 6. Spread Operator Tutorial : Hello, guys. Good to see you back. Once again, I'm back with a new tutorial related advanced Java sleep. In this trial, we're going to learn spread operator. In our previous tutorials, we'll learn about rest operator. This topic is pretty similar with rest operator. In this example, we learn how we can send string value with that. Also, we can set numeric value and perform calculation. In rest operator, we pass multiple numeric value. Rest operator basically convert this value into a array. Now, this situation is different. Now, we do not pass the numeric value as an argument. We stored it into a array, and now I decide I want to pass this array as an argument. Not the numbers, something like that. First, I want to pass the string value, then I want to pass the array. But if I send this numeric value as an array, then in our case, these Rs not going to perform the calculation because rest operator always expect we are going to pass multiple arguments. But we pass an r. And it say single argument. A varier. But it's story array value. Now, our s going to assume that all the value as a single value. To resolve this problem, Javascript introduce spray operator. Now, how it w, whenever we call the function and pass array value as an argument, we need to use three sine before the array name. In our case, do array. Basically, this spread operator going to spray this array. And then it pass all the value as an argument. Then our rest operator handle all the arguates, and convert it into a array again. This is the basic usage of spray operator. Basically, it spread the array and convert the array value in a multiple argue. Just one thing you need to remember. Whenever we call a function and pass an array value and before the rave use three sine, we call it spray operator. Spray operator only used when we call the function, and rest operator only used when we create the function. This is the basic difference between rest operator and spray operator, and there are a lot of usage of spray operator. We are going to learn it in practical session. Without wasting your time, let's start the practical. As you can see, side by side, I open my Visual Studio code editor and my browser using life Server extension, and I open my previous estable document. In our previous tutorial, we'll learn rest operator. As you can see, whenever we call the function, we need to pass multiple numeric arguments to calculate the sum value. Now I decide I want to start the numeric value in a area. For that, I going to create a variable. Late and our variable m is number. A new m equal to inside the square process, I'm going to pass the value. Some cut the value and I'm going to paste it here. Now number variable become an array. Now, I decide I want to send this array as an argument. Some type the variable lime. Now, and I'm going to set this file. After step this file, as you can see in my Bowser, it's not work. It print the exact array as a string. It do not perform any calculation. Now I'm going to use spread operator to spread the vdu and send as an argument. For that, as I told you, we need to use dot before the variable me. If I step this file, this time you can see the total of adv Mines 90 from MIT. Now it's work perfect. This is one of the best use of state operator. Let me show you another example with console. For that, I'm going to comment out all of this line. Also, I'm going to remove this one. Now, I want to print this array in my console. So I'll type console dot log inside the round process or variable m is numbed, and semicon two in this line. After step this file, as you can see in my console, it is an array, and it has total three, means total three v. 20, 30, and 40. But if I use spread operator, and then set this file. Now you can see it is not an array anymore. These are all different values. But if I use square basis, outside the variable, and then set this file again. Now you can see again, it become an n. Let me show you another example. Now, this is number one. Number one variable is an array. Then I want to pick at this line, and this is number two, and number two ait number one variable, number one. If I paint num two in my console, and this set this file, as you can see, is the array. Basically, I clone number one and store it number two variable. Now I want to add another value in our array one, means number one. I'm going to type num one p function. Push inside the round ss, I'm going to pass 50. And sem two in this line. After set this file, as you can see, in our consol, it add 50 in our num to variable. Because num two variable is clo up num one array. Now in number two, I'm going to spread the array values. Here, I'm going to use three d. Also, I'm going to move it in a square ss. And I'm going to set this file. This time, you can see it do not push 50 at num two variable. After using spray operator, first time it make a copy, but it's not t the num one variable. That's why this time, 50 is not pusting this error one. Also, using spray operator, we can concrete err. Let me show the example. First, I'm going to remove this line and I'm going to make it number two, another arr. W is going to store 50, 6078. This is going to store total four a, and this is going to store total three w. Now I'm going to create another variable. Lay it, and our variable m is num three. Num three, equal to set the square process, here I'm going to use spate operator. I want to concatenate both the ars. Use the sp operator. So type dot dot dot num one. C, I want to concatenate with num two, so type dot num two. And sum two in this line. If I print num three in our console, and then set this file, as you can see in my console, it successfully concatenate our array. Here we don't need to use concatenate function to concatenate both the array. We can concatenate using spray operator. Not only that, if you want to add more value in this array, yes, you can. Just you need to use coma and before the coma, you need to pass the v. I want to start this array 100 and this array with a string. I set the double cores to pass at one. And I'm going to set this file. After step this file, you can see that. This is how we can use spread operator for concatenation. Not only that, spread operator also work with objects. Let me show you. I'm going to comment out all of this. Here I'm going to create an object. Our first object name is OBJ, 01, 01 equal to set the calibraces. Here we need to use key value player. Our key is name. Name Colon colon at one Mg. Add one meg. Then I'm going to create our second object. I'm going to create this object, and O second object name is OG two, and here I'm going to use another k, which is H 23, and So n this line. I'm going to set this file. Now I'm going to march this two object using sp operator. I'm going to create another vari, that OBJ three, OG three equal to inset the cis is and here I'm going to use spray operator to march. OBJ OBJ one, and I want to concat in it with OG two. Again, I'm going to spray operator, OBJ two. And Semco in this line. Now, if I print O V three in my console, let me show you and then set this file, as you can see in my console, now this two object create one fingle object. In our object three, we have property and. This is how we can use spray operator. I hope now it's clear for you, what is the usage of spray operator. Thanks for watching this video, S tune for the next tutorial. 7. Object Literals Tutorial: Hello, guys, good to see you back. Once again, I'm back with another Tutorial related advanced Java screen. In this tutorial, we're going to learn object literals. If you are familiar with basic Java script, then you have already knowledge about objects. Now, Java script introduce some shortcuts in six version, that how we can enhance our objects. Basically, it's reduce the object syntax in six version. Basically, I'm going to give you total five and four examples that how we can use objects in six version. Let me show you the first example. Suppose we have a variable name, and this variable going to store a string v in our add one Mg, and now I'm going to use this variable in our object. As a value. Here I create a object and inside the class, I take a property which is name, and as value, I call the name variable. This is the older method to create an object. Now the shortcut is, if your variable name and property name is same, then simply you just need to create an object and just one time, you need to take property name. In our case, name. Here I use property name one time because our property and value name is same. Let me show you the practical how we can use it actual lie. As you can see, side by side, I open my user studio code editor and my browser using light Server extension, and I already created an estable document name index dot at. At first, I'm going to create two variables. Late, and our variable name is name. Name Assign, and I'm going to pass a string wel, which is add one Mm. So we're going to end this line. Then I'm going to take another variable, and our variable name is course. Course equal to B A. Means bachelor of r, and now I'm going to create an object using these two variables. For that, I'm going to type that our object name is B. Assign with inside the calibraces, our first property name is named. Colon and it assign name variable. After that, our second property is cos, cos, and for value, I'm going to assign s variable. Now I'm going to bring this object in my console, so type console. Dot log inside the rounds, I'm going to pass object name B j, and sug two in this line. After sep this file, as you can see my console print name and course. Now I'm going to use the shortcut. That is introduced in Java Set A six version. As I told you, if their property name and value name is same, then we can pass only the property name. Similarly, I'm going to use this value from courses. After step this file, as you can see my console, there is no changes. It's work perfect. Behind the scene, it's going to create a name property, also assign name variable as v. This is the first example of object literals. Now I'm going to show you another example which is related to object literals. But first, I'm going to comment out all of this section, and then I'm going to write some fresh codes. For the next example, first, I'm going to create an variable. Lay it, and our variable name is n assu double es string, and string names name. Seg two in this line. Then, I'm going to create an object, and our object name is OBJ. OB is that the cass he I'm to create a property using this variable. I mean name. For that, I'm not going to type this string. Here I'm going to call the variable. To use it, we need to use square ***. Isa square ss, I'm going to pass the variable name, which is K. Also, I'm going to assign a value. I'm going to use colon. Colon. After colon, I'm going to type, or value is at one M. Coma, also, I'm going to take another property and value. Our next property is course. Course colon is at the double course, and our course name is B A. This feature is introduced in ES six version. Before E six version, we can't do that. After set this file, as you can see my console, it's certainly same result. Not only that, also you can perform arithmetic calculation with this property. Suppose now I want to change the property name. I want to set it student name. For that, we can use Cctation sign. Let me show you. Here I want to use Cctation sign before the variable name. Inside the double codes, I'm going to pass student. If I set this file, as you can see in my console, now it's print student name. We successfully perform arithmetic calculation with our property name. This is only possible after version. Now, also if you want to exist only student name property, yes, you can. Just need to pass OBJ dot from here, I remove the spaces. Sum type student, Name. If I set this file, you can see the result. As you can see my console, directly print add one M. This is the second example of object liters. Now I'm going to show you the third example of object liters. But before I'm going to comment out this section, and then I'm going to page the same copy from my other section. Here, after coma, I'm going to create a function. Define a function, I'm going to use a property name, and our property name is detail. Detail colon, then Aram to create a function. For that we use function keyword. Function round ss, then inside the ciss just I'm going to return a string value. Return, then I'm going to use bats because we are going to use t string method, and Aramao type he enrolled in name. He enrolled in then I'm going to use dollar sign. Then inside the css, I'm going to pass the course name. So to call this variable. C. As you can see, this cores very well come from the object property, not any other particular variable. For that, we need to use this keyword because we create this function inside this particular object. So to type this dot cos. And if I print by object dot detail I also need to pass round braces. And the set this file. Now you can see it print, rod in B. This is the older method that we can create function in objects. In a six version, we can reduce the function. We can remove function key. Also, we don't need this colon sine. Also we can remove it. If I set this file, as you can see in my Csol, there is no changes. This is it for this tutorial. In the next tutorial, we're going to learn about this structuring array. Thanks for watching this video, state you. 8. Destructuring Array Tutorial : Hey, guys, good to see you back. Once again, I'm back with a new tutorial related adverse Java script. In this tal, we are going to learn this structuring array. This structuring array introduced in Java script, six version. Fore A six version, sometimes we need to assign ra value in a different variables, and it is a very lengthy process. Let me show you how. Suppose we have a variable m user, and in this variable prod, two value is an array, name and H. Now I want to assign both the value in different variable. For that, we need to assign a variable in our case name, then we need to call the array. Inside the square recess, we need to pass the array index number. For name, I pass zero. Similarly, for H, we need to pass one. As you know, our array start with zero index. But what? If we have multiple values in our array, suppose we have 100 value in this array. Then we need to type multiple lines to handle it. To reduce this much of court, Java script introduce destructuring array. Now we can assign the value in our variable like that. Here, we don't need to pass any index number, we need to pass the variable name. Then we need to assign it with the array. In our case, user. Then automatically, according to the variable serial number, it's going to assign the value to this variable. Suppose this first value assign with the first variable. Similarly, the second value assign with the second variable. So we don't need to type multiple line of code for that. Without wasting your time, let's start the practical and see how we can use. As you can see, side by side, I open my Visual Studio code and my browser using Live Server extension, and I already created an STL document name index dot HTML. So first, I'm going to create an ar. W is going to store total three value? So to type Late and our Nm is user. User AN inset the square ss, we need to pass total three value for our R. Our first value is user name, which is add one MM. And our second value is H, which is 25, and our third value is City, and he's from il. Then sug to end this line. Now, I'm going to use this structuring method to assign the array value in a variable. For that, we need to type late, then our array. I'm going to provide the variable name. O first variable is name. O second variable is H, and our third variable is setting. And this array, as user, and Smog in this line. Now I want to print name and a c value in our console. Yes, we can. So to type console dot log inside the round press our first variable me is, Name. Then semicon two in this line. Then I'm going to replicate this line total two. Our second value name is H, and our third value name is C. If I set this file, as you guys see my console, it printed name H and City. But what? If I remove one value from this ay, suppose I'm going to remove City value Del. And the set this file. In our case, is going to retain undefined. At the same way, if I remove the second value, then what. I'm going to remove 25 age value, and set this file. After set this file, as you can see, also it print undefined. Not only that, if we want to set any difat value to this very, yes, you can. Suppose our minimum age requirement is 20 some to pass 20, and I'm going to remove 25 from the. If I set this file, now you can see in my console, H is 20. But if I pass 25 in our array and then set this file, now become 25. This is how we can use differ values. Remember, this process not only work with simple array. It is also work with nested y. Let's create a nested array in this variable. After City name, I'm going to use coma, and again, I'm going to use square bases. Inside the square bases, I'm going to take gender gender male. With that, also, I'm going to take Celery $1. At the same way, if you want to store it in a variable, in that case, procoma, again, you need to use square ses, and the first variable m is Z. And the second variable m is s. If you want to print it in your console, just here, you need to pass the variable name. Suppose I want to print this celery. I want to pass the variable name. After set this file, as you can see in a console, it's print 1,000. This structuring array is a very special feature in Javas. Not only that, also, you can use rest operator with that. Let me show you how Som to duplicate this line and comment out previous one. I'm going to remove H, City and ender salary, and then he I'm to use waste operator dot dot g. Then I want to print g in my console. I'm going to comment out this line and m type console dot log gs. And also comment out this previous line. Are step this file, as you can see, now it's print, rest of the array values, H CT, and and another array. If I open this array, you can see the endl and celery. Now I'm going to show you how can we use destructuring array with function. But before, I'm going to comment out all of this line. So first, I'm going to create a function. Function and our function name is user. Then inside the round resis, this function going to take array as an argument. Then instead the square resis, I'm going to pass name, He, and star. Then inside the calor ses, I'm going to print the value in my document. I'm type document dot right inside the run ss, I'm going to type name No, I'm going to use template string method. I'm not going to use any congregnation sign. Is the back takes. Dollar inside the calibraces Name. With that, also I want to print age. Dollar inside the calibraces age. With that, also I want to print celery. Dollar, inside the Clrass celery, and seg two in this line. Using this structuring method, we can pass the array as an argument. Let me show you how. Just, you need to call the user function. User. Also, is that the square sis, we need to pass the values. For name, I'm going to type add one means, add one. For H, I'm going to pass 25, and for salary, also I'm want to pass 1,000 and Semar two in this line. If I set this file, as you can see in my brows p at 1:25 and 1,000. This is the one method that we can use this structuring array. But what? If I remove the parameter, let me show you. I'm to remove this parameter. I'm not going to sell any parameter. I'm going to comment of this line and mo type written QR. Return. A return, I'm going to pass those values directly to this function. I'm to cut this portion and I'm going to paste it here and subcort this line. Our user function is basically going to re this values. Now the question is in our function, we do not pass any parameter. We cannot send any argument to this function. Then how we can assign this value in a name variable? Yes, we can. Let me show you how Here, I'm going to tie late inside the square ss, I'm going to take the variables name. Or first variable is name, or second variable is H. The third variable is celery, and I'm going to assign this array with user function. User. That's it. Now, if I want to print this R without call the function, yes, we can because here we assign the function to this variable. I'm going to type document dot right inside the round recess, I want to print name, and Segra to end this line. If I set this file, as you can see in my browser, it just print the name, add one. This is how we can use detructuring array with functions. Thanks for watching this video, Sune for our next tutorial. 9. Destructuring objects in javascript : Adar, hello guys, good to see you back. Once again, I'm back with another tutorial related advanced Java. In this tutorial, we are going to learn this structuring object. In our previous tutorial, we'll learn about this structuring array. Also we learn how we can store array values in a different variables. At the same way, this structuring object works. As you can say, we create an object, and in this object, we have total two property and two value, Na and age. Now I want to set this value in a variable. Similar to A, also, we can assign variable to this varies. Something like that. Using this method, we can destructuring this object. First, you need to type late. Then inside the car ss, you need to pass the variable name. Remember, our variable name should match with property name. Then we need to assign this variable to this object. Then it's going to assign the name value to this name variable and the e value to this ge variable. Without resting your time, let's starting practical. As you can see, side by side, I open my result studio code editor and my browser using Live Server extension, and I already created an estim document name index dot t. Also, you can see in our script tag, we already create an object, late user. In this object, we have total three property and value, name, H and country. Now I'm going to start this value in a variable. For that, I'm going to use destructuring method, sound type late and inside the color ss, our first variable ms name, and our second variable m is H, and our third variable m is country. Then I'm going to assign it with an object, and our object name is user, and Segal two in this line. Now I want to print this variable in my browser. Here I'm going to type document dot right inside the round recess, I'm going to pass the variable name, which is cot. And sg to end this line. If I set this file, as you can see in my browser, strin country name, which is India. But if I remove this variable country and then set this file, now it's going to return an arrow. But if you remember, when you use the structuring method with A, there is not written an arrow. There is sN undefined. But for objects, that's going to return an error. If we do not assign any variable name, and if we use the variable, then it's going to return an error. Not only that, also we can take As name for this variable. Let me show you how. Suppose for name, I want to use a short form, which is n. For that, we need to use colon and I'm going to use n for name. If we want to print the name are from this object, then we can use the Ai's name. Here I to type the mend right n. If I set this file, you can see the result. Also it print ad one M here n represent the name variable. This is it for this tutorial. Thanks for watching this video, Ste tune for the next Tutorial. I hope you 10. Intro oop : This is the introduction of object oriented programming in JavaScript. It was known as Op, Op stands for object oriented programming, and It was introduced in e six version of JavaScript. Object oriented programming is a coding methology or a style or a pattern. It is introduced to convert our big line of code into a smaller line of code. With this, we can make our code more modular and reusable. That we can use that code over and over again. It make our code well organized, and that's make our code very easier to debug. Debug mean if there's an error in our code. And the method, the catching the error is called debug. Basically, we do not use object oriented programming for small task. It is used for big and complex projects. It is currently using various Javascript framer like a Jase angular Jase Voyages, and these are all based on modern javascript. If you want to understand object oriented programming, First, you need to understand two terms. First one is class, and second one is object. If you understand this two concept, then you understand 50% object orted program, and the concept used in every high level programming language. At first, let's try to understand what is class and objects. Let's try to explain it with graphical images. Suppose we have a blueprint of a building, and a builder built houses with this blueprint. According to the blueprint, every building the builder make is similar. All building designs are identical. As you can see, the blueprint has three bedroom and one kitchen. So every building is pretty similar. You can accept our blueprint as a class, and all the buildings made by this blueprint are objects. The point is objects are made with this class. Let me show you another example. And it little advance. Suppose we have a class nin car, and these are two actual cars. First one is Marti sit and second one is Toyota fortunar. We create a class nin car, and our actual cars are objects, which is made by the car class. As you know, every car have some common properties. Like their color, engine, seat, their SC, and their prices. We call them properties in programming language, and these properties are associated with one or more classes. Every class have their own property. As you can see, we have two actual cars, swift and fortunar. Their properties are same, but their value is different. As you can see, Marthy have four color option, but Tota have five color option. Marti provide 12 C z. And Toyota provide 2,700 CC engine, Mali provide five seat, and Toyota provide seven sat, and both the car provide a C. Also, you can see there is use price different between these two car. Properties are basically a variable, and we can say different value for this variable. If you want to change and manipulate the values, then you need to use methods. Our classes are made with property and methods. Suppose I create a class name calculation. Then I create some variable as properties. We declared this three variable within this class. If you want to assign values to these properties, you need methods. Methods are basically functions. Suppose we want to add numbers. I'm going to create a function name sum. As you can see, we perform some calculation in this function. First, we take a variable name C, and then I add two variables A and B, and we return C. We can use only those property in our method, which we already declare in our class, and we cannot use properties, which is defined in outside the classes. Here you can see, we just create one method in our class. But you can create multiple methods in this class. At the same way, I'm going to create another method name Sub. Sub mean subtraction. Let me show you the syntax, how we can declare class. Also, I'm going to show you how we can create property and methods. Suppose I'm going to create a class name hell. First, we need to type class word then our class name, which is hello. Then inside the calibraces, hell we need to create properties and method inside this class. Suppose I want to create a method name mess. For that, first, we need to take the method name. In our case, masses, it's a normal function. Just hero we don't need to use function ord before the function name. At the same way for parameters, we need to use parentheses. Then inside the calprass, we can define our masses. In our case, I want to print hello everyone in our console. Now, masse become a method. You can create multiple method in a class. If you want to call this method, first, you need to create an object using this class. First, we need to take a variable in our case A and A as this class. Also to ascend this class, we need to use new QR, then our class name. This will turn our variable into an object. After creating this object, we can excess all the properties and methods from this class. Suppose I want to call Masse method. Then first, we need to type the object name in our case A, A dot method name message. And if you want to send any argument, then you can do. Usually, we need to read for function. This is it for this tutorial. In the next tutorial, we're going to learn about practical. Thanks for watching this video, state tune for the next tutorial. 11. object oriented programming practical: Hey, guys, good to see you BA. This is the second tutorial related object oriented program. As you can see, side by side, I open my Visa studio code editor and my browser using Lip Server extension, and I already create an estable document name index dot ATM. Inside the script tag, first, I'm going to create a class to create a class in Java Script, we need to use class QR. Class, then we need to say the class name, and our class name is hello. Then in the Class, here I'm going to pass a message. Basically, I'm going to define a method name message. So I'm going to type message round ss. Then I say the crass. Here I'm going to print C log, I say the round ss, I say the double codes, I'm going to print a message. Hello, everyone. And then Seminar two in this line. Whenever user call this method from this class, then it's going to print this message. Hello, everyone. As I told you, to call this method from this class, we create an object using this class. Let's create an object using this class. Late and our variable is A, A equal to to create an object, we need to use new. New, then we need to call the class name, hello. Now, a variable become an object, which is made with hello class. Now I want to call message method. For that, we need to type A dot message. So we're going to end this line. If I set this file, as you can see in my console, it print hello everyone. Now you understand, first, we need to create a class. Then you set this class, we have a method, message. If you want to call this method, then first, you need to create an object using this class. In our case, A, then you can call this method from this class. Now, let's talk about more about methods. In Java Step, we have total three type of methods. Our first method is constructor method. Second one is prototype method, and third one is static method, and we are going to start with constructor method. To create a constructor method, we don't need to take any constructor name. Let me show you how. Here, I'm going to create a constructor method. For that, just we need to type on the constructor. Constructor round brass and inside the calss, you can pass your message. Suppose H I'm going to type console dot log inside the round sis. I'm going to type. Welcome. And semicon two in this line. Remember, to create an constructor method, you don't need to take any name. Just you need to type constructor Q word. Now the question is, what is the purpose of this method? Whenever we create an object using this class, then constructor method automatically call. We don't need to call it by our see. It automatically run. Now, if I comment out this line and set this file again, see, it automatically run the constructor method, so it's sprain welcome. Here I just create an object using this class, but I do not call the particular any method. Similarly, if I create another object using the same class, so I want to duplicate this line, and here I to type B, and set this file. A set this file, as you can see, again, it print will come in our consume. First, it run for A object, then it run for, B object. Now we're going to learn about properties. Also we are going to learn how we can assign value in properties. There is two options that we can do it. First, I'm going to show you a basic method. Revoke this line. Listen carefully. Whenever we need to declare an property to end class, we need to declare it inside the constructor method. Suppose I want to declare a variable. Properties are asically a variable, nothing else. So I'm going to declare a property, L late, and our property name is name, then seco in the line. How do we declare a property? Now I want to use this property. I want to use this property in our message method. I'm going to remove everyone and I'm going to use congregation sign. Also you can use bati If you are familiar with tat string method. Then I want to con name variable. For that, we need to use this keyword. This means the object. D name. Now we set a property in this class. Also we use this property, but we do not send any value. Now we need to set a value to this property. How we can do it? For that, we need to use the object name. In our case, A, A, and I want to say, Name, assign it, and here, you can pass the student name, which is a Ming, and then smog to in this line. Now, again, I want to print the message in my console. I'm going to uncommen this line and set this file. At this file, as you can see my console, now it's print. Hello at one Mg. If I provide a little space and save again, now you can see it correctly. Hello, at one Mg. With that, also, you can see another message from our constructor method. As I told you, we don't need to call constructor method. It's automatically run when we create an object using this class, and there is a short cutway that we can assign value to our properties. For that, here we need to take a parameter in our constructor method. I'm going to take a name as parameter. And I'm going to assign a name to this variable, a name. Now we don't need to create this line to assign this value to this variable. I want to comment out this line and from here, I'm going to copy at one meg. Whenever we create a object using this class, we can pass the value. It's like a function. If I set this file, you can see the same result. I think I did some mystic because here we don't need to declare late keyword. I'm going to remove late. This time, I'm going to use this keyword. This dot name. This Q word represent the object. If I set this file, now you can see now it's print hello at one mage. It's pretty similar with function. Isn't it? Yes, it is. Here you can define multiple properties as much as you want. Now, let's talk about prototype method. This is the example of prototype method. For that, you need to take the method name, and prototype method do not run automatically. To run this prototype method, we need to call it, and our last method is static method. To create static method, we need to use static keyword. Let me show you. Here I want to create a method, which is static method. Som type, static. Then we need to take a method name. In our case, our method name is full name. Then you need to use round brass. Then inside the Cal ress, you can print anything. Doc dot right inside the round recess inside the double codes. Student name is at one meg. Now you decide you are going to call the static method from this object. Let's call the static method. A dot similar in this line. If I set this file, it's not going to work. It's going to throw. Yes. We don't need to create an object to call a static method. We can call static method without creating a object. To call the static method, we need to use the class name. In our case, hello. Let me show you how we can use. Here I'm going to type our class name. Hello dot full name function. Then set in this line. If I save this file, you can see the result. As you can see in my browser, now it calls the static method at print, Scrutin name is at one mange. As I told you, class is a blueprint, otherwise a template. We can use class multiple time to create objects. So this is it for this tutorial. Thanks for watching this video, S tune for the next Tutorial. In the next tutorial we're going to learn about in tens. 12. inheritance in oop: Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related advanced Javascript. In this tutorial, we're going to learn about promises. Promise, introducing Javascript six version. Let's try to understand promises with graphical images. Suppose this is you, and this is your friend. Your friend calls you and says, longtime nose, Let's meet, and you replied, Let's meet tomorrow. It's mean you made a promise to your friend that you are going to meet him tomorrow. Now we can define this promise in three stages. Our first stage is pending. Your promise will remain pending until tomorrow, and if you meet your friend tomorrow, then you have fulfilled the promise. This is the second stage of promise. Then come the third stage, which is resected. If for any reason, you get busy, and you can't fulfill your promise, then you have to resect the promise. These are the three stages of promise, pending, ful pill and resected. Now the question is, what we usually do based on promises. You decide if you fulfill the promises, then you will go to the eat at the restaurant, and if you resect the promise, then you will meet another day. Both the results depend on your promise. At the same way, JavaSP promise method works. We have a method name promise. Then inside this promise, we specify a condition, and based on this condition, it returned to results. Otherwise, resolve, otherwise, resect. If our condition resolved, now we can use a new function called then. Inside the then function, we are going to decide if our promise resolved, then what we are going to do. As I told you, if you meet your friend tomorrow, then you will go to the restaurant, and if our condition is resected, then we call another function name catch. Both the functions are cave function. These are all in ll function from JavaScript. But you can take any function name for result function and respect function. It is a PU. This is the promise method, which is introduced in Java script s is version. Now, let's talk about the syntax, how we can use promise method in JavaScript. First, we need to take a variable. Then in this variable, we need to define a new promise. Now these variables become object promise. As I told you, we define a function inside this promise method. This is how we can do it. Here we create a function inside this promise, and also we can take arrow function. Basically in this function, here we need to pass total two parameter. In our case, resolve and rest, and you can take any name for this parameter. If your promise is satisfied, then you can call result function, and if your promise failed, then you can call resect function. Now the question is how we can call the functions. For that, we can create a condition. Something like that. As you can see in this promise, hell create a if else condition. You can set your own condition, it is up to you, and if your condition is fulfilled, then you can call result function. If your condition fail, then in at the L start, you can call rest function. You don't need to create the function anywhere, you need to call the function. As I told you, if your promises resolve, otherwise, rest for the further work, we can create another function. In our case, on fulfillment. It's mean, whenever we call the result function, it's going to call this function, and whatever result function written, we can store it in a variable. In our case, result, and Here you can take any variable name. At the same way for result, here do you create another function, which is on resection. If this function going to return anything, then we can store it in our variable. Then we're going to print it in our console. As I told you, you can take any name for these variables. Now, this two function will not be called by itself. These are not cave functions. To call this two function, Java stip come with some in function, which is then and catch. I already told about it. These two functions are cave function. If our condition resolved, then it automatically call then function, and the then function called on fulfillment function, and if our condition is res, then it's automatically called this **** function name catch. And it's going to call this function on resction. Then function going to call on fulfillment function, and catch function going to call on resction function. Let's summarize the topic. At first, we're going to create a promise, and inside the promise, we're going to create a function. In this function, here we need to take two variables. Our first variable is for success, and our second variable is for failure. Then we create a condition inside this promise. If the condition is satisfied, then it's going to call resolve, and if the condition is failed, then it's called rest. If resolved function call, then automatically it's called this cove function name then, and I rest function called, then it's automatically called the cove function name catch. Now you might have question how we can send argument to these functions. For our functions, as you can see, we have parameters, result and error. How we can send the value to this function. Whenever we call, resolve, otherwise, rest function with this function, we send the value. As you can see, here is success, here is failure. Whenever we call on fulfillment function, this mass is going to assign to this variable name result. At the same way, it's worked for on resction. This is it for this tutorial. In the next tutorial, we're going to start the practical. Thanks for watching this video, state for the next tutorial. 13. Inheritance practical: So as you can see side by side, I open my vessel to your code editor and my browser using Live Server extension, and I already created an est document name index dot at. At first, inside the script tag, I'm going to create a class. For that, we need to use class QR, class employ. Then in set the Css, I'm going to create a constructor method, as you know, to create a constructor method, we need to use constructor d, Constructor and round brass. Then in set the Css, H print a statement in our console. Sound type console dot log inside the rounds, Hm type, I employee. And sem two in this line. Now, let's create an object using this class. For that, I'm going to create a variable late and our variable name is A, A, assign it, new. As I told you, to create an object, we need to use new keyword, and our class name, which is employee. Then smog to in this line. If I set this file, as you can see in my console, it print I am employee. H I TA spelling mistake. For employee, we need to type E not I. If I set this file, you can see the result. I am employee. As we know, in our previous tutorial, we'll learn constructor method run automatic. We don't need to call it through our obst. Now I decide I want to create another class. For that, I'm going to type class Q word, and our new class name is manager. Manager and this class inherit with employee class. As I told you to inherit with another class, we need to use extend kd, extend, extends employee. Then in set the cases, for now, I'm not going to type anything. Just our manager class in to employee class, and now I decide I'm going to create an object with employee class. I'm going to comment out this line, and in the next line, I'm going to create a variable late and our variable is B, B and manager class. To create an B object, would to use new Q, new manager, then sim to in this line. If I set this file, as you can see, also it print in my console, I am employee. But if you notice, you can see in manager class, you don't have any constructor method, but we can access employee class method using manager class because our manager class in to employee class. In that case, employee class is a base class and manager class is a direct class. Now I decide I want to send an argument to the manager class. Here, I'm going to pass a name, and I'm going to type add one means. Ad one means. As I told you, we need to handle properties in our constructor method. Here we need to take a variable. O variable name is name, and then I want to print the name in my console. Here I'm going to pass name variable with that, I'm going to use conggation sign. If I set this file, as you can see in my browser, it print adv mean, I am employee. Now the question is, what happened? If I create the same constructor class in manager class, let's copy the constructor and I'm going to paste it inside the manager class. For now, I don't want to send any argument to this constructor. I want to remove this line, and H I to type, I am manager. If I set this file, this time, first it's going to print, this line, then it's going to return an error. Let me show you. If I set this file, as you can see, first it print, I am manager. Then it print an error message and say, must call super Constructor. As you can see, our object made with manager class, and constructor method available in both the class. Both the classes hold the same exact method and B object made with manager class. That's why we can see this message. I am manager. And if you want to excess only the particular dis constructor, I want to say the base class constructor, then you need to use super function. Here, we need to use super function, sum type, super and Sem in this line. If I set this file, it's going to work, but also it return undefined. Let me show you. If I set this file as you can see, undefined, IM employee. If we want to handle this argument in our manager constructor, in that case, we need to take the variable name name. Also, I'm going to use this name here. Name Cctint to it, I am manager. If I set this file, as you can see, add one means, I am manager. Remember, if we use same constructor in our direct class, then we cannot send data to our base class because here we use the exact constructor. Because super function doesn't allow it. Now, let's talk about prototype method, how we can use prototype method in tens. At first, I'm going to comment out this constructor method in our manager class. Then in our employee class, mean base class, here I'm going to create a prototype method, some type the method name, which is in. Inset the caliss, Ham print console dot log, I am employee, and so we can do in this line. With that, I want to print the employee name. But as you know, if we want to use this property, then we need to store it in a variable. For that, I'm going to type this dot name equal to name. Now we can use name variable in my prototype method. Here I'm going to use upper congregation sign, I am employee. I'm going to type this dot name. Let's change the variable name to avoid the confusion. I'm want to assign a new name which is am stands for employe name. Also, we need to type this dot name here. If we want to call this variable. Now I decide I want to excess this prototype method using manager class. But we create the prototype method in employee class. But as you know, our class extend to employee class, that's why we can use it. Let's use this probe method. For that, as you know, we need to call the object name. B, B tout our method name, which is info, and SemGro two in this line. If I set this file, as you can see in my console, it print I am employee at one page. But if I use the same prototype method in our manager class, I'm going to copy this prote method, and I'm going to paste it inset the manager class. I'm going to change a little bit. I am manager. If I set this file, this time you can see, Harry print, I am manager and one mage. Because this time, this prototype method available in its own class, and our object made with this class, not the employee class. That's why it's called its own method. But now you decide, you are not going to use manager class probe method. You want to excess employee class probe method, mean base class. As I told you, he toe super function. For that, you need to type super do you need to pass the prototype name, and the prototype name is info. Then you need to pass the round basis and semi in this line. If we set this file, as you can see my console, now it's screened, I am manager. Here you can see my console, first it print, I am employee at one Mage. This line is from employee class, and next it print, I am manager at one Mage. This line is from manager class. Not only that, also you can change the wader of this program method. Suppose now you want first you want to print, I am manager at one Mage. Then you want to print, I am employee at one Mage. For that, just to change the super function order. So I move the super function build then console law. If I set this file, as you can see, now the order is changed. And now I'm going to show you the real example. Why and how we are going to use in heightens. As you can see, we have total two classes, employee, and manager. Now I decide I'm going to take two more argument, H and height. Her pass in our constructor method, H, height, and to sort this property in a variable, I'm going to take two other variable. Hm type these dot e equal to H. Clon this dot height E height equal to height and sem line. Now I decide I want to display all the information in this infer function. I'm going to comment out this line and helm type document Dot. Is the round ss, here, I'm going to use template string method. I used a ti. If you are not familiar with template string method, it is the new feature of e six version. Here we don't need to use any concatnion side. I hope you are already familiar with that. Is this a ti, first, I'm going to print a heading tag. For that, I'm going to use estL tag, H two tag, H two. Then inset this a two tag amo type employs. Then I'm going to close the A two tag. A two stars for heading to tag. A two close. Then I'm going to print name. Name colon, and I'm going to call the variable. The first variable is for name, we say e Name variable. I'm going to copy this dot E name, and to p to use this variable, hero in to use dollar sign and inside the calices, I'm going to paste the variable name. This dot E name, and also I'm going to use a tag to break the line. Then I duplicate this line two time, and for H, mo type H. This dot E age, and for height, I'm going to type height, this dot E height, and semicon two in this line, and I don't need this info function from manager class. I'm going to comment out this line, and with name, I'm going to pass s rudent age, which is 24. Also I'm going to pass prudent height, which is in the double course 175 centimeter. If I set this file, as you can see in my browser, print employee name H and height, name advantage H 24 height 175 centimeter. Now I decide I want to print the same information for the manager. Some copy is pro method, and I'm going to paste in set the manager class. But now I want to add new property to this method, and our new property is se, Some tile late se salary equal to $1. Also want to change the heading text, employ to manager. In addition, with the information, I want to print manager salty. I want to pig this line and amo type salary. And also to pass the variable name salary. If I set this file, as you can see in my browser, now sprint manager. Name add one M H 24 height 175 centimeter. Also a pin the salary, $100, to clear it down, let create another object. I to get this line. This time, our object name is smell, and this object made with manager class. I'm going to change the name Sm. And his edges 28, and his height is 170 1 centimeter, and now I want to print Smith information in my browser. Here I'm going to call Smith dot info function. If I set this file, as you can see, now it's print all the information about Smith. This is the example of single level inheritance because here our class extend with only one class. Our manager class extend with employee class. But now I'm going to show you multi level inheritance. This is employee class. This is manager class, extend with employee, and now I'm going to create another class. Class and our next class is boss. Boss class, extend with manager class. Now Boss can excess manager information, also, he can exist in Do information, but manager and employee cannot excess boss information. Then I'm going to comment out this line. Now our Smith object made it boss class, boss. I'm going to set this file. After set this file, now you can see, it print all the information from the manager class because in our boss class, we don't have any info method. But what? If we comment out the info method, so I'm going to comment out this method. From the manager class. Now you can see, this info Methode is only available in employee class. If I save this time, now you can see, now it print the prototype constructor from the employee class. That's why it do not print the salary value. Our boss can excess manager class information, also, it can excess employee class information. Information means all the constructor and properties. In that way, multi level in hits work. This is the little example of hitens, and I Hitens is the most important part of the object oriented programming. Thanks for watching this video, Stay Tuned for the Next Tutorial. 14. Js Module Introduction: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related advanced Javasc In this tutorial, we're going to learn what is mode. Let's try to understand modules with graphical pictures. Suppose we have two JavaScript file, file one Js and file two dot js. In file one dot js, we declare some variable cars functions, also, we create some classes. Now I want to use this variable function and classes in file two. It is not mandatory that I'm going to use all of the variables function and classes. I want to run any particular function. Otherwise, I want to call any particular variable. For that, Java script introduce modules. Using modules, we can use Jati function variable classes in other files. It's increase our code reusability and it is very easy to maintain. Also it reduces est page loading. In our file one to JS, we have a lot of functions, but I want to decide I want to use only one function. Then I'm going to improve this function in our file two. Then we can link this file two with our estable document. That's why our STL file become so fast. In JavaScript module, it's come with two functions. First one is export function, and second one is import function. Let's see how we can use this two function in our cop. As I told you, we have total two file, 51 dot js and 52 dot js. In file one, he I declared a variable name, a function, allow, and a class, which is user. Now I decide I want to use name variable in file two. I don't want to use Hallow function and user class. For that, we need to use a keyword, and the keyword is export. This export keyword, keep this variable permission that we can use it in other files. Whenever we need to use this variable in file two, then we need to write a special statement. Something like that. At first, we need to type import keyword, and then we need to use ses. Then inside the ses, we need to pass the variable name, which variable I want to import from file one file. Then we need to type from and after that, we need to pass the file location, from which file I want to import this variable. If you notice, you can see before file one dot s, here I use some special characters. Dot backslash. Whenever we use modules, we need to provide our file part like that, and you need to remember this. Now I decide I want to use the name variable in file two. We can use this variable as like other variables. We can print it in our console. Also, we can print it in our document with that, we can perform calculations. At the same way, if we want to export this function, yes, just want to type export t before the function name. Then we can use this function in 52 dot JS file. Here we need to import the function. Import inside the Clerass, Just need to pass the function name. No any parentheses, otherwise, crass, just function name. Then we can use this function like other functions. At the same way, you can export this class, and you need to follow the same procedure to import this class from the file one s. Then we can create objects using this class. If you want to import variable function and class at once, yes, you can. Just a to import inside the crass, you need to pass the variable name, then you need to use comma, then you need to pass the function and class name. Then you don't need to type multiple import keyword. Now you want to import this JS file in your est documents. For that, just you need to do same thing, but inside the script tag, you need to provide the type module. Just you need to declare that this is a module file. Then a source, you need to follow the relative path dot backslash. This is the introduction Tutorial of module. In the next tutorial, we are going to start the practical. Thanks for watching this video, Stadium for the next tutorial. 15. Advance Javascript Modules Tutorial : So as you can see, side by side, I open my so Studio code editor and my browser using Lb Server extension, and I already create an estimL document named index dot estimL. With that, we create some JavaScript file, Minds, library dot gas, and mediator dots. These are all D file. If I show you my Index dot eL file, as you can see, here we use script tag, and inside the script tag, we use type mode. Also we provide a source source, and this is the source put. We link our Minto JS file with this eTML file. Also, we have live dot JS file, where I'm going to create our variable function and classes. One most important thing you need to remember. Modules are work with only Lip servers. If you do not use Lp server, then you cannot use modules. You can use live server extensions. Otherwise, you can use Z or AM. Here, I'm not going to explain you how we can use Lip servers because it's an advanced tutorial. I hope you are already familiar with Lip server extensions, and then I'm going jump into the library dot has file. In this file, we are going to create all the variables function and classes. At first, I'm going to create a variable. I'm going to type late, late, our variable s message. Message equal to inside the double course, Hermon type a string, which is e six moules. Then semicon two in this line. It is a normal variable. We cannot use this variable in other files. If we want to use this variable in other files for that from starting type, We can use this variable in other files. I'm going to set this file and now I want to use this variable in Minto JS file. Here, I'm going to import this variable. As I told you for import this variable, we need to use import Q import. There is set the cultiss, we need to pass the variable m and the variable m is message. From then we need to pass the file path. But before the file path, as I told you, is the modu. We need to follow these characters, dot Baslas. Dot backslash vary. This is our file, and semicon two in this slide. Now we are able to use this very well in this file. Now I'm going to print this variable in our console. I motype console dot log inside the round recess, our variable name, message. And semicon to in this line. After step this file, as you can see, it's not working because I am an idiot, and I do not pass the extension of this file. Library dot js is a JavaScript file, so you need to pass the extension. After step this file, now you can see my console, I print six volumes. Not only that, if you want to print this message in your estimate page, yes, you can. For that, you need to use JavaScript down. Some to comment out this line and next, I'm going to type document dot body dot inner estim equal to the variable message. I'm going to say this file. A precept this file, you can see my browser, print e six modules. Now I'm going to uncommen this line and back to the library dot file. Here, I'm going to create a function, and I want to export this function, so I'm going to type the ex pot. Then I'm going to use function Q to create a function function, and our function name is user. And I don't want to pass any parameter. Then inside the crass, H type console dot log inside the round ss, I'm going to pret a statement. Hello everyone. And Semgra to in this line. Now we need to import this function. Let's back to the Mind file, and after message, I want to import user function user. As I told you, for function, we don't need to take any paralsss. If you want to call this function, just you need to type the function name, user, and parentheses, as like function. After step this file, as you can see in the console, hello everyone. If you want to pass any argument to this function, yes, you can. Just inside the double course, H I to pass the argument. I want to pass a name, which is add one Me. Add one Mg, and I'm going to set this file. Then I'm going back to the LBJ file, and also I'm going to take this argument. For that, we need to take a variable, which is name, and I want to use it console. Inside the console, I'm going to use back takes. Inside the back takes, I'm going to type hello dollar sign inside the Calise our variable name, which is name. If I set this file, you can see the result, hello, add Mg. This is work as like other functions. There is no difference. Now, let's create a class in L V dot file. First, I'm going to type port. Export, then I'm going to create a class. We need to use class Qd, then our class name, and I'm going to say, taste. I at the crass, I'm going to create a constructor method. Constructor, and in this constructor method, I'm going to print a statement. Some type console dot log, I at the round brass, am type constructor method. Then seve two in this line. Whenever we create an object using this class, it automatically call the constructor method. Now lets back to the main Do file, and we need to import this class. We need to pass the class name taste. Then we need to create an object using this class. Type, and our object name is A, A equal to new object, New taste. And semicon to in this line. If I set this file, as you can see in my console, is print constructor method. Also it print hello adv Mage from our function. Somehow to comment out this line. And save it again. Now let's back to the vedo file. As you can see, we use export Qt multiple time for variable for function for our class. There is another method that we can export all of these in a single line. Let me show you how it's work. So I mo type export key, export, then inside the clibrass, we need to pass the variable and function and classes names. O variable means message. I want to export message. Also I want to export the function user. And the same way, I want to export class, taste. Then sub to in this line. Now we need to remove the export keywords from these positions. First, I remove export Qd from the class, then I remove export Qd from the function, and at last, I'm going to remove export ord from our variable. If I set this file, as you can see, in my browser, it written the same result. There is no changes. This is another way that we can use export kd and export our functions variable end classes. Notary that, also we can take Allis Name. Let's back to the MindoS file. I want to take Allis name for taste. I mo type ape taste, as T. Now we don't need to type taste to create a new object using taste class. Because heretic allies name. I'm going to remove taste and just I'm going to type t. Let's stifle and see, is it work properly or not? After set this file, as you can see in our console, it's also print constructor method. I mean it's work perfectly. But what if I type the real mb, let's type taste. If I step this file, it's going to throw an arrow. Let me show it. After step this file, as you can see Maz, is written an arrow. Now, if we take Ai's name, then we need to use only the allies name, not being real name. Now, let's back to the Live do J file. Suppose we have a lot of variables, lot of function, and a lot of classes, and I want to use all of these. Then you might think you need to tie the variable name every time. No, it is not. If you want to import all of these variable function and classes, you can do it just once. So to pigt this line and comment out previous one. Here we can follow a new method to import. Let me show you how. After import Qd, I'm going to use a sin, star sign. Star mean everything. Also, we can take a As name as n stars module, and you can take your N name for A name. Now we need to use this Q word. Let me show you how. Suppose in our console, I want to print the message. This time, we need to use dot message. With that, I want to call the function user. In that case, we need to type m dot user. For the class name, here need to pass M dot, our class name. If I set this file, you can see in my console, it's working. This time, our class not work because this time our class is not working, because here we use the allied name. Now, we need to use the real name because we comment out this line. To set this file, you can see the result. Why it's written undefined. Maybe there is a typing zero. Yes, it's a typing zero. If I remove this message and save it again, now you can see the result, six module, hello advanage, constructor methyl. This star sine reduce our code. Just using one star, we can call all of these methods, classes, functions, variables asset. This is it for this tutorial. In the next turial, we're going to learn default function. 16. Advance Javascript Modules Tutorial 2: Hello, guys, good to see you back. This is another part of this module tutorial. Today in this tutorial, we are going to learn default function. Modal came with a default function. Let's see how we can create this function. Also, we're going to see how we can use it. Let's back to the Lb do JS file. First, I'm going to comment out all of the school, and then I'm going to create default function. To create default function, we need to use default Q, default. Default function. Then parenthesis. Then inside the round process, this difat function basically represent the whole fine. With that, also I want to export this function. Hm type, export que, export, and Hmoype something. So type console dot love inside the round process inside the double hell. And sect in this line. Now, leads back to the Min Do file. Also, I'm going to comment out all of this code, and I'm going to dbligate this line and comment out previous one. To import default function, we need to use the same process. Let me show you how. So to remove the star sines and inside the cals I'm going to pass the function name, which is default, default. Also, we need to take Aizename, as B. D. Now we can call this function. Here type B, and Sem two in this line. Appears of this file, as you can see in my browser, is written, hello. We don't need to take any name for this function. Whenever we call this function, otherwise, import this function, we take as name for this function. Now, at last, I'm going to introduce you another feature of mod, which is known as aggregate module. Here we're going to learn how we can use multiple module in a file. At first, I'm going to comment out this line. Then I'm going to uncomment this import line. With that, let's go to the L der JS file. From L der J file, first, I'm going to comment out this line, I don't need this line for now, and also I'm going to uncomment this export line. I want to export only user function. Nothing else. With that, we need to uncomment this user function. The Also, I'm not going to pass any argument. I remove this arguments, and here I'm going to type simply a text. Hello world. And I'm going to set this file. So in this library function, we have only one function name user. If you notice, you can see we have another file. Medio Toto Js. Let's jump into this file. This file going to play the role of a bridge between these two file, mains and library Js. For you better understand, I'm going to move this file between this livery and main Js. In our live JS file, here we export user function. Here I use the main JS file. In our Stable file, we include the Min dot JS file. But in main dot JS file, here I'm going to change the import file path. This time, I'm going to re this line and comment out previous one. This time I want to import mediator dot js. H type mediator dot js file, and I want to import the particular user function. Here I'm going to remove the allies name and start sign and inside the caliss amotye user. Now the question is, we do not create user function in meet dot JS file. In the meteor dot JS file, I'm going to import the function from L A JS file. Some type import inside the inside the class or function name user from live dot JS file. Live dot J. I'm going to set this file. In our mediator file, we import the user function from L dot js. Then in our main dot file, we import the user function from meteoro dot JS file. But if I set this files, it's going to return an error, something like that. It is a syntax error. Hand print, mediator to Js does not provide an export named user. To resolve this problem, if we want to use any breeze file for that, he need to use export. I do we get at this line and comment out previous one and here we need to type x Now, if I set this file, now you can see there is no error in my consume. In our Mando e file, if I call user function, and remove the argument because this time I do not handle any argument in our user function. Accept this file, you can see the result. Now it's print hello world. So fast, we export from library to mediator. Then from the mediator, we export Mando JS file. This is it for this tutorial. In the next Tutorial, we're going to learn about promises. Thanks for watching this video, Stun for the next tutorial. 17. Advance JavaScript - Promise Tutorial: Hello, guys, good to see you back. Once again, I'm back with a new Tutorial related advanced Javascript. In this tutorial, we're going to learn about promises. Promise, introducing Javascript six version. Let's try to understand promises with graphical images. Suppose this is you, and this is your friend. Your friend calls you and says, longtime nose, Let's meet, and you replied, Let's meet tomorrow. It's mean you made a promise to your friend that you are going to meet him tomorrow. Now we can define this promise in three stages. Our first stage is pending. Your promise will remain pending until tomorrow, and if you meet your friend tomorrow, then you have fulfilled the promise. This is the second stage of promise. Then come the third stage, which is resected. If for any reason, you get busy, and you can't fulfill your promise, then you have to resect the promise. These are the three stages of promise, pending, ful pill and resected. Now the question is, what we usually do based on promises. You decide if you fulfill the promises, then you will go to the eat at the restaurant, and if you resect the promise, then you will meet another day. Both the results depend on your promise. At the same way, JavaSP promise method works. We have a method name promise. Then inside this promise, we specify a condition, and based on this condition, it returned to results. Otherwise, resolve, otherwise, resect. If our condition resolved, now we can use a new function called then. Inside the then function, we are going to decide if our promise resolved, then what we are going to do. As I told you, if you meet your friend tomorrow, then you will go to the restaurant, and if our condition is resected, then we call another function name catch. Both the functions are cave function. These are all in ll function from JavaScript. But you can take any function name for result function and respect function. It is a PU. This is the promise method, which is introduced in Java script s is version. Now, let's talk about the syntax, how we can use promise method in JavaScript. First, we need to take a variable. Then in this variable, we need to define a new promise. Now these variables become object promise. As I told you, we define a function inside this promise method. This is how we can do it. Here we create a function inside this promise, and also we can take arrow function. Basically in this function, here we need to pass total two parameter. In our case, resolve and rest, and you can take any name for this parameter. If your promise is satisfied, then you can call result function, and if your promise failed, then you can call resect function. Now the question is how we can call the functions. For that, we can create a condition. Something like that. As you can see in this promise, hell create a if else condition. You can set your own condition, it is up to you, and if your condition is fulfilled, then you can call result function. If your condition fail, then in at the L start, you can call rest function. You don't need to create the function anywhere, you need to call the function. As I told you, if your promises resolve, otherwise, rest for the further work, we can create another function. In our case, on fulfillment. It's mean, whenever we call the result function, it's going to call this function, and whatever result function written, we can store it in a variable. In our case, result, and Here you can take any variable name. At the same way for result, here do you create another function, which is on resection. If this function going to return anything, then we can store it in our variable. Then we're going to print it in our console. As I told you, you can take any name for these variables. Now, this two function will not be called by itself. These are not cave functions. To call this two function, Java stip come with some in function, which is then and catch. I already told about it. These two functions are cave function. If our condition resolved, then it automatically call then function, and the then function called on fulfillment function, and if our condition is res, then it's automatically called this **** function name catch. And it's going to call this function on resction. Then function going to call on fulfillment function, and catch function going to call on resction function. Let's summarize the topic. At first, we're going to create a promise, and inside the promise, we're going to create a function. In this function, here we need to take two variables. Our first variable is for success, and our second variable is for failure. Then we create a condition inside this promise. If the condition is satisfied, then it's going to call resolve, and if the condition is failed, then it's called rest. If resolved function call, then automatically it's called this cove function name then, and I rest function called, then it's automatically called the cove function name catch. Now you might have question how we can send argument to these functions. For our functions, as you can see, we have parameters, result and error. How we can send the value to this function. Whenever we call, resolve, otherwise, rest function with this function, we send the value. As you can see, here is success, here is failure. Whenever we call on fulfillment function, this mass is going to assign to this variable name result. At the same way, it's worked for on resction. This is it for this tutorial. In the next tutorial, we're going to start the practical. Thanks for watching this video, state for the next tutorial. 18. Promise Method In Javascript: Finally, I'm back to my iso Sudo code editor. And you can see, I create a STL file named index dot stML. And I also open this file in my browser using Life Server extension. Inside the head tag, first I'm going to type script tag. Inside the script tack, first, I'm going to take a variable. Late, complete, and its value is true. It's a Van value, and I'm going to check this value in our promised method. We will do our next code depending on this result, then I'm going to create a promise method. I'm going to take a variable name pro, and then I'm going to use new keyword, new promise. Inside this promise method, we have to create a function and I type function keyword. Then inside the calibraces. We need to create conditions. I'm going to create EP condition. I inside the parenthesis, I'm going to check our variable value. I type my variable name complete. I true, it redirect to condition, and I false, then it redirect to's condition. As I told you before, promise return only two result. It's written rest or fulfill. For this, we need to take two parameter in our function. For successful, I'm going to take result variable, and for rest, I'm going to take rest variable. If our function is satisfied, then inside the e condition, I'm going to use resolve function. If rest inside the condition, I'm going to call rest function. We don't need to create this function. We just need to call this function. If we call this function, then we can use our val functions, which is then and catch. Now I'm going to send message for result condition. I am successful. For resect, I'm going to send another message. I am failed, and now I'm going to call this pro object in our console. Console dot log inside the round braces pro, it's not a normal function, it's object. We don't need to use round brass after object name. If I set this file, you can see in my console section, You can see in my console, it print, I am successful because we send true value in our complete variable. If I open it, you can see promised result, I am successful and promise state fulfilled. But if I set false value to our variable and set this file, you can see a message I am failed, and also it's showing a arrow. If I open this promise, you can see promise state resected. Also we can send parameter like normal function. I'm going to remove this complete variable value, I'm going to create a function. Function pro inside the round ss complete, then inside the css, and I'm going to move this code inside the car ss. Our function going to return promise. For now, we don't need to take variables. I'm going to remove this variable name and return new promise. We need to pass value, why do we call this function? If I send true, as an argument. If I set this file, you can see my console, I print, I am successful, and if I send false as an argument. Now it's print, I failed. O promise function work properly. Now I'm going to create two different functions for resolve and for rest. For resolve, I'm going to create a variable, late, unfulfillment, and I'm going to use arrow function. When we call this function, I'm going to send a value, which is result, and this value came from resolve function. Inside the crass console dot log result. Similarly, we need to create other function for resect section. I duplicate this lines and replace fulfillment with on resection and send error as in parameter. Console dot log, print error. As I told you before, we need to use covec function to call these functions, which are then and catch. But first, we need to call pro function, and inside the parentheses, we need to send value, and our value is t dt, then. If our problem is resolved, inside the parentheses, we need to call fulfillment function, and I'm going to duplicate this line for resection purpose, and this time, we need to use catch function. And inside the parenthesis, we need to call on resection function. For now, I don't need this console dot lock section, so I'm going to remove it. If I set this file, you can see in my console, it print, I am successful. As I told you, promise has three stage. First one is pending, then resolve and resect. Let's talk about pending. We use it before promise turn. When I return the function, inside the function, first, I'm going to tie console dot log, please wait. Now it is on pending stage. And then I'm going to use set time out function. Set time out, and then I'm going to create arrow function. I made a little mistake. We have to write the pending stage inside the promise function. I'm going to select this section and move it inside the promise method. Inside the set time out section, I'm going to pass this P condition, and I want to pase this condition for 4,000 milligain. If I set this file, you can see in my console, first print, please wait, and we need to wait for force second. But then it print, I am successful. I print please wait twice. To resolve this problem, I'm going to use method chain and make it then and catch function one liner. I'm going to remove this cache function and after unfulfillment, dot catch on resction. Now, if result is true, it's called fulfillment function. And I false, it call on resection function. And if I set this file, you can see in my console section hosted print, please wait. We need to wait for force second. Then it print, I'm successful. Similarly, if I pass false parameter and set this file, we need to wait for force second. And then it print Im fail. Please it is our pending message. We use set timeout function because it's take a long time to cim data from the server. Let me show you one thing. If you do not want to create this function, you can. In that case, you directly call this function in then or catch section. I'm going to copy this result function and call it inside the then function. Similarly, I call error function in our catch function, and I'm going to comment out this previous line. If I save this file, first it run over pending stage, then it print, I find because we send false value to our pro function. Not only that, we can pass multiple argument to our pro function. For now, I don't need this line, so I'm going to remove it. And inside my pro function, I'm going to pass two parameter, two and seven. Inside my function, I'm going to take two parameter x and y. Then insert the promise, I'm going to take another variable Z, Z equal to x multiply by y. Then insert the set timeout function, I complete variable replace with z. If multiplication is possible, then inside the result function, I'm going to use tempted string method. Inside the bac tics, your result, colon, door sine inside the cliras Z, means our result. Similarly, inside the rest function, I'm going to send wrong input. If I set this file, first, we need to wait for four second. Then you print our result, 14. Because we pass to numeric value, so our condition is true. But if we pass a string value, then what happen? I'm going to pass a string value as an argument. Seven replace with small t. If I set this file, now you can see in my conzone. It's print wrong input. Basically, we handle errors using promise method. I hope now you understand what is promise in Advanced Javascript and why and how we use it. Thanks for watching this video. See you on the next tutorial. 19. Promise all: Hello, guys, nice to see you back. In the previous video, we cover a topic named promise. This is the second part of the same topic. In this video, we are going to learn promise all method. We use promise to check a condition. Either our promise will be resolved, else it will be resected. If our function resolved for the further work, We use then function. If our function is resected, then we use cache function to show our error message. Suppose we have such a situation, we have lots of similar promises. If we use then or cache function for all the promises, then our code will become very lengthy. To solve this problem, a new function has been introduced in Java Script S six version. Promise all. We can check every promise at once with this function. In our case, we have three promise. Also you can check thousands of promise at once. As you know, every promise has a result. Maybe resolve, may be rest. If our promise is resolved, you know, then we use then function. But you need to remember one thing. If all of the promise are resolved, only that time, you can use then function. If any of the promise written rest, then you call our catch function. Let me explain you once again. If we have multiple promise, then we can check at once using promise dot all function. If all of our promise resolve, then it run our then function. If any of promise rest, then it call check function. Let me show you the syntex. How can we write promise dot all function? Suppose we have a promise NMP one. And inside the promise, you can see, I create a function. Inside the function, I print a message in our console, promise one, and I'm going to solve this promise. I call resolve function, and print a message one. Similarly, I create another promise name P two. And inside the console log, and print, our message is promise two. Also I resolve this promise, and send message two, and now I want to check this promise at once. For that, we can use our promise all function. When we use dot all function, inside the round res, we can use array, and we can pass multiple promises, something like that. Inside the square recess, p1p2. If we have 50 promises, following the same method, we can check all the promises. Just use coma and type promise name. There is an advantage to using it. We have to call then and catch function for once. We don't need to use both of the function multiple times. Inside the then and catch function, we can type our different codes. I will give you the practical demonstration, and it's time to back to my iso studio code retor. So finally, I'm back to my Visual Sudo cod editor. You can see side by side, I open my Visual Studio cod editor, and I open my browser using life Server extension. First, I'm going to type our script tag. Then inside this script tag, I'm going to create our first promise. Late P one equal to new promise. Inside the down process, I'm going to create a arrow function. As you know, our promise always return a result. Either is resolved, either is result. For result, I'm going to take a variable name resolve. For rest, I'm going to take variable rest. You can type any name. Inside this function, I'm going to use set time out function. Inside this set timeout function, I'm going to create arrow function. I'm going to hold our code for we are going to use multiple promises, and their timings are different, and I want to run our first promise tter once again. I type one multiply by thousand. When I call this message, it prints something in our console. I'm going to type console dot log inside the round brass, the first promise has resolved. And then I'm going to call our result function. I assume that our function always resolved, and I want to send a numeric value in our result function. I tie five. This is our first promise. Similarly, I'm going to create another promise. I select the code and duplicate it. O promise name is P two, and also I'm going to print in our console. The second promise has resolved, and our result function, I'm going to send ten as value, and I want to delay this promise for 3 seconds. Similarly, I'm going to create another promise. I select the promise and duplicate it. O promise name is P three. Consol dot log, I'm going to send a message. The third promise has resolved. And in my result function, I'm going to first 30 as value, and I want to delay this promise for 5 seconds. Now I want to check all the promise at once. I'm going to use promise dot all method. I'm going to type promise dot all inside the round recess. If you want to check multiple promises, then you need to use. Inside this square recess, post type, P one, P two, P three. This method going to check all the promises one by one. Then I'm going to use then function for resolve. Also I'm going to use cache function for rest dot catch. If any of one of this three promise is resected, then it run cache function automatically. Remember, then and catch is our covec functions. Inside the then function, I'm going to create an arrow function. Name result. Inside the ci resis, you can see here that each function has sent one result in our result function, five, ten, 30, and I want to print all of three at once. Console dot log, inside the round brass, I'm going to use template string methyl. Inside the bac tis, results, colon, dollar sine inside the square brass result. It's spring the value of result, which we get from resolve function. Similarly, I'm going to create an arrow function inside our catch function. And our function name is error, and inside the console, it's going to print error message. Basically, I create three different promises, and every time I print a message in our console, and every promise send different value in resolve function. As you can see, five, ten, and 30. Let's set the file. If I show you my console, you can see first it print first promise has result. Then after two second, it print our second message. After five second, it print our third message. At the end, we get our result as an array from. If you want to calculate our results value, yes, you can. Inside my then function. We need to use foreign loop. So insert the then function. But first, we need to set a variable. V total equal to zero. Then insert the then function for inset the round basis, in result, I want to addition all the values. Accept the value in our total variable. I tie total plus equal to result. Our result is a array. Inside the square ss, we need to define our item. I. Also, I want to show the result. I duplicate this console line and inside the back ticks. I type total and inside the car resis, I'm going to pass total variable value. Now I'm going to save this file. As you can see, it print our promise messages, and at last, it print our total value. If all the functions are running, then our promise all method call then function. If any of method written rest, then our promise function written catch function. I'm going to resect one of the promise. In our case, promise three. I comment out the result function, and I'm going to call respect function, and print message rest. If I set this file, you can see in my console, it print. The first promise has resolved. Then it print, the second promise has resolved. For our third promise, it print, the third promise has rest, and our promise method run catch function, error rest. Our then function did not work here, and I'm going to show you another example. You can see these three promise are very similar type of promise. We can make it smaller. I'm going to delete this two promise. I'm going to create a new promise here, and I'm going to convert this promise into a function. First, I create a promise. Then insert the promise, I'm going to call a common function. And our function name is pro call, and inside the function, I'm going to pass two parameter. For resolved value, I'm going to pass a numeric parameter, and for our console dot log message, I'm going to pass string parameter. First. This is our first promise. Similarly, I'm going to create two other promise, P two and P three, and I also change our message. For result, I'm going to pass 15, and for our console message, I'm going to pass second. Similarly for promise three, resolve value is 20. And our console value is third. But first, we need to create a function name pro call. Now I want to make our set time out a function, not a promise. I remove the code and tie late pro call equal to function. Inside the function, our first parameter is written data, and our second parameter is message. Inside the written data, we are going to pass ten, 15, 20. Inside the message variable, we are going to pass first, second, third. You can type any name, and now I'm going to use this parameter in our console. Console dot log inside the console dot log, I'm going to make it dynamic inside the bac takes, the dollar clibrass, inside the calibraces, our message. If our promise is resolved, it send written data as value, and I want to change set time out function dynamically. So I'm going to send return data value into 100. First time, it delay for once again, then it delay for 1.5 second, and our third promise is delay for 2 seconds. We know every promise function return something, either resolve or rest. But we do not create any basic function, which is going to return resolve or rest. I'm going to cut the set time out function, and I'm going to create a basic function, and I'm going to send two parameter, resolve and rest. Inside the calibraces, I'm going to paste our set time out function. It's an anonymous function. It's going to return promise. When we call procol function, it's written the anonymous function. We need to type written keyword for this. It's basically a function, which we call in our promise function. It's a promise, it's going to return, resolve, or rest, and then you show our dynamic message. Set time out, and we don't need to change anything. I'm going to set the file. You can see in my console, it dynamically print our messages. If you want to change resolve value, yes, you can. Let's change it. Our first value is 20, and our second value is 40, and our third value 60. If I set this code, our first promise is delay for two second. Next one is delay for four second. After six second, it print our third promise, and then you print our total 120, and now I'm going to create another promise, which going to return resect value. I duplicate this line. And change the name P four. Inside this promise, I'm going to create a anonymous function, and I take two argument, resolve and rest. This time, I want to call rest function. Inside the rest function, I'm going to pass a message. The fourth promise has rested. When I set the code, our promise all method going to call catch function. Let's set the code and see what happened. But before set the code, we need to call this promise in our promise all function, P three, P four. If I set the score, you can see my console. First, it print the error. The fourth promise has rejected, then it execute our promise one by one, and there is no total value in our console because our promise method written catch function. I hope you understand what is promise method, and now you know why and how we use promise method. Thanks for watching this video. See you in the next taterial. 20. Ajax introduction : Hello, friends, nice to see you back. This is our advanced Javascript course. In this video, we are going to learn what is jx. Let's try to understand what is the meaning of ax. All the characters you see inside the ax have some meanings. A means a synchronize, and J stands for Javascript, A for n and x stands for XML. XML is some kind of data formate. Basically, az X used to create fast and dynamic web pages. First, let's try to understand how we can make our page first and dynamic using ax. Suppose we have our website. We have header, never, and sideward in our website, and we also have a content bar, and now I want to create separate page for all of the links. But when we click any of link, I want to load only this content part, not the whole website. Without content, everything is same inside the web page. Like NBWA, header, sidewa. I don't want to load our CSS JavaScript every time. You can understand how fast it will become because of this. I'm going to show you another example. Suppose we have a sidewar in our website, and I want to show current update notice in this section. I also want user don't need to rephrase this page to get the update. It is also possible with AX. Let's try to understand how AzX are work basically. Suppose I have client and I have server. O client requests to our server for a content, and then our server send a response, and this response may contain any file or data. All that happens here, when server responds to our client, then client has to represe this page to get the data. But if we're talking about AX, it's a little different. In that case, server do not send data to client directly. We use Java script between them. JavaScript have a special class, only for AX, name, XML STDP request. Because of this, whatever we want to send to the request in our server, it goes to background. Then the request goes to the server and bring the response from the server, and without refreshing our page, it show the content, and this content can be of three types. Maybe it normal text file, either XML formed data, otherwise, JSON data. We can divide this whole process in five steps. In Java Script, we call the five steps, ready state. You need to remember ready state name because we use this name for further works. Let's define the five steps. Our first step is zero. Here we do not initialize any request. It's totally neutral and then come our Step one. Do we connect our server with local system. Only then we can send request. In our third step, the server start processing whatever request we send as soon as the processing of the server completes and then come our fourth step. In this step, our processing is complete and server is ready to send response. Use this in our coding language. Basically, we remember these codes, zero, one, 234. Every code has a meaning. If I send redis state three, it's mean server processing our request. If I said di stated four, it's mean server send our response. Let's talk about what do we get inside the response. Basically, we get two things from server. First one is status, and second one is response stakes. If we request for text, they need response text. If we request for XML, then res XML. These are Java script properties. We can use it in our codes. If we get text from a server, then we use response text. Similarly, if we get XML, then we use response XML. If I talk about status, basically status is a code. With this status code, we can check whatever we get from the server, Is it proper or not? Inside this status, basically it's send three code. First is 200, then 403, and 404. Every codes have their own meaning. 200 means, whatever you request to your server, if it fulfill your request, then it send status, then it sends status 200. Then come 403. If server do not response to your request, maybe there is a problem on this server. At last, it's send 404. It's mean, whatever we request to our server, it is not available in the server. There are lots of status code. But these three are very basic one. If you want to learn more about status, just search on Google, a CDP status. You learn how Ajs are work. And now we are going to learn how we can write S X in our JavaScript. First of all, we need to create an object using X ST TV request, and we already learned about object classes in our previous videos. You can take your own variable name. This is not mandatory. In my case, our variable name is X HTP, and I create object using this class, which is XML HTP request. Using this object, we can send any request to our server, and also we can get any response from our server. If you want to access any file from a server, in that case, we have two methods, Open and SN. We need to use it together. Our first method comes with three parameters. Our first parameter is method, and our second parameter is file name. Man which file you want to access. Our third parameter is ASNs more. Let's talk about these parameters. Our first parameter is method. Basically, we have two type of methods, get and post. If we use gait to send data, that anyone can read the data. If you don't want to show data to anyone, in that case, you need to use post. Why we try to log in in a website? In that case, we use post Method, because we don't want to show login details to anyone. But if you search query on Google or YouTube, then you can read your query from URL bar. In your second parameter, we need to provide file. In our case, it is txt file. It could be any file, Python file, PHP file, JS file, and our last parameter is Async More. I have only two value, either true, either false. True means you open async moon means asynchronized, and in the next video, I'm going to cover what is async Mo. Just remember one thing. If your *** mode is true, the rest of the work will be done until the data cames from the server. If we set false, our file do not execute our next code until we get response from the server. I suggest you always set true this value. This is our open method. To send this request, we use another method named send. Help up this method, we send our request into the server. With this, we always check ready state. It tell us whether the request is coming from the server or not. And we have a different function to check this ready state, which is ready state change. Similarly, I use my object name, then I use my ready state change method. It's work like an event. Whenever our server send different type of status, it's automatically print this status. Basically in this function, we check a condition. To check server status, we need to use IP condition, something like that. If inside the round ss, this dot diste equal to equal to four and this dot thetus equal to equal to 200, we already learned about diste. We have five different diste. If diste value is four and our status is 200, then whatever we get from the server, we can set this in our estim page, something like that. You can see document dot get element by ID, and we can target este mil element using ID. In our case, our ID is demo, and we can set element in our estil equal to this dot response text. It's mean whatever text we get from the server, we can set in our estil structure. Let me explain it once again. First, I'm going to create an object. Using a class name, XML STDP request. It's mean for our further word, I'm going to use a X. In our open function, we need to define which file I want to open. Also we need to set ASI mode true because I don't want to stop my other functions. Using same method, we send our request. With that, we always check our rest status. If redis state is f, it's mean we get our response from the server. Then we can show our response in our STL file. We don't need to refresh our whole page to get updated data. I refresh only our particular est section, not the whole page. Let's start the practical. But before we start the practical, I want to say one thing. If you want to run AX, then you need Lip Server. You can purchase your own Lip server. Otherwise, you can use ZM or Amocal host Server, but I'm going to use inbuilt Life Server from our VSO Studio Cod editor. This is my personal recommendation. You can try Viso Studio Code editor. Without Live Server, it is not possible. It's time to back to my iso Studio Cod editor. 21. Advance JavaScript - Ajax Tutorial: So you can see, side by side, I open my seals to your code editor, and I open my browser using Live Server extension. I already create an estel file in my directory, and I want to load a text file in my index dot estel file using S X. I create a text file name text dot txt inside content directory. You can see inside this text file, I write some text. Hello, I am text file. I'm going to load this file in my Index dot est file using S X. I'm going to create a paragraph tag, and our ID is dim. Inside this paragraph, I'm going to type here we load data, and now I'm going to create a button. Whenever we click the button, it brings all the text from text dot text de file and print inside the paragraph tag, and our bottom name is click, and I'm going to use nplick Event. Inside n click, I'm going to use a function, load data. Inside this function, we are going to create our S X. If I save this file, you can see in my browser, it print our static data. At first, I'm going to create script tag, and Inside the crypt tag, I'm going to create a function named load data. As I told you earlier, first, we need to create an object using XML HTTP request class. I'm going to take a variable, which is X HTP, equal to neu XML HTTP request class. You can take any name for your variable. Then I'm going to open my object. I'm going to use TP dot open function. As a parameter, first we need to declare our method, and I'm going to use Git method, and then we need to declare which file I want to access. Man our file. First, I'm going to type our folder name, then text dot, and then we need to send blean parameter. If you want to use synchronized mode, then you need to send true V. I'm going to pass true. To send this request, I'm going to use another method do send TP send. From here, our request will send to the server. If we send requests to server, a response will come from there. To check this response, I'm going to write some code. At the same time, we will also check our status stage. For this, I'm going to take my object name dot. I'm going to use a method on ready state change. And then I create a function, something like that. The function will continuously run. Whenever redisted change its value. Inside this function, we need to check, response has came or not. Whenever registed value would be four, it's mean we get our response. I'm going to run a condition inside this function. If inside the down races, this dot redis stated, equal to equal to four, and this dot status equal to equal to 200, this mean our object. We already learned about it. Just remember one thing. We check server response with D state, and the exact file which we want to excess is available in the server or not. For check this status, we use dot status. If the status is 200, it's mean the file is available in our server, and insert the function, I want to show you the exact response in my console. Console dot log, insert the round braces, this dot response txt. Using this dot response ts property, we can print the server response in our console. Let me explain it once again. First, I create a button in my estimate page, and I assign a function on this button, name load data. Then I create this function inside my script tag, and inside the function, first I create an object named X STP. Using this object, we can send requests to our server, and I want to send request for text dot text file. Using SN method, we send our request, and then I use registered change property to check server status. When server status match with four, then inside this console, it print the text. Let's set the file. And I'm going to click the button, and you can see in my console, it print all the text from our text do text file. If I change anything in our text file, so I type hello world, and set this file, you can see in my browser, it automatically reload our browser because we are using Live Server and this file is connected with our server. If I click this button, you can see the updated content. You can see which we had requested from the server, it is working properly. If you want to show this message in your webpage, not in console, then you need to use document method. I'm going to commend out this console dot log line and type document dot, get element by ID. Inside the round recess, I'm going to provide our paragraph ID, Dm dot inner estemL equal to this dot, response txt. If I set this while, and click on this button. You can see it print the text in our browser. Using inner esteml method, we can change estemL content inside esteml tag. But the question is, if we receive error status then hot. For these, we need to create a SIP condition. I'm going to do at this IP condition and change I L. If our status is 404, and I don't want to show 404 masses to my client. Inside the inner estimL, I'm going to say not found. If the text file not available in our server, then it's going to print, not found. I'm going to set this file. And click the button. You can see it written our file content because this file is available in our server. But if I change our fine ame, and I'm going to change my fine name text one txt, and set the file and back to my index dot STL page, If I click on this button, you can see in my browser, it print, not found. But inside my console, it print 404. You can set condition for different type of STB response. If I change the fine m text one dot TXT and try to print this content in our browser, you can see this time, it print our content, and now I want to show one thing. With our console tag, there is another tag named network. When we work with a X, I send response in our X H R tag, X means XML, H mean HTTP, R means response. You can see in response, we get a file from a server named text one dot txt, and its server status is 200. It's a ASX request. The type is X HR. If I click on the txt file, you can see the preview, and also you can see the response. Also you can see the timing. Here you can see how long it took to came from the server. If you click on the header, you can see the URL path request method, gate, status code, and also you can see my remote address. This was normal text. But in actual life, we use JSON data. For practice purpose, we can retrieve fake SN data. There are lots of website who can provide fake SN data, and I'm going to use this website, JSN placeholder. If you scroll down a little bit, you can see resource option, and I'm going to use post data. It's provides hundred demo data, something like that. This is also dummy data, and now I want to show all of this post in our website. For this, I'm going to copy whole the URL, and I'm going to pass this URL in our open method. And I'm going to set this file and I back to my index file, and I'm going to open my console once again. Let's open the network tab and I'm going to show my X HR status. Now I'm going to click the button. And you can see it print our all post in my browser. And you can see it print over all the post in my browser. Also, you can see file name post status 200 type X HR, file size 7.7 kV, and response time 624 millis again. You can see lots of data in our browser. We cannot understand it properly, and I'm going to print it in our console. And I'm going to just uncommen this console dot log line, and I don't want to print all the data in our browser. I just want to print in our console, and I'm going to save this file. Let's hit the click button. Now you can see in our console, it print all the data very well formatted. You can see different titles, different ID, et cetera. Using Ax without refreshing our page, we can re data from our server. Last thing I want to say, you can see it's a long method. It can complicate our code. Most of the developers using J query to run a X. Otherwise, developer use a new method named FH, which is introduced in Java Script six version. In the next video, we are going to learn about F API. Thanks for watching this video, stay tuned for our next Taorial. 22. Json Intro : Hello, guys, good to see you back. Once again, I'm back with a new tutorial. In this tutorial, we are going to learn about JN. We are going to learn what is the usage of JSN? Why should we learn? Now, let's try to understand what is the meaning of Jasen. JSN stands for JavaScript object notation. If we talk about what is the usage of JSN, it is used to store and exchange data. Now you might confuse JSN is related to JavaScript. No, it is not. It is not related to Java Strip, but there is a reason that we use Java strip in its name. There is a thing in Java Strip, which you call object literal. Otherwise, Javascript object. When Jason was created, it is pretty similar with JavaScript objects. That's why it was known as Java strip object notation. Once again, I'm going to tell you, Java Strip is not related to Jason. It is only used for store and exchange data. Now let's talk more about it. Whenever we create a website, otherwise, web application, it's depend on two main things. First one is client, and second one is server. In your client site, it could be anything. I want to say it could be a mobile, otherwise laptop, desktop, et cetera. Whenever we need to exchange data and get the response at the current time, otherwise too quickly, then we use JCN between them. And as I told you, JSN is not a language. It is data exchange format. Without JSN, we have another popular data format, which is XML. It is also used to exchange data. But as compared to XML, JN is more popular and reliable. But you might have question, why SN is more popular? To understand it, first, we need to talk about their synte. If I talk about JCN format, it's look like a JavaScript object. In JavaScript objects, we use car brass, and also we use K and value pair. But XML is different. This is the XML data format. Here we need to use tag like SML to contain data. As you can see, for the name, we use for H, we use S tag and for the object, how do we use student tag. There are a lot of difference between Json and XML. Let's see the difference between SN and XML. First, they're full from. JN stands for Java strip object notation, but XML stands for extendable markup language. It's a language. But JN is not a language. The next different is JN based on text format, but XML based on markup language. It's quite similar with HTML, and it takes time to learn XML. But you can understand JSL within ten to 20 minutes. Next point is JSN is lightweight, but XML is heavier. That's why JR is more popular than XML. Tags and properties make XL very heavier. But the benefit is XML support comms and name space. But JSN do not support comments and name space. Now, let's see the difference between JN and Javascript object. As we know, JSN is pretty similar to Javascript object, but not the same as exact Javascript object. First, I'm going to show you the Javascript object. When do we create a JavaScript object, firstly to declare a variable name. Also only to use Cass to create an object. And inside this calibraces, we take key, otherwise, we can call it property and value. At the same way to create a JSON object, here we need to use clibrass. But the different is, we should take property name inside the double quotes every time. Also we need to take dual quotes for our value. But if I talk about Javascript object, we don't need to use dual quotation for property name. Also, we can take single codes for value. But we cannot use single codes whenever we create JN object. If you want to print a JN object or a Javascript object, nearly we need to follow the same method. Now, let's talk about what kind of data type JSL support. Jen support, string data type, number data type, bulan data type, NA, object and null. If we want to send empty value, then we use null data type. Otherwise, if you forgot to pass a value, then BDFal is going to send null To understand all the values, here I create an example. At first, as I told you, we need to take calices. Then inside the calices, here we sit our first property, which is ID, and as I told you, we need to use double codes to take the property name. Then here we use number data type. That's why we do not use any double codes. Our next property is name, but for name, here I use string data type. That's why we need to take it in a double cope, and for married, here I use lean data type. That's why here I take true, and for an value, we do not use any double corpse. If you use Boolean data type, here you can pass true otherwise false value. But at the next example, as you can see, here you do not send any data. By default, it's going to st ML V, and for this hobby property, here I use value. That's why I use square resis and inside the square resis, we take the values. For an address, here we use object data type. It is a object. That's why ago take crass. But if you notice for our next property vehicle, heretic, multiple object. Inside this object, heretic, multiple objects, and it's called nested objects. These are the data types that we can use in JN. Now, let's talk about the advantages of JN. Jason come with human readable format. Anyone can easily understand Js. If anyone not come from any programming language background, also he can understand Jason. The next advantage is, it is completely language independent. We can use J with every programming languages like Python, PHP, Java Strip, coin, Java, whatever language you use. Also, JN is very lightweight to use. We send data to server to client in a JN format. JN P P rule in AX also raised API otherwise in AAPIs. That's why JasN is so important. But there is one big disadvantage of JSN. We cannot transfer any media file as JN formed. We cannot transfer audio video images or any binary information. Here we can pass only text based information, and here is another important thing that we are going to learn about in our practical session. This is it for this tutorial. In the next Tutorial, I'm going to start the practical about JSN. Thanks for watching this video, Statue. 23. Json Practical: Hello, guys, good to see you back. Finally, we are in my Visual Studio codtor. As you can see in my current working directory, there is two file. First one is Index dot Stable, and second one is First dot JN file. Yes. To create a JN file, we need to use Dot JN extension. Let's talk about the JCN file. As you can see, our JCN file start with calices. As I told you, to create a JCN object or store a data, we need to use Cardss. Then inside the Css, we have property and vue. If you notice, you can see all the properties are in double cores. Our first property is name, and it's DataV string. Our second property is H, and it is Data IVs number. Our third property is man, and it's Data IVs bullion. That's why type falls. Fourth data Vs, null. That's why hea type, null value. If you do pass any value, BDFol is going to take null. Our second data V is A. That's why he I store multiple results, hobby, dance, soccer, cricket, and our last data IVs object data type. To create object data type, we need to use calices, and I set the Calise, here we use some other properties, P country and state. This is the JCN data that I'm going to use in our Java script. Basically, JSN is used to send data from this server to client. That's why without server, we cannot run JSN properly. Yes, you can run. First, you need to convert JavaScript object into a SN data. Then you can run it without server, but this is not a good process. Because in real life, we do not use like that. Now, I want to use this SN data in our Index dot STL file. Let's jump into the Index dot STL file. Here you can see inside this script tag, H I create a variable name request. This is very well going to send a new STTP request to our server. Then our variable requires dot, here I use open a function. In our open function, we have product two method, gate and post, and here I use gate method. Then Harry pass the source file means first dot SN. This open function going to open the JN file from the server. Then I use reque dot sen function and inside the round ress I provide null argument. Here we use null value because here we do not send any value to our server. Just I want to get the JCS file from this server. Now, from our server, it's going to return a text response. Then after get this text response, we need to convert the text response into a Javascript object for that only to use a function, which is parts. Here I create a variable data. Data means what do we get from the JN file equal to and here I use a function named N dot parse. Then inside the round process request means this variable request dot response text because as I told you, all the Jen data are in a text format. This function is going to convert this SN data into a object and store it data variable. Now, if I pin this data variable in our consol low, then we can read the data. Let's open the file without server. Here you can see, I do not run my live server. I want to open this table file from the directory. If I open this table file from the directory, as you can see in my screen, it's show nothing. But if I show you my console and show you console section, here you can see a lot of errors. Because to run external STTP request, we need servers. Let's d to the vis studio code. Now I'm going to run the same file with live server. Herroc the option, go live. After press, go live, it's going to open my file from the server. Now, if I show you why console section Hroca see the object. If I open this object, now you can see all the data from our object, licensal, address, hobby, name, et cetera, merit status, all of this. Now you convert the JN data into a object. We can access all of these properties one by one. Also, you can perform mathematical calculation and anything. This is how we use JSN. If you want to access the data and particularly, you want to print the name, just type data dot property name, which is name. If I set this file and back to my browser, here you can see in my console, now it's print only the name, add one. As I told you, now it's completely a Javascript object, so you can do ath with it. Just you need to remember Jen dot parts function convert Jen takes data into a Javascript object. At the opposite way, if you want to convert Javascript object into a JN takes data, in that case, you need to use JN dot stringify method. Let me show you. Here, I'm going to declare another variable. W and our variable name is OBJ. It's the object. Object equal to, is that the calrass, our first property is name. Name instead the double cos add one. Our second property is. Is the double goes, otherwise, I'm going to use Pneumonic value, so we don't need double cores, 30, and our third value is city. City and inside the doubles, city is New York. This is a Java script object. Now, we need to convert this Javascript object into a SN string. For that, I'm going to declare another variable. There and our variable name is my JSN. As I told you to convert Javascript object into a JN object into a JN data. We need to use N dot string method. Type JN dot string. Then inside the round press, we need to pass the object name, which is B j, and Segra to this line. Now I'm going to print this JN data, otherwise, text in my body tag. Here I'm going to create a deep tag. No, I'm going to take a paragraph tag, P, and I'm going to assign a ID to this paragraph, ID demo. Then and now I'm going to use dorm to print the SN data in my paragraph tag. Hm type docu getElemen by ID and set the round ss or ID name is demo. I want to say inner est. Inner est equal to JS and sem two in this line. If I set this file and show you my browser as you can see it's not working because We need to move this script tag below the paragraph tag. I'm going to cut this portion, and I'm going to move it below then paragraph tag, and set this file again. Now, if I show you my browser, you can see the result. As you can see, it pre in the text data as it is. If you notice, you can see it is a Jen data because it is inside the C res. Also, also for properties name, it use dual codes. This is how we can use Jen in Java Script. We are going to learn more about it in our upcoming tutoria. Don't worry. When we learn about A X and API, Jason play the key role. Thanks for watching this video, Stay tuned for our next tutorial. 24. Fetch api Intro: Hello, guys, good to see you back. Once again, I'm back with a new tutorial related adverse JavaScript. In this tutorial, we're going to learn a new method, which is H. In our previous tutorial, we'll learn about S X. With that, we'll learn a new method name XML STDP request. With the help of it, we can use SX in JavaScript. But it's come with little Di advantage because we need to write some lineup unnecessary codes. Solve this kind of problem, JavaScript introduce a new method, which is f. Using fh method, we can do everything, what we did with ASX. Basically, we can create curd application using ph method. If you want to insert data in your database, yes, you can. Also, you can update your data, radio data, and delete data. It quite fast compared to XML STB request. Also, it is very lightweight. Now, let me show you the syntex of F method. At first, we need to call the fh method, fh round press, and similar to in this line. Then if you want to read a file from the server, in that case, you need to provide the file path, otherwise, URL, and it could be any file. It may be a text file, JCNile, PHV file, any server site file. And this page method written a promise. As we know, whenever we written a promise, it could be successful, otherwise failed. If our promise written success, we need to use then function. We're going to do the same thing with Pah. As you know, using then function, we can do our further work. But here we use then function to print the data in our document. Because this then function also written a promise. Again, I need to use a then function to handle this promise. Then again, at the same way, we need to create a function inside this then function, and this function going to receive the response from the server. Whatever data we get from this URL, otherwise file, we are going to send this data to this function, and it's going to store to this variable. In our case, response. And you can take any variable name as you wish, and we do not pin this response in our document. Just return this response. Return response dot data. Data means data format. Data is not a method. Here we need to mention what type of data we receive from this server. Take data, otherwise, JN data. After receive the data, we need to send the data in another then function, and we can handle it like that. Dot again, we need to call then function, then set the den function function res. This is our first then function, and this is our second then function. As I told you, our first then function also written a promise, and we need to handle this promise with another then function. Here we take a variable name result. Now we can use the final result which I got from the server. We can use it anywhere. If you want to use it with console, yes, you can. Also you can paint in your document. This is the success part of promise. As you know, with promise, we can also handle the failed part to handle the error part, we need to use catch function. This is how at the same way, we can use cache function to handle the error and print error message. Last, we need to use cache function. Then we need to create a function and we need to take a variable, and this very going to store the error message. And we can print the error message in our console otherwise document. This is how our F API otherwise fetch method work. But remember, to run a fetch method, you need to use Live Server. Life server is very important to run FH method. If you install ZM or AM live server, that's okay. But if you don't have live servers, then you can install live server extension. In our case, I'm going to use visa studio coordinator, and we're going to use live servers. With our p server, FBI, not going to work. This is it for this truural. From the next t ruural, we're going to start the practical. Thanks for watching this video, statue for the next tutorial. 25. Fetch API: You can see, I open my W editor, and I create a estemL file index dot estel I open this file in my browser using Libserver extension, and I'm going to open my console in my browser. In this video, we are going to read a text file using fetch Method. You can see in my directory, I create a folder name content. Inside this content folder, I already create a text file. In this text file, I type some dummy text. I want to read this text file in our estimL page. For this, I'm going to type script tag inside our body tag. And now I'm going to use our method fetch. Inside the carverss, we need to provide the path of our text file, contain slash text dot TXT. Whenever this file, send data in response to retrieve this data, we need to use then function. Dot then. Inside the round recess, I'm going to create another function. We receive our response in this function, so I'm going to create a variable name response. You can take any name for this variable. But the fact is we work on six version, so you can use arrow function. I'm going to convert this function into an arrow function. To remove function keyword, then I use rosine Inside the calibraces, whatever response we get from our server, we just return. But first, I want to print in our console, what we get from our server, console dot log inside the round braces, response. If I set this file, you can see in my console. We get a lot of things from our server as a response. URL, body, header, status quote, and you already know if our server's response is successful, then our status quote would be 200. These are not very useful information. We just want to access our main content. Our file written text, so we need to use another method to retake the text response text. I I sat this file, you can see in my console, our promised stat fulfilled, and our promise result is our text content. Our then function written a promise. Now I'm going to return the text because our then function return a promise. Now I'm going to create another then function after this den function. I'm going to copy the function, and I'm going to call this function right behind on this function. Whatever our first then function written to store this value, I'm going to create another variable in our new then function data. Now I'm going to print this data in our console. Console dot log inside the round bss data. If I set this file, now you can see in my console, I print our exact content. What do we want to access from our server? What do we want to access from our server? Not only that, we can print in our browser. Document dot write inside the round bss data. If I set this file, you can see my browser, it print the file data in our browser, and we can make our more smaller. Basically, we use arrow function. We don't need to write written statement for this. I'm going to remove it and make it one liner. We are going to follow the similar step for our second then function. If I set this file, you can see the same result. If we use patch method in our arrow function, then just on to write one line of code to retrieve data from the server. H we retrieve normal text from our server. Now I want to retrieve Json data from server. For this, I'm going to use fake data. I open a new tab fake Json data. And I'm going to use this website. JSON placeholder. You can use any website, but most of the time, I like to use this website. If I scroll down Little wet and here you can see how we can use fake SN data with H API. If you scroll down Little Wet, you can see some JSON resource. This time I'm going to access user data. If I click on it, you can see ten users data. You can see their name, their ID, their e mail, their addresses, it's a fake data, so I'm going to use this data. You can see in my browser, this JSN data is well organized because I use JN VUR extension. Maybe in your browser, it is not well prettified. I suggest you download this extension, and I'm going to copy this URL, and I'm going to replace our local file path with this URL. Now we're trying to access JN five. We need to use response dot JN Math, and I want to print our JCN file in my console. Console dot log inside the parenthesis, data. If I set this file, you can see in my console, we get ten record as an object. And if I open it, you can see the same information, name, user name, e mail, user address, user phone number, user website, et cetera. Using Face API, we can retria SN data. If you work with PHP file, similarly, it provide SN data. As I told you earlier, when we run catch method, it's not mean, it's always written success. It also can written error. If file not available in server, sometimes server not responds to resolve this kind of problem, we use catch Method. I'm going to use dot catch. We already learned about catch in our previous videos. Inset the braces, I'm going to take a variable name erro I'm going to use ero function. In my console, I'm going to print our error. If I set this file, you can see in my console, there is no error because our request worked successfully. But if I change the URL path, and I'm going to remove U from user. Now there is no fin name SCRs in that server. I I set this file, you can see there is an error. We don't get any proper message, but just it show four and 84 means file not found. If I show you the network section, You can see the file name, SCRs status 404, type, and also you can see size and response time. Now I want to print this data in our document, means in our browser. For these, we need to use foreign loop. I'm going to remove this console dot lock section and I type cli bras, inside the crase and I'm going to use foreign loop for inside the round ss A in data. Then inside the round ss, document dot A. What do you think? Is it going to print all the document at once? No. Let's run the code. You can see it print ten numbers, 029. Once again, I'm going to show you the console, console dot log data. If I run this code, you can see my consoles. I did some slimstk. We need to write this console dot log section outside the flop. If you on this code, you can see, it's written an object. But inside the object, there are ten more objects, 01, two, three, four, five, 6789. We need to print their values to gait proper result. To retrit this value, we're going to use a variable value. A means object key. Inside the round ress I'm going to type data. Inside the square ress, I'm going to pass the key variable. If I set this file, you can see in my browser, it's print object object object because there are more object inside this object. We cannot print object like this. We need to define exact object key. Suppose I want to print object name. Inside the document dot write function, I'm going to use template string method inside the back takes, dolor sine and cure bras, and I'm going to pass data and square brass, and then I use BA tag for break the line. First, I declare our index, then we need to declare our exact key. I type dot name. If I set this file, now you can see in my browser, all the user name. If you want to print user email with their name, I'm going to type, and I'm going to duplicate this code, and I re test name with their email. If I set this file, now you can see in my browser, it print user name and their e mail also. You can see in my console. Similarly, you can use all the key to retrieve particular data. You can see inside the object zero, there is another object named address. Now you decide to print user City from the address. In that case, first, you need to use address keyword dot address. Once again, you need to use dot to specify the exact query, and I only want to retrieve City from the address bar. So I type dot C. If I set this file, now you can see in my browser, it print user name with their City. In that way, we can print data in a table. If you notice, Haro retrieve JSON data from online server, and we also retrieve JSON data from local file. Let me show you the example. If I show you my current working directory, you can see there is a folder name content. Inside the content folder, I already create a JSON file named student dot JS. Inside this JN file, I already insert some data, student name, student age, and their city. Now I want to retreat this local data using H API. First, I'm going to change our file path, content, slash or file name, student dot Json. First, I'm going to stop this for loop, so I'm going to comment out this because their key is different. First, I want to show the data in our console. If I set this file, you can see in my console, we receive two data, and you can see our student details, and our keys are name, H, and City. If you want to show the data using F loop, and once again, I'm going to enable this for loop, and I don't need to address section, so I'm going to remove it. And I just want to print student name and their city. If I save this file, you can see the result in our browser. It print student name and their city. If you want to show dynamic error meses on your browser, you can. Inside the cache method, I'm going to type document dot write. Can't fetch data, and I'm going to change our file path. I'm going to remove A from student. I I save the file, you can see in my browser, it print our cache function message. Can't fetch data. If I show you my console, you can see print 404, means file not found. I hope now you understand how it's work. In the next torial, I'm going to show you how we can insert data in Lib server using Fitch API. Thanks for watching this video. 26. insert data using fetch API: In this video, we are going to learn how can we insert data in server using FH API. For that, we need to provide server site file path, maybe PHP file, Python file, or.net file. With that, we pass some parameter. So I use coma and I use carliss. Inside the carass, we use some properties, and they have some different values. Our first property is method. I told you earlier, we have different method to retrieve data and N data. If you want to insert data, then we need to use post Mathod. But for JSN, we have some more methods. Why do we need to insert data to our server, we need to use post Method. But if you want to update server data, then you need to use Put. If I want to delete server data, then we need to use delete method. If you just want to read data, then you need to use gate method, and then come our second property, which is body inside the body, we pass those data, which we have to insert in our server, and it can be different. Maybe semel from data JCN data or takes data, and then we need to pass our header. We need to declare the format, however we want to send data to the server through the body. I just want to say content type. For this, we need to type a Q word content type, and then you need to type application data format. In our case, JSN, it's mean whatever data we send from our body, it's a JSN formated data. Suppose we don't want to send JN data. I want to send estimL from data. In that case, we need to use different content type. Application slash X, hyphen, WWW, hyphen from Hyphen URL encoded. If you want to send from data directly, then you need to use this Pathod. Let me show you the practical. Now I'm going to insert data to our server using F API. You know, we don't have any real database. I'm going to use fake JN Data. I'm going to use our old website name JN Placeholder. If I scroll around a little bit, you can see, you can see a link, name guide. Inside this link, you can get the code that you can use to send data to server, using FPI. If you want to read data, then you need to use this code. And I I scored around little weight, you can see an option creating a resource. Using this code, we can insert data in our life server through HH API, and you can see the header content type method post, and you can see another function named N dot string fi. What is the meaning of P? However, data we get from our user, it's a JavaScript object, and we cannot save JavaScript object directly to JN file. We use the function J string. It converts the JavaScript object into a JN data. We already know if we try to send JSN data, then we need to declare our content type application JN. I'm going to use this whole code. I select and copy it and inside this script tag, I'm going to override the code. Using this file, I'm going to insert new data to our server, and you can see our server path in our URL section. If you set the file and back to the page, and you can see in my console, it reten the data, what do we insert in our server. You can see ID 101, title AO and user ID one. This is the response for our server. It's a dummy data, so it's not going to save permanently. But this is the exact method, we should follow when we try to insert data in server using HPI. It's a fake data. If I change the title, hello world, and save the code, you can see a error in our console. It is not 404. This website provide a demo file. We cannot add different data to the server. We can use this website link for practice purpose. But if we use our own PHP code or any other server side language, then we can set the data in that server. Not only that, you can create the object outside the body tag. Let me show you. I'm going to copy the object content and outside the PHPI, I'm going to create a variable Po VG. V equal to, I create a JavaScript object using same key and value and inside the body section, I'm going to convert this Javascript object into a JCN data. JSN dot, string if f, inside the round recess, O Vj. If I set this file, you can see the response in our console. I hope now it's clear for you what is p method and how we can use. If I back to the JCN placeholder guide, you can see updating resource method, you need to change your method name. And you need to follow the similar step. That's it. For delete data, just you need to use delete method. In your URL, you need to provide the exact index number. You can see post one. I hope you enjoy this video. Thanks for watching this video. See you on the next tutorial. 27. Async Intro: Hello, friends, nice to see you back. In this tateral, we are going to learn two new features of JavaScript. ASIS and Aved. Let's try to explore what is ASIS function. As we make normal functions in our case, paste, if I type ASN keyword before the function keyword. Then it will become a *** function. But the question is, what is the difference between a normal function and a Assing function. As function always written a promise, and we learn promise in our previous videos, and we know promise written to type of function. Resolve and rest. Based on this, we do our further work. If it resolve, then we call then function, and if our promise is resected, then automatically call cache function. Our Assing function work like promise. It may be resolved or rest. Similarly, we can call then function for resolve, and we can call cache function for resect. Now the question is why we use the As function since we already have the promise method. If you remember, there is a little complication in our promise method. Every time we need to declare, resolve or rest function in promise. To resolve this complication, Javascript introduce Assn function. It is very easy to operate. Just you need to type as keyword before the function keyword, and you don't need to change in your function. I want to tell one thing. Our promise function introduce in Javascript ES six version, and ASN function introduce in Java Script ES 2017 version. From here, you can understand why JavaScript introduce Asne function. Tanser is simple to resolve promise complication. All the things that we could do inside the promise method, we can do in Asne function. Without wasting your time, let's back to the is Sudo code editor. 28. Async Tutorial: Here you can see side by side, I open my visual studio codaor and I open my browser using Lib server extension, and I already create a estimL file named index dot eTML. First, I'm going to create scriptag. Inside this scriptag, I'm going to create a normal function. Function taste, and this function going to return a string, hello world. Let's call the taste function. I want to call this function in my console. Console dot log, inside the parenthesis, taste. Let's s the file. You can see in my console, it print, hello world. There is nothing new here. It's a basically a normal function. Let's convert the function into a as function. For this, we need to type As keyword before the function keyword. Now this is not a normal function. This function only work on asynchronize more. Means in our background. If I save this file, you can see my console, it written a promise. You can see my console, promise result, hello word, promise state fulfilled. Now it's clear for you. If we use a Keyword before the function, it's written a promise, and we already know we can use then or catch function with promise. Let's see. I'm going to comment out this line and then I'm going to call this function, taste. In our Assn function, we don't need to use resolve or rest function. We can directly call then function. Inside the then function, I'm going to create an arrow function. Whatever this function return, and if it runs successfully, our then function called automatic and inside the then function, we can print our return value. Console dot log, inside the parenthesis result. We need to create the result variable as parameter to store value. Result. You can take any name. If I save this file, you can see in my console, it print hello world. There is various methods to create Assn function in JavaScript. We can create Asne function with normal arrow function. Let me show you. First, I'm going to take a variable name taste. Late taste equal to, and this is our ase function. This is another way to create Asne function. If I set this file, you can see in my console, it's written hello. It's main it's work properly. If I want to fit in in an arrow function, yes, I can. For this, we don't need to type function keyword. And then I use equal to en gratin then sine. You know if there is a single statement in our arrow function, then we can delete these clibrass, and we can make it one liner, and also we can remove this written R. If I set this file, you can see it worked properly. You can see how small R function has become. Let's try to understand what is vet method. 29. Await intro: Let's talk about At method. At method, work inside the async method. To run vet method, first, we need to create Assn function. As you can see on your screen, we create a Assn function name taste. Inside the function, I print three statement. If I call this function, it's going to print three of this statement one by one. Suppose we have any code air this function, then it will print after that. Let's talk about At method. We can use At method in our Assn function. Just we need to type At keyword before any of the core line, something like that. The meaning of the line is, I told my compiler to wait after printing log B. What is the advantage of this? Until the console B process is completed, then the code outside of our Assn function, start executing. If I call the test function, first, it going to print console A, thence it come to At method, and here I told my *** function to wait. It print console B. After that, whatever code is there, it will not execute it. It jumps outside the test function and try to execute our other codes. When all the other codes are completed, it will come back to At function. It will check whether our work is done or not. If our code is complete, then whatever code is there, inside the *** function, it will start execute. When we use At method in Assing function, it stop executing our function and jump outside the function and try to execute other codes. When other codes are completed, it back to the At method and try to execute and try to execute other *** function code. Mainly we use it. When do you want to fix data from server, and we use it with our fetch method. Using this fetch method, we can retrieve data from the server. It may be JSON data or takes data. The data we want to fetch from the server may take a while to arrive. And our external code continued to run until the data came from the server. When the complete data comes in, it goes back to At function again. Then we continue to do the following task of our function. Let's start the practical and see how we can use At method with our Assing function. 30. Await Tutorial : Here you can see, once again, I open my vises to your creator and microme browser, and I already create an async function name taste, which is empty. First, I'm going to print a statement outside the function. Console dot log inside the parenthesis one colon message. It's mean this is our first message. Here we are going to understand how a wet function work, and I'm going to copy the same message and paste it inside the asin function, and I'm going to duplicate it to time. Also, I'm going to change their ID, two, three, and four. First, it's going to print our message one statement. Then it's going to call our function taste, which is a Assn function. Then you print our three statements inside the ase function. Once again, I'm going to print in our console another masses, Masses five. If I save this file, you can see in my console, it print all the masses serially. Mass one masses two masses three mass four masses five. 2-4, they are all from Assn function. Now I'm going to type at method before the masses three. I already told you, what is the meaning of At? Wait and complete the job. Until this work is done, complete our another work, then it's return to our At function and check. Is it finished or not? If finished, then it print masses four. I'm going to save this file once again. You can see it's change our sequence. You can see first it print masses one. Then I call our function test, which is a Assing function. I print his first statement two. Then it print At masses, Man masses three. But I also declare our function to wit. As long as it is waiting, the masses outside the test function will be printed. After three, it's print five, not four. As soon as the job is done, it's came back again to check, is it work properly or not? If it works properly, then print masses four. In that way, our At method work in our ath function. We try to run At Method without acing function, then it's written er. Now I'm going to show you what is the actual use of At Method. Where and why we use At Method. Whenever we try to face data from the server, then we need to use At Method. Here I'm going to use Fetch Method, and we learn about it in our previous video. Here I'm going to fetch a JSON data, and I already create a JN file in my current working directory. Let me show you. Here you can see, I create a folder name contain. Inside this folder, you can see a JN file named student dot JSN. We have three records in our file. Name Ag and City. It's a SN format. Also, you can retrieve fake JN data from website, basically for testing purpose. Let's back to the index dot estimL file, and now I'm going to use the Fetch method. First, I'm going to create a variable, and I'm going to remove this line. Const response equal to f, and inside the F method, I'm going to pass my URL, content student dot JN. Before this f function, I'm going to use our method. Wait. It's main, I told my function to wait and fetch the complete data from our JCN file. Until the process complete, it's run our next code. As soon as all work is over, it's returned to the AD function and continue with next lines. We know our fetch method written a promise. I'm going to create a variable. But first, I'm going to remove this line. Cs student equal do, and once again, I'm going to use At Method, response dot JSN, and we learn our treat in our previous video. Basically, our fetch method return JSN or text format. In response, we get JSN file, so we need to use dot Json. I'm going to return all the data which I retrieve from the AJCN file, written student and a written student value. We know our Assn function written a promise. First, it's going to print masses one, and then it's going to run my function taste. It's the Assn function, so it's going to print masses two. After that, we are asking to wait here. After our first At function, I'm going to print another message, masses three. Also, I'm going to create a variable for our function call, t x equal to taste, and I want to print this response in our console. So I'm going to type console dot log inside the round brass, x. Let's sip the code. You can see in my console, as you can see, first print masses one, and then we call our function taste. I print masse two, and then I told you to eight. Here I'm going to fetch data from server. So it's jumped out of this function and started working on massage four. You can see my console section. It print four up to two, and when massage four is complete, we call our x variable. It's going back to the Assn function and it get a response from server, and you can see it print our response as a promise. You can see we have two array in our promise. Our promise stat is fulfilled. After complete the promise section, then you print our masses three. In that way, we use async and Avid method with our fetch function. Now I'm going to remove all the extra messages. So I'm going to remove all the console section. Now it's looking pretty simple. First, return at function for our fetch content. It will keep waiting until the data cames from the server, and we told our response to wait once again. I use another At method. Then we return our result. If I set this file, you can see in my console. As a result, we get a promise, and we have two array in our promise because in our JCN file, we have two results, and as you know, we can use then and catch function with promise method. First, I'm going to remove the console section, and also I'm going to remove this variable x. First, we call our test function. If it written promise successfully, then we are going to use then function. Inside the then function, I'm going to create a arrow function. Also, I'm going to create cache method up to that. Dot catch and set the parentheses, I'm going to create another arrow function. If there is an error in our function, then automatically it run catch function. Now I'm going to save student record in a variable. Our variable name is RES data means response data, and I'm going to print this value in our console. Console dot log Rs data. If there is an error in our code, our cache pathol going to print another error message. I'm going to create another variable error. Inside the error function, I'm going to print console dot log error. First, we called our AN function taste, and it written a promise. If promise is fulfilled, then it run then function. If there is an error in our function, it automatically run cache function. If I set this file, you can see in my console, it written a array, and if I open this array, you can see it provide Son object. If I change file path, so I'm going to remove a from student. And set this file, you can see in my console, it print an arrow 404, Mans file not found. It run our catch method and print the arrow. Now, let's see how we can convert so many lines in a one line. I just want to make it one liner. First, I'm going to comment out all this line. Mainly, we are focused on fetch and At method. I'm going to return inside the parenthesis, I'm going to call At method, and I want to return JN form it. I use dot SN function. We make it one liner. If I set this file, you can see in my console, similarly, it written an array, and we have two JSON object inside this array. Here you can see, I convert three line of code into a one line. Let's talk about our last topic, error handing. Basically, we handle our error using catch function. There is a drawback using catch function. When we call test function, every time we need to use catch method to handle the error. I don't want to use every time. There is a short cut to handle it. I'm going to uncomment all the lines and comment out this return section. Basically, we use tri catch to handle this error. Inside the Assing function, we use tri cache block. In our next video, we will learn more about tri cache. Inside the tried block, we type our whole code. So I'm going to move this code inside the tried block. It's mean we are trying this code. If it worked properly, then it written, and we can access this in our then function. If there is an error in this tribe block, then it's automatically run cache block. Inside the cache block, we print our arrow. I'm going to move this error message in this block, and I'm going to remove the cache method, and also we need to declare the error variable inside the error block. Whenever we call test function, then we don't need to type cache method to handle the arrow. If I set this file, you can see in my console, we can access our data successfully. If I create an error inside my function, so I'm going to change a response spelling, RS dou two PON SC. You can see there is no variable m, rest 22 points. We know it's going to return an error. In that case, it will run our cache block. If I set this file, you can see an error in my console. It print. Reference error. Rest 22 pounds is not defined at taste because we do not define this variable in our function. Also print another message undefined. You can see how we can handle error using tri your cache block. It is pretty similar with tri except condition in Python. If there is an error in our tri block, then it automatically jump to the cache block and it print our error message. I'm going to resolve this problem and set this file once again. Now it's pretty fine. If you want to print this result in your document section, you can. You can use for loop for that. I hope now it's clear for you what is AC and AD method and how we can use it with our ft method. Thanks for watching this video. See you soon. 31. Advance JavaScript Symbols intro : Hello friends Natsio ba. In this tarial, we are going to learn about symbol. We already know about data type in JavaScript. Especially we have seven type of data type, string, number, bullion, array, object, null, and undefined. But a new data type has been added to this list, which is symbol. In this video, we are going to learn about symbol. But before we learn about symbol, let's take a overview to our old data types. Suppose I have a variable name A. If we assign this variable and inside the double codes or single codes, if I provide any value, then we called it a string, and it doesn't matter is it alphabetic or numeric? It's mean A datatype is string. Similarly, if we assign a numeric value without codes, then we called it numbered datatype. But if I provide two or false without quotation, it's main it's a boolean data type. But if I add multiple value in our A variable, then we can use AA data type. For these, we need to use square verses, and then we can use multiple value. But if I want to add key and value prayer, then we can use object data type. And if I assign null to this variable, then we call it null data type. If I do not define any value to this variable, in that case, we can call it undefined. I know if you are in this course, you already know about it. Just I want to revise once again. But in this video, we are going to understand a new data type, symbol. When you want to use symbol datatype, you need to take variable, and you need to assign with a symbol method. Remember, this should be capital, and we need to use round bases after that. Inside this symbol, we can place any value. It may be numeric value or string value, something like that. We call this string symbol identifier or description. It's always a unique value. I want to say we cannot assign the same value. Other symbol. Suppose I take another variable B, and I'm going to provide the same value. As you can see, A and B variable value is same. Maybe you can think, their value is same. If we try to compare them, it's written true, but this is not going to happen. If we compare this to variable, it's written false. Their value look same, but they are not same because symbols value are unique, and if we try to compare it, it written false. Why do we need to use unique value to our program? In that case, we can use symbols. Let's start the practical and try to explore more about symbols. 32. Symbols part 1 : Here you can see, I open my Visual stdio code editor, and I also create a estL file, and I open this estL file using life Server extension in this browser. First, I'm going to type script tag. Inside the script tag, I'm going to create a symbol. I'm going to create a variable. Late ID equal to S should be. Symbol. Let's print this symbol in our console. So I'm going to type console log inside the parentheses ID. If I save this file, you can see my console, it print, it's a symbol, and I'm going to assign a identifier to the symbol. So I'm going to type hello. It may be string, maybe number, whatever. If I set this file, you can see my console, sprint, hello. If I show you the data type, so I'm going to duplicate this line, and I want to print type of ID. If I set this file, you can see it sprint symbol. Symbols mean one unique value. Let's try to prove it, how it is a unique value. I'm going to duplicate this line and change the name ID two. You can see it's looking same and their value is same. But if I compare this two variable, it's written false. Let's compare it. ID equals regs to ID two. If I set this file, you can see it written falls. It's mean these two variables values are not same. It's look pretty similar, but it is not same. But if I use string, let me show you that. I'm going to revert this line, and I'm going to change the name tr one and two. Now they are string, not symbols, I'm going to remove the symbol keyword. And also I'm going to remove this one. Now I'm going to compare this two value. Inside consol dot lock section, I'm going to type St r one and St two, and I'm going to comment out this one. If I save this file, you can see it written true because in that case, they are not symbol, they are string, and two variables values are same. They are not ic value. One thing, remember, we cannot use symbol value directly in our document. Let me show you that. I'm going to remove these lines. I don't need these lines for now, and also I'm going to remove these lines. As I say, we cannot print symbol value in our document. If I tried to print, so I'm going to use a Alert. Alert inside the parentheses, I'm going to print ID. If I run this code, it's written error. I'm going to set this code. You can see type err, and also print, cannot convert a symbol value to a string. If you want to convert symbol value into a string, then you need to use some method to convert symbol value into a string. Let me show you that. We need to use two string method. ID, dot, two string. Using this method, we can convert symbol variable into a string. If I set this file, now it's s properly. You can see in my alert symbol, hello. I need to use two string method to convert symbol into a string. Then we can use this symbol value in our document. If you want to see the exact value of symbol, then we need to use a different method. In that case, we do not use two string method. I'm going to remove it, and I'm going to type ID dot description. It's not a function, so we don't want to use round races. It is just a symbol method. If I set this file, you can see in my alert section, now it's just print hello, means our message. In the next part of this video, I'm going to show you how can we use symbol into a object? 33. Symbols part 2 : Hello, friends. Nice to see back. In this video, we are going to use symbol inside the object. I'm going to remove these lines, and I'm going to create a new symbol. Late H equal to symbol. For now, it's empty, and then I'm going to create an object. I'm going to take a variable lim for object. Late user, equal to inside the car ress here, I'm going to create the object. We know we need to use value and key to create an object. Our first object key is name. And its value is add one. Our second object is class, and its value is class ten. Now I want to use this symbol as a key. In that case, first, we need to use square raises, and then we need to type symbol variable. H, and we need to provide value. So I'm going to type 25, it's a numeric value. B you need to use symbol as the key inside the object, then you need to use square verses. Inside the square ses, we need to provide symbol variable. Let's try to print this object inside the console. I'm going to type console log inside the parenthesis or object user, semicolon to end this line. If I save this file, you can see in my console, sprint the object. For our first value it's sprint name, second value it sprint class, but for our third value, it's print symbol, and we do not provide any description to our symbol. If you want, then you can. As a symbol value, I'm going to type H. If I set this file, this time it print symbol H, and there is another method to use symbol in our object. I'm going to remove it. Also I remove this coma. And now I'm going to use this symbol in this object. Outside the object, first, I'm going to type object name user. Inside the square process, I'm going to take symbol variable name equal to, and I'm going to assign a value, 23. This is another way we can use symbol with object. If I set this file, you can see my console, it print our proper value. As you know, if you want to see the exact value of any key, you can just to type user class. If I set this file, you can see it's written the exact value, class ten. If I want to show the symbol value, we cannot use this method. Let me show you, if we try, I'm going to plate this line and I want to change this variable name H. If I set this code, You can see it print undefined. Class is our key. H is our key, but it work with class, then why it does not work with? If we want to show exact symbol value, in that case, we don't need to use dot. We need to use square brass. We need to move this variable inside the square brass. If I set this code, you can see now it's written the result. You need to remember for normal data type, we can use dot. But for symbol data type, we need to use square races. As you know, we can print every object key or value using foreign loop. Let's use foreign loop. Try to print every key in our console. I'm going to type four, inside the parenthesis led key in user. User means our object name. Then inside the car ss console dot log inside the parentheses, key. If I run this code, it's going to print student name, user name, user class, but it is going to keep user A because it is a symbol. I want to save this file. Now you can see my console, it print name class. But it doesn't print H Key, so it's print only two key name and class. But if I duplicate this line and try to insert another key name gender and gender is male. I want to type male. If I save this file, you can see it print three k from our object, name class and gender, but it scape H K because it's a symbol. We cannot use symbol inside the foreign loop, and you need to remember it was, and you know why we use ask object. Because we convert Javascript object into a JSR object and try to send data to the server. If I try to convert this user object into JN, once again, skip this value. Let me show you this. You can see we have four value in our object, name class H and ender. First, I'm going to remove this. I don't need this follow. And now I'm going to convert this object into a JSN file. I'm going to use console dot log. Inside the parenthesis, I'm going to use JN do stringif Mathl JN stringif Inside the parenthesis, I'm going to provide our object name, which is user. I set this file, you can see it written a JS object. But if you notice, H value is missing. But if I just print this object in our console, let's see. I'm to remove this parenthesis. I I set this file, you can see, you can see my console symbol value. But in my JS object, there is no symbol value. You need to remember whenever we use symbol value in our object, we cannot use this value in our foreign loop, and also we cannot convert this value into a JS object. If you really want to convert it, Then we need to convert this symbol value into a string. As I told you earlier, we use the description method to convert the symbol into a string, and then we can convert it into a J object. We do not directly convert symbol into a object. Basically, this is a new data type symbol. Symbol spin unique value. It is rarely used. I hope now it's clear for you, what is symbol datatype. Thanks for watching this video. 34. Iterators Intro: Hello friends, nice to see you back. In this reteral, we are going to learn a new future about modern Javascript. Generators, suppose we have a function named demo, and inside the function, I type some multiple statements, like masses one masses two masses three. Whenever we need to call the function, just we need to type the function name. Demo, and then it's going to print all the statement one by one in our console. But the problem is we have no control in this function. If I call this function, it's going to print all the messages. But I want to control all these tapes. When I need to print first message, I can. And when we need to print our third message only, then I can do that. And if I want to print our first message and our third message, and I want to scape our second message, then we can do it. But we can't do it in our normal function. To solve this kind of problem, JavaScript S six version introduce a new feature named generator. Generators asically a function, just on to follow a different way to create it. When you create a function and take a function name, we need to use star sine before the function name. Now it's a generator function. Now we can control all the statements inside the function. If you want to stop any statement, you can, but we need to use a special keyword name yield, something like that. It's mean pause. I declare our function. When I call this function, it's going to pause our statements. If we don't call this statement, it's not going to be execute. Let's see how it's work. First, we need to call the function. We need to create a variable, and then we need to assign this function with this variable. You can see from our first statement, we use yield. It's mean from our first statement, we pause our code. If we want to see the masses one, we need to use next function, a dot next. We learned about it in our previous video. We can print this statement in a document or a console. It's up to you, and this function going to retain a value masse one. So this function going to print our first value. Similarly, if you want to see the second value, we need to use next function once again. And if you want to see the third value, we need to follow the similar process. We already learned about it in our previous video. Now you understand the benefits of using a generator. We have total control of our statements. So let's start the practical and see how it's work, and I'm going to show you different examples. 35. JavaScript Iterators: You can see, I open my W editor a studio code editor, and I create a STL file index dot STL, and I open this file in my browser using Live Server extension. First, I'm going to type script tag. First, I'm going to create an array inside the script tag. Late num. Ist the array, I'm going to add numeric values, and I'm going to type 204060, and now I want to print this value in my console. I'm going to type console dot log inside the parenthesis, our variable name is num and subcoln to end this line. If I set this file, you can see my console, it print out array. If I open this array, you can see an option, proto. If I click on it, you can see some methods. These methods are all related to array. If I scroll down retrieve it, you can see a function symbol dot iterator. I'm going to use this one. Using this, we can travel every value in our array. Means we can iterate our values. Let's do it. I'm going to check this function inside my console. But first, I'm going to type up. And I'm going to use this function with num array. Then inside this co process, symbol do iterator. Here I'm going to check the new function type, so I use type up. If I set this file, you can see in my console, it print, it's a function. Using this function, we can iterate our array. For this, first we need to take a variable, so I'm going to remove this console line. And I'm going to create a variable. Late, and our variable name is tr. Obviously, we don't need the type of function, so I'm going to remove it. After this square basis, we need to use round brass, means function sine, because it's a function, and I'm going to call this function here. Whenever I call this function, it's going to sort the value in this variable. I'm going to bring this value in my console. Console dot log inside the parenthesis er. And subg to end this line. If I set this file, you can see it return an array. If I open this array, you can see, and if I open this proto option, you can see a function, next. Next is a function. Using this next function, we can read every value in our array. Let's do it. After ITR, I'm going to type dot next, and also need to type around braces because it's a function. Using this method, we can print our first value. If I set this file, you can see it's written an object. And we get a two key. First one is value, second one is done. In value, we get our first value 20. But in done, it's written false. What does that mean? It's mean, why do we use iterator? If we print an array inside this function, and if there is a value inside this array, every time it's going to return false. You can see after 20, there is another value 40. Our erator function know that there is another value up to 20. That's why it return false. Let's call this function two time. So I'm ligate this line two time. If I save this file, now you can see my console, and you can see it print our value, then it print false. Once again, it print our third value, and it print false. But if I call this function once again, and if I save this file, you can see our value is undefined. You can see there is no fourth value in our era, it's print undefined. Inside the d, it's written true because there is no value le to print, it's written true. Remember, we have full control on it. Suppose I want to s keep the first value in our area. I'm going to remove this consol or lock section. If I set this file, you can see it keep our first value, and it print our second value 40, and I'm going to remove this line for now, I don't need this line. If you want to skep our second value, then you need to remove this line, and we need to call this function once again. If I set this file, you can see it print our third value only. Whenever we call the next function, it's going to iterate the next value from our array. If we use first time, then it's going to iterate our first value. Similarly, if we call this function once again, then it's going to iterate our second value. We have total control on it. If we paint masses between them, so I'm going to type console dot log inside the parentheses, I'm going to type a string high, and semicolon to in this line, and I'm going to duplicate this line for time. If I set this file, you can see my console. It's not going to affect our iteration. The benefit is, whenever we check the iterator value, we can. But if we use for loop or any other loop, obviously, then we need to print all the value at once. But using iterator function, we can use any value when we want. As you can see, it's the internal object. Value, and we get two key from it, value and done. If we want to see the value directly, yes, we can. I'm going to remove all of this. After next, I'm going to type the value. If I set this file, you can see it directly print our value 60. It's the object, so we can print their value using dot value method. Similarly, we can check Don key property. If I dublgate this line and change dot D, and I I set this file, it's written true. Why it's written true because we call our next function fourth time, and there is no fourth value in our array. That's why it's written true. If I reve any function, and then set the file, and you can see this time it's written false, and it returns false for our third iteration. Suppose if we have 300 value in our array, then obviously we need to create loop for that. We can create our own loop, or otherwise, we can use do loop or loop. Let's see how it's work. We don't need to change anything, and I'm going to store this value in a variable. I'm going to tie late, and our variable name is result. And I'm going to remove this line, and I'm going to create a il loop. I'm going to use a while loop, and I run this while loop until the done property written true. Inside the parenthesis, I'm going to type not result dot D. It's run the wil loop until the value is true, so I use not operator. Inside the loop, I'm going to print the value. Console dot log inside the parenthesis, I'm going to type result dot value, and semicolon to in this line. In that way, we can print all the value in our console. As you know, we need to increment our loop to get the next result. I'm going to copy this line, and I'm going to paste it here. As a result, it's going to iterate our next value 40. If I sat this file, you can see in my console, it print all the values. No matter how much value we have, it's going to print all the values. In that way, we can use iterator function inside the le loop. Also we can use this iterator function with string or object. In the next part of this video, we are going to see an example with string. Thanks for watching this video. 36. JavaScript Iterators : Once again, I'm back to my visor sudo codtor, and now I'm going to run iterator function with string. I'm going to duplicate this line, and I'm going to comment this previous one. I'm going to assign a string value to this variable. I'm going to remove this one and I'm going to tie hello world. And I don't need to change anything in my code. If I set this file, you can see in my console, it sprint all the character. You can see it's sprint two because after, we need to use another character for hello. That's why it skip one character. We can print one by one character from our string, and also it count space. In that way, we can use iterator function with string. In our last example, I'm going to show you how we can create our own iterator function. First, I'm going to remove this line. And then I'm going to uncommen this one. Now I'm going to read all the values, but I'm going to use iterator method. I'm going to create my own iterator, and I'm going to remove all this line. Here I'm going to create my own function, and our function name is number. Whenever I call this function, I'm going to pass this array. I'm going to create the function name number. Function number. Whatever value I send as an argument, to get the value, we need to create a variable. In our case, R means array, because I'm going to pass array as an argument. First, inside the calibraces, I'm going to take a variable there. Next num equal to zero. For iteration purpose, we need this variable. Because we know our first index of A is zero, and later I'm going to increment this variable. This function going to return a value. I'm going to type return, and then I use Carly ases. And it's going to retain a function, and we can take any name for this function. I'm going to type next. In the next function, I'm going to return another value. And here I create function inside this function. Inside the calibraces, I want to return, if you remember, our iterator function written an object, and inside the objects, it's written value and done. Similarly, I'm going to return an object. For keyword, I'm going to type value. And I'm going to return whatever array I get. I'm going to type a doubler and inside the square basis, I'm going to increment this variable. I'm going to copy this variable and paste it here, and I use and I use plus plus nine to increment it, and our next property is done, and here I'm going to pass false. Now I want to call this function in my console. I'm going to type console dot log inside the parenthesis iter dot, and our function name is Next. If I set this file, it's going to print our first value 20. If I set this file, you can see my console, it's written an object, and it's print our first value 20. Done falls and value is 20, and now I'm going to call this function three time. I'm going to duplicate this line two time. If I set this file, you can see my console, it print out three different values. But if I call this function, fourth time and set this file, it's written undefined. But the problem is, but the problem is done written false. But we need to return true, as like our iterator function written. For this, we need to move this written section inside the P condition. Here I'm going to create a e condition, I, and also I'm going to create condition else. Inside the ecdition, I'm going to check the done value. Inside the e condition, I'm going to type next num value less than dot lane. I mean if next num value less than dot lane, then inside the e condition is going to return this result. In our s part, we need to return de true. I'm going to copy this line and paste it here. I'm going to remove this value section and set De value true. D guys. If I save this file, you can see, oops I did some silly mistake. I type wrong spelling for length, z t H. If I save this file, now you can see in my console, for this three value, it written falls, and there is no fourth value in our NA, so it's written true. Now it's clear for you, how we can create our own iterator function. We basically use it if we want to control the iteration. If we want to just print the value, yes, we can. Just we need to type dot value. If I set this file, you can see the exact value 20. This is our own function, which act like an iterator function. But as you can see, we need to use multiple line of codes to get the result. But if we use iterator function, then single line of code is enough to get the result. In the next video, we are going to learn about generators. Thanks for watching this video. 37. Generators Intro: Hello friends, nice to see you back. In this reteral, we are going to learn a new future about modern Javascript. Generators, suppose we have a function named demo, and inside the function, I type some multiple statements, like masses one masses two masses three. Whenever we need to call the function, just we need to type the function name. Demo, and then it's going to print all the statement one by one in our console. But the problem is we have no control in this function. If I call this function, it's going to print all the messages. But I want to control all these tapes. When I need to print first message, I can. And when we need to print our third message only, then I can do that. And if I want to print our first message and our third message, and I want to scape our second message, then we can do it. But we can't do it in our normal function. To solve this kind of problem, JavaScript S six version introduce a new feature named generator. Generators asically a function, just on to follow a different way to create it. When you create a function and take a function name, we need to use star sine before the function name. Now it's a generator function. Now we can control all the statements inside the function. If you want to stop any statement, you can, but we need to use a special keyword name yield, something like that. It's mean pause. I declare our function. When I call this function, it's going to pause our statements. If we don't call this statement, it's not going to be execute. Let's see how it's work. First, we need to call the function. We need to create a variable, and then we need to assign this function with this variable. You can see from our first statement, we use yield. It's mean from our first statement, we pause our code. If we want to see the masses one, we need to use next function, a dot next. We learned about it in our previous video. We can print this statement in a document or a console. It's up to you, and this function going to retain a value masse one. So this function going to print our first value. Similarly, if you want to see the second value, we need to use next function once again. And if you want to see the third value, we need to follow the similar process. We already learned about it in our previous video. Now you understand the benefits of using a generator. We have total control of our statements. So let's start the practical and see how it's work, and I'm going to show you different examples. 38. Generators Tutorial: Here you can see, side by side, I open my Visual Studio codaor, and I also open my browser using Lp Server extension. I already create an STL file index dot STL. First, I'm going to create script tag. Inside this script tag, I'm going to create a normal function. I'm going to tie function, so I'm going to tie function, and you can take name for this function. I'm going to take gen for generator. Inside the function, I'm going to print two statement, dot log, masses one, and console dot log masses two. Normally, we can create our function like this, and Whenever we need to call the function, just need to type function name, Gen, and that's it. If I set this file, and you can see my console, it print out all the statement, masses one and masses two. We have no control head yet. To control this function, we need to convert this function into a generator function. We need to use star sine before the function name like this. In that way, we can convert this function into a generator function. If I call this function, it is going to print any masses in our console. Let me set the file. Here you can see, I do not print any masses in my console. Because now it's not a normal function, it's a generator function. If I set this generator function into a variable, something like late, A equal to g en, and return this function in our console. I'm going to type console dot log inside the parenthesis, A. If I set this file, here you can say it's written something. If I open this drop down, it's a generator, and if I open this generator option, it's provide some function. Next function, written function through function, Using this method, we can do our further job. Mostly, we use next function. Let's use this function. A dot next. If I set this file, now it's going to print our statements. Let's save the file. Here you can see, it print our masses, masses one and masses two, and last it print value undefined and done two. It's means there is no value after masses two, but we already don't have any control in our lines. We can use el function to control the statements. I'm going to use el function after this masses one. Yield, and I'm going to send a message, d Number one. Also, I'm going to call this el function up to masses two, el number two. When I call this function, it's going to print our first masses, then it's run the yield. Then it pause our code and stop executing other codes. Let me set this file. If I set this file, you can see, it print out masses one, and then our yield, return an object. Here you can see, it's written two value. One is done, and another one is value. Done value is false, and inside the value, it written our masses, yield number one. And we already know that why Don value written fals because there is another message in our function. That's why it written falls. If there is no message in our function, then it is done true. We already learned about it in our previous videos. Now I'm going to call this next function once again. I'm going to begin this line and set this core. Here you can see, it's print our masses to. If I call this function three time and set the file, it is written undefined, and in Don Value is written true because there is no third masses in our function. If I remove all the core, and also remove the yield message, and then set the code is written undefined. It's mean if there is no value in yield, then is written undefined. But if I assign any value, in our case, one means masses one and then set the file, Halccy in value is written M one. Now I need my code back, so I'm going to press control. And set the file. For better understanding, I'm going to remove these messages. If I set this file, you can see, it's print one and Eel two, and it's written undefined because there is no third value for L. I'm going to create another l in our function. So I'm going to duplicate this line, and number three. If I set this file, now it's written false, and now I want to print one and three. I want to scape two. For this, we need to call this function outside the console. I'm going to type A dot Next function. If I set this file, ricc is print el one and L three. In this way, we can control this function. We can execute any particular section using generators. As I told you in my previous video, if you want to print this value directly, just you need to use dot value. If I set this file, you can see it print. You can see it print our messages directly. But what? If we have 300 yield in our function. In that case, we can use four loop. Let me show you that. I'm going to remove the lines, and I'm going to type four inside the parentheses value A, then inside the loop, console dot log inside the parentheses value. If I set this file, you can see my console, it print over all the yield. No matter how many ld use in our function. Now I'm going to be showing a new method, how we can use yield in a different way. For this, I'm going to remove these lines, and I'm going to take a variable late result equal to el. I store el value in a result variable. I need to send the el value. For this, I'm going to remove this line, and I'm going to type a dot next. Whenever I call the next, automatically, it call generator function, and I'm going to do this line, and I'm going to pass the value three n date. Now this value set to be yield value, and we pass the value in a result variable. Also I'm going to print this value in my console. I'm going to type console log. Inside the parenthesis, I'm going to use template string method. I'm going to type bats. Inside the batik, I'm going to type colon do sine. Inside the Css, I'm going to pass this variable result. And semicon to in this line. If I set this file, you can see in my console, it's written 300. Basically, I'm going to set ld value outside to the function. In our normal function, we send value as a parameter, and then we create arguments to set the value in a variable. If I use eight next function two time and send value as a parameter, it's going to set the value as a value. Not only that, we can calculate our value. I want to multiply this value with ten. Star ten. If I set the file, you can see in my console, it return 3,000. Not only that, we can send multiple values. I'm going to reed this line, and I'm going to send 400600. But if I set this file, it's going to return only one result because we use y only for one time. I'm going to set this file. He can see it's sen our previous result, 3,000. To get the all result, we need to create an array. I'm going to remove this line, and I'm going to use square ss. Inside the square ss, we need to type. And we need to type yeld three time because we pass three value in our next function. I'm going to type comma yield, go yield. For 300, it's going to use this one, and for 400, it's going to use this second eight, and for 600, it's going to use third el. If I save this file, it's going to return an. Let's save it. Here you can see, it's st all the result. As an array from. But if I send another value, so I'm going to duplicate this line. Here you can see, we just use three l in our array. Is going to return nothing. If I set this file, you can see there is no changes. Now I want to see the third value. For this, we need to tie. For this, just we need to use square verses and inside the square verses, we need to pass the array number. Two because our array starts with zero. For our third array, we need to pass two. If I save this file, is going to return only third el value, 600. In that way, we can check particular yield value. Obviously, we can pass string value inside the next function. Now I want to pass single value with yield, and I also want to pass value with e. I'm going to remove this line. And I'm going to type yield. Here I'm going to type 44. In our next yield, I'm going to pass an array. Instead of the square ss, I'm going to pass PHP coma Python, coma Java Script. Now I want to read their value for this, I don't need this line, and I'm going to and I'm going to move this line inside the console. I'm going to tie console dot log inside the parenthesis inside the parentheses, I'm going to pass a dot next. And then smcore to end this line, and I'm going to duplicate this line. Our first next function for our first field, and our second next function for our second id, which is an array. If I set this file, you can see my console, it return our first value 44, and also it return our array. If I open this array, you can see it has three values, PH, Python and Java Script. In our generator function, when we use multiple yields, we can take single value, we can take array, and also we can use objects. We can use any type of value with el. This time I want, each array value came separately. I'm going to use Star Sin air. If I save this file, it's going to return our first array value PHB. If we want to see the second ara value, we need to call this function once again. If I set this file, here you can see our second a value, Python. For our third value, we need to call again, it's written Java script. But if I call this function, once again, it's going to return undefined. We can print array value differently. We need to use star sine with yield. In our next example, I'm going to use yield with spray operator. I'm going to remove these lines, and also I'm going to remove this one. In our first tal, I'm going to type PHP. In our second eld I'm going to type Python. In our third l, I'm going to type Java. In our fourth hed, I'm going to type HTML. And it is enough for this example. Now I want to print the first value in our console. I'm going to type console dot log and set the parenthesis a dot next. I want to print their value directly, and I want to print the value directly, so I'm going to use dot value. Semicolon to end the line. If I set this file, you can see it's print only PHP. But for the remaining values, we can use spread operator. I'm going to bet this line and inside the consolt lob section, I'm going to type square ss, and inside the square ss, I'm going to type three dots. We'll learn about spray operator in our previous video. I'm don't going to explain it here how it's work. Then I type or variable name. A. If I set this file, here you can see, I'll print all the remaining value in an array. We know spread operator written array. But if I call this line to t and set this file, it's going to return our first two values and remaining two values is written array because we use spread operator. There is another function that we can use with generators, which is written. Let me show you this. I'm going to remove this line, and I'm going to tie a dot written function. Here, we first call our next value means PHP, and then we call our written function. If we use written, it stop executing our other yields, and also we can send masses with written, so to type n. If I set this file, here you can see, it print our first of PHB. Then is written means our written message, and also print true, and we already know when it's written true. If there is no other yield in this function, then it is written true. Let me show you. If I try to print this next function, up the written and set this code, it written undefined. But you can see in my function, there are other three els. It's main is not going to execute other lineup codes because we use written function. When we call written function, it cannot read the next code. The main benefit using written function is when we have to stop our code middle of the execution, then we can use written function. I hope now it's clear for you, what is generator and why and how we use it. Thanks for watching this video. See you in the next torial. 39. Strict Mode : Hello, guys, welcome back. In this tutorial, we are going to learn a new feature about Java Script, which is strict mode. Normally when we type JavaScript code. There may be syntax error in the code. Normally, we ignored it. Also it do not provide any error masses to our browser, but we get the effect later. As I told you, browser do not provide any error message. So it's very difficult to rectify this kind of error. Let me show you an example. As you can see, x equal to 42. Here I take a variable name x, and I assign a value 42, and then I print this variable in my console, and it's going to print 42 in our console. But if you notice there is an error in our code, when I assign the variable value, we do not provide the declaration type. I want to say this variable type should be late or const. O browser also not going to return the error. There are many syntax error that we miss out on. It is very difficult to rectify. To resolve this problem, JavaScript came out a new feature, strict mode, just on to type a symbol statement top of the code. Something like that. Inside the quotation, strict, and then you can type your JavaScript code. This command going to send a strict message to our browser. It's going to tail our browser if there isn't syntax error in our code. Send the error message and stop execution code. Now you understand why it is very useful. We can rectify our mistake with that. Let's start the practical and see how it's work. Here you can see, side by side, I open my video sto creator, and I open my browser using Life Server extension. I also create a STL file named Index dot STL. First, I'm going to create script tag, and now I'm going to create a variable, but I'm going to provide declaration type x equal 242. Now I'm going to set this file, and I'm going to show you my console. Here you can see there is no error in our console. I'm going to type console dot log and set the phesis or variable x. If I set this file, you can see my console, it print our value properly, but there is a syntax error in our code. We do not declare it is const or late. To solve this kind of problem, Java script introduce strict mood. For this, we need to type quotation and inns this quotation, we need to type strict. And semicon to end this line. That's it. Remember, always, you need to provide it top. If I set this file, now you can see in my console, there is an error. X is not defined, line number 11. But if I use and then set the file, arroganc is printed result and there is no error. Let me show you another example. For this, we need to create a function. So I comment out this line, and I'm going to create a function, function and our function Name is hello. Inside the car verses, I'm going to take a variable, but I'm not going to declare the variable. B equal to 30. Also, I'm going to remove this word. If I set this file, you can see, and also I'm going to comment out strict. If I set this file, he can see there is no error in our console. But if I turn on the strict mole and set this file, you can see the error. X is not defined. I'm going to type var. If I set this file once again, You can see there is no error in our console. But you can see we do not provide declaration type for this variable. I'm going to call this function. Hello. If I save this file, here you can see, B is not defined. Now it show the error. But if I type and set this file, you can see there is no error in our console. Here you can see our strict mode, work on function and it also work on outside the function. By mistake, if you type anything in your code, which is don't follow the JavaScript rule and regulation, then it show the error. Not only that, we can use strict method inside the function. I'm going to move inside this function. If I remove this word and set this file. Now this method only work on inside the function, not outside the function. Let me show you. I I set this file, Harry can see there is no error in our console. But as you can see, we do not use word for declare this variable. But if we do not use declaration inside the function and then set the code, you can see the error now. Now you can see the error. E two if we check only those code, which is below then street. And now I'm going to show you another example, which is also related to function. For now, I'm going to remove this lines. I don't need this lines, and I'm going to pass some parameter in this function. Our first parameter is A B, and our third parameter is also B. I use same parameter for our third parameter, and I'm going to move this U stree outside the function. For now, I'm going to comment out this. Now inside the function, I'm going to add this three value, and I want to print this in my console. I'm going to tie console. Dot log instead the parentheses, A plus B plus B and semicolon do in this line. When I call this function, I'm going to pass three different value for this function. Five, ten, 15. That's it? We know if we sum this three variable, it's going to return 30. But if I st this file, you can see in my console, it return 35. It's written a wrong result, 35. Because we use our second parameter twice. That's why it's written 35, and also you don't provide any arrow in our cosme. It's a very complex problem. To avoid this problem, we can use strict method. So I'm going to uncomment it. And I'm going to save this file. Herc C M one, it prints syntax error, Bublgate parameter will not allow for this context. Our strict method provide proper error message. But if I comment out our strict method and set this file, then nes not provide any error message, and also it provide wrong value. To resolve this problem, we need to use proper variable name. C. Also, I'm going to change here C. If I comment out this one and set this file, now you can see there is no error in our console, and it's also written the exact value. Here you can see using street mode, we can find the errod in our code. Basically, syntax error, and I suggest you always use street mode for your code. Just include the line first and then type your code. That's it. Thanks for watching this video. 40. Error Handling Tutorial : Hello, friends. Good to see you back. In this tutorial, we're going to learn about error handling. You already know we can check Javascript error in browser consul, but sometimes it's very complicated to understand it. Sometime all the errors are shown at the same time, and it is very difficult to rectify all the error atoms. To handle this kind of error, we have a special method in JavaScript. Try and catch. And we already learned about a little bit in our previous videos. Whatever code we want to do here, we pass all the code inside the tribe block. If there is an error inside the tribe block, then immediately redirect to cache block, and we can show any message inside our cache block. Without wasting your time, let's start the practical. Here you can see, side by side, I open my videos to the Creator, and I also open Crome browser using Live Server extension. First, I'm going to type script tag inside the head tag. Inside the script tag, first, I'm going to type some randomly text. This text is not a variable or not a Javascript function, or not a Javascript method. If I save this file, it's going to return an error. Here you can see a reference error. This is not defined. But sometimes errors are very complicated to understand. For this, we can use tri catch method. First, I'm going to type try. With that, we need to type catch. Inside the tried block, we can type any code. So I'm going to print a message inside the console. Console log inside the parentheses, I'm going to type start and so we go on to end this line. I'm going to duplicate this line, and I'm going to end, and then give a space between these two message. If error occurs, then inside the cache block, I'm going to send a message. Console log inside the parenthesis error. If there is an error in this strip block, then automatically run catch block. If I set this file, here you can see, there is no error. Once again, between these two message, I'm going to type similar random text. If I set this file, now you can see in my console. First it print our start message, and then it's print our error message. If there is an error in single line, then it stop executing other codes and automatically run catch Mthold. Let me show you another example, and I'm going to convert it into a function. As you can see, we do not declare this function. If I set this file, you can say it's written the same error. First, it execute our first message, and whenever it try to run the function, and then it's found, we do not declare this function. I stop executing other codes, and start executing catch block. Similarly, we can print this error message in our document, and now I want to see the exact error in our documents. We still don't know where is our mistake is. I want to print this exact error in my console. For this, I'm going to take parentheses inside the catch block after the catch and inside the parentheses, I'm going to take a variable. In our case, e RR. Whatever error it's written, it's going to store in this variable. And if you want, we can print our error in this browser or console. I want to type e do. If I set this file, now you can see the error message. This is not defined. We do not define this blah blah text. With that, we can see the exact line number. In that way, we can understand the error better. Also, we can handle our error one by one. It's not going to throw all the error at once. I want to say one more important thing about tri catch. It works synchronously. If we use set time out function, it is not going to work properly. Let me show you this. I want to remove these lines. Inside the tri block, I'm going to use set time out. Inside the set timeout function, I'm going to create an anonymous function, and then I use car brass, and I want to delay this function for once again. Inside this function, I'm going to provide some error. So random text. Let's increase the delay time, 3 seconds. Now you can think, when do we run this code, it's going to check this one up to three second. If there is an error, it's going to redirect catch block. No, it's not work like that. Fine run this code. In this case, it won't work at all as soon as code start running, and it will come in tri block, and here and here, this function going to check that it has to run after 3 seconds. Then the code after set timeout function, that will start running. If I set this file, He can C, it's not showing the proper error masses from the cache block. Our tri cache method not work synchronously. But we can use tri and cache block inside the set time out function. I'm going to move this tri and cache block inside the set time out function. I'm going to cut this portion and move it inside this set time out block, and also need to move this cache portion. And inside the tri block, I'm going to provide a arrow. When we run our script, in that case, after three second, it's going to show us the exact error in our console. Let me show you that. I'm going to save this file. I need to wait for three second. Now you can see the error in our console. This is not defined. It's a reference error. We need to use tri and cache block inside the set time out function. Otherwise, it's not work. Also we can show the error masses separately. For this, I'm going to reduce set time out function. For now, I don't need this. Inside the cache block, I'm going to tie error dot name. I do pict this line. Now I want to print error message. Error message. We can print exact error messages differently. If I set this file, you can see err name, reference error. A error message. Blah blah is not defined. If you want to see arrow name and error masses together, then we can use stack rot stack. If I set this file, now you can see error name error message at once. Using error stack, we can print error name error message together. If you want to print error message or error name differently, you can. The most important line is message. We just want to know what is the exact error. We can comment out both of the lines, and just we can print the message. If I revoke this comment, and you can see a reference error. Now the question is, what is the reference error? Now I'm going to tell you how many types of error are there in Java Script. Here you can see seven difference error in Java script. Our first arrow is evil error. This error occur, when we use evil function. It's not a very important arrow. Then come range error. It's occur when we use a steml range attribute. If error came through the range attribute, then we can show the arrow using range error function. Our main and important arrow is reference arrow. If I call a variable or a function, which is not defined in our core. Then it's written reference error. Thens come syntax error. It is the most basic and important error. When do you use loops or conditions. Typing mistake is the basic problem for beginner. Sometime forgot to enclose calibraces, quotations, et cetera. In that case, syntax error occur. Then come type error. As you know, there are various types for variable, bulion, number, string, et cetera. These are predefined types. By mistake, user type different type of input, then type error occurs. Our next error is URI error. This error occur. When we pass URL in URL bar. If you type any wrong method to pass URL in URL bar, then URI error occurs, and our last error is aggregate error. I told about this error in our promise method video. When we use all method in promise. If there is an error, then we use aggregate error. When we use tri cache method in Java Script, we can show these errors. Let's start the practical. For this, first, I'm going to remove all the methods. If different error occurs, for this, we can print different messages. We can use P condition for that. If inside the parenthesis, our error instance of reference error. For this, we can show different message. Inside the console, I'm going to type reference error. You can show any proper message error, and now I'm going to print different masses for type error. I'm going to type LCP. Inside the parenthesis, I'm going to copy this line and change reference error with type error. Inside the clivss, I'm going to print console dot log, inside the parentheses, type error. If our error is instance of type error, then it's going to print this message. We can create different LSP condition for different error. At last, I'm going to create s conditions inside the parenthesis, console dot log unknown error. If I save this file, here you can see sprint reference arrow, and I type error occurs, then it print this masses. Otherwise, it print al arrow. If we want to get data from the server as a jason from, then we use try and catch. Let me show you this. So I'm going to remove all of the score. And inside the tried block, I'm going to take a variable. Late SN, and I'm going to assign a Damien data to this variable. We already learned about JN in our previous video. As a property, I'm going to take name inside the double course name. Colon inside the double course add one. And similarly, I'm going to take another property H. It's a numeric value, and is 24. It's a numeric value, so I don't use quotation. It's a JN permit. Assume that we get this data from the server. For this, we can use F method or jx. It's deben on you. First, we need to convert this data into a script object. I'm going to take a variable Late user, and I'm going to use a JN method. JSON ps. Inside the parenthesis, I'm going to provide the variable name. JSN. Basically, Jon dot parts function, going to convert Json object into a Javascript object. Similarly, we have opposite function, Json dot stringify, and convert our Javascript object into a JSN data. If we want to convert the server data into a object, then we need to use Jen dot Parts function. If we want to pass data to the server, then we convert the Javascript object into a JSN data using Jon dot stringify method. Now we can read the data from the user variable. I'm going to print the data in my console. Console dot log inside the parenthesis, user dot name. If there is an arrow in our code, I'm going to print this arrow in my console, console dot log r, and also I want to print student H. Do this line, U H. Before I set this file, we need to move this JSON code inside the quotation. Otherwise, it's act like a Javascript object. If I set this file, here we can see student name add one and is age 24. If there is an error in server or the JN file, then we can show the proper message using tri and cache block. Suppose there is an error in the JN file. Some, one quotation. Now the JSON format is not correct. If I say this file, here you can see, there is an error in line number 14, syntax error, unexpected token A in JN at position 16. It cannot read the A. It expected a quotation, not the A character. That's why it's written the error. If you show your own masses, yes, you can. For this, we can throw a error masses from the tribe block. Let me show you. But first, I'm going to resolve this JSM file. And now I'm going to create a condition. I inside the parenthesis, if we do not receive user name in JSON format, inside the e condition, I'm going to throw a message. We use a different method throw new error, that's it. Inside the parentheses, I'm going to throw a message, incomplete data, and our message is no name. I'm going to move this line below the ep condition. And now I'm going to remove the name from the JN data. If I save this file, here you can see incomplete data, no name, and after putting the error message, it stop executing our code. When we throw the error message, it automatically redirect to the cache block and print the message in our console. At last, I want to show you one thing. We try and cache block, we can use another block. Finally. Basically, it's optional. If we use finally block, no matter what it's going to execute. Basically, I want to say, if there's an error in our code, it stop executing other code in our tri block, but it cannot stop executing finite block. Let me show you console dot log inside the parenthesis, I'm going to print a message. No matter what I'm going to print. If I set this file, he can see, first did print our error, incomplete data, no name, and then it print, no matter what I'm going to print. If I resolve the error name, add one. If I set this file, you can see it print student name, and one. Also it prints student age 24, and then you jump into the finality block and print, no matter what I'm going to print. It's not going to check, there is an error or not. This block will always execute. Finally method run in every case. I hope now you understand why you use try and catch block and how we can handle errors in our code. Thanks for watching this video.