Naan Mudhalavan Frontend Development Session - 6

39:22 Yeah. Hi all. Uh very good morning and welcome you all to the front end development with React and MongoDB data administration. So let us begin.

42:08 So uh guys I think uh in the last class you have covered about how to create a function, how to call a function, how many ways you write a function like uh function expression regular function. function, arrow function, right? And also I think you have seen call back. Also you have seen call back. Okay. So we have something called you know promises and a sync aait in

42:53 JavaScript to execute our asynchronous code. So what is synchronous and what is asynchronous? Let me tell you function s y n c just let me write this uh function name here like this here I'll write console log start dot

43:46 console log. [Music] Let me write uh should I write pending or you think Let me write processing. Okay. And console log. And so what is synchronous? Is synchronous? Let me tell you.

44:32 So I've uh written this program. Now I've written this function. Now let me execute this. Before that let me change my directory node index dot JS. What happened? I will not call the function synchronous. I'm calling this function synchronous.

45:20 Okay. Now let me execute. Save it. See start, processing and end. What is synchronous? The execution will take step by step. Okay, line by line. Okay, it will start executing this, then it will start executing this, then it will start executing this. Okay, so this is synchronous. Think uh if this is taking a time at the line 30 it is taking some time. So the execution will stop here. It will take

46:10 I think this uh line is taking 5 minutes. So if this is synchronous this execution will stop here. This execution will stop here. After 5 minutes this line will execute then this line will execute. But that shouldn't happen. But so that is why here asynchronous y c. So that is why some we have something called asynchronous

46:56 okay asynchronous uh functions here. I mean I'll tell you what is asynchronous function. the same thing. Instead of writing this console here, set time out. Okay. Now here I am giving 5 seconds time.

47:44 So now this is this will take I think this will take this also will take 5 seconds. This code will also take 5 seconds. So now if I if I call this function now see what will happen.

48:34 See this got executed first. This got executed second. After 5 seconds this got executed. That means actually actually uh JavaScript is single threaded that means this line will execute then after this line will execute then after this line will execute but we use a synchronous the definition of asynchronous I'm telling so this is how synchronous works like non-blocking of code you can call non-blocking of code. See this is getting executed. Okay. And till 5 seconds see this will take 5 seconds of time. So it is not blocking the code

49:22 here. It is coming executing this. After the result come again this is getting executed. After the result come this is getting executed. Understood? So this is the meaning of synchronous and asynchronous. Okay. Now let us come to promises. Now let us come to promises understood what is synchronous and

50:08 asynchronous. Synchronous is executing the code line by line whereas asynchronous is non-blocking the code. That means if the line see this I I've written a function inside my function I have written uh three statements in that the second take uh code line is taking some time. So instead instead if it is asynchronous this will you know this will execution will start here but it will not block here only. It will not stop it here only. it will move on to the next line. Okay. And it will also execute this also.

50:59 Understood.

51:59 Okay, this is about synchronous and I have showed you I've showed you just the difference about synchronous and asynchronous. Don't worry. Now we have something called promises. First before promises, before prom promises, let me uh let me tell you about you know uh we have something called call back help.

52:55 So I hope everyone um understood about uh call back. So what is actually a call back? Call back is a function calling another function, right? function like a function uh is passed as an argument of another function is called is usually a call back. Fine. For example, in a real time example, uh

53:41 I'll uh see if you uh what you called like, huh? If you order a pizza, you order a pizza and you'll give a phone number. So what happens here after your pizza is getting ready when your pizza is ready then your they will call you right? They will call you like I'll give you an example in code.

54:28 So let me write a function function uh grid. Okay. And I'm taking two parameters here. Name and one is the call back. Name and one is the call back. Okay. And I'm creating a call one more function here. Function say goodbye.

55:14 Console log. Goodbye. Okay. So what I need is I want to pass this function as a call back to this function. And here what I want to print console log. Okay. answer log name and I'll call the call back function fine name

56:02 and goodbye okay calling the name like I name Okay. And goodbye. So what I want to do here now I'll call this greet function. Now I'm calling this greet function. I have to pass name and the call back. So what is my name? I'm pass this function here. I'll pass this

56:48 say goodbye function here. Now let us see what will happen. We haven't shared yet. So hi engine goodbye. Hi engine is from here and goodbye is from I'm calling a function which is passed as an argument here. What function has been passed here? This function. So this function has been executed. So this is what call back is a function passed as an argument an argument to another function. Okay. And it is called later

57:37 and that function is called later after uh some task is done. Okay. So this is a call back. So now let me give you an example.

58:25 This is all this is about call back. Okay. This is about call back now. What example should I give? Let me write an example.

59:46 write step one. Okay. But this will take some time. Set time out.

1:00:44 This example won't work, I guess. Wait, let me give you another example. [Music] Okay, I'll give you another example. So, let me write uh let this function be

1:01:32 like that. So inside that let me take a call back function. Okay. Inside this I am writing I'm writing console log step one. Sorry. Answer log step one done. Okay. After this, I'll call this call back. Fine. I'll call this call back. Here I'll give uh

1:02:18 uh 2 seconds of time. Okay. Here I'll give 2 seconds of time. Similarly, I'll write three functions. This is step two. Step two done. This is taking 5 seconds. And this is step three. Step three done. This is taking 3 seconds. Okay. Cross check this.

1:03:40 Okay, this is called back. This is different. Fine. No. For example, let it be like this. Ctrl C. Now without call back see what will happen.

1:04:34 Okay. So these are the functions without callbacks. I want to run this code like first step one should execute, step two should execute, step three should execute. Fine. Two three functions I have written without a callbacks. So I want to console like um step one done then step two done. Let me give one second for this. Okay. Now I want this to execute. First step one should come, step two should come, then step three should come. Now

1:05:20 will that work node index.js? Oh, I've not called function. So, I'm calling step one and I'm calling step two and I'm calling step three. Fine. I'm calling this functions like this. Save. Enter.

1:06:06 Step two done. Step three done. Then it is coming. Step one done. So that shouldn't come. I have called step one only. Then step two. Then step three. But what happened here? Step one is taking 5 seconds of time because I have given a set timeout function here. So after 5 seconds only it will give my console. Fine. Now again after step two it is uh it is not stopping here because uh this is set time out is asynchronous. It is coming here at step two. It is executing uh you know after

1:06:53 uh it is sorry first step one is executed then it is coming to step two. Step two for step two I have given 1 second only immediately the result is coming. Okay then it is coming to step three. Step three is taking three uh 3 uh 3 seconds of time. After 3 seconds step three is getting executed. Then after 5 seconds step one is getting executed which shouldn't happen. This shouldn't happen after step one only. Step two should uh print. After step two, step three should print. Okay, this should happen. Okay, but it is not happening. So that is why we use something called

1:07:43 callbacks. So that is why we use something called callbacks like like we have seen Take

1:08:55 So now what we'll do is we'll take a call back for each function and I'll call that call back here also I'll take a call back. These call backs are nothing but I'm taking uh call step two as a call back here. Okay, after this line print I want to call the uh step two function. Okay, inside step two function after this line print I want to call this step three function. Okay, understood. So this is call back. This is how we use the call back. Fine. So how to execute it? Now let us see. Now here I'm passing now I'm calling

1:09:43 step one function. inside step one. After step one executing, I'm passing another function. Okay. Now I'm passing step two to it. Okay. Now inside step two again I'm taking a function inside that function I am passing step three to it

1:10:29 now inside that step three I'm passing console.log Okay, understood. See this is a function which I'm passing to this. So this function. Okay. So inside that function first it will go into set timeout. After this executing it will you know uh call the call back function.

1:11:16 So inside call back we have written it like this. Now let us save and now let us execute it. Now see how it will come. Step one done. Then after step two done. Then after step three done and completed. Okay. This is using callbacks we can achieve this. Using callbacks we can achieve this. Okay. Inside of function we are calling another function. Okay. So in that function again I have called one more function. For that function I have called one more function. In that function I have called another function for that step three function also I've

1:12:03 called another function. So this is somewhat difficult. So here it is very simple example I have given right. So that is why that is why this is something called call back hell. This is something called call back. This is something called call back help. Okay. This is something called call back help. Okay. So it will go on increasing like this. It will go on increasing like

1:12:49 this. Which shouldn't happen. Which shouldn't happen. Okay. So this is something called call back help which shouldn't happen. So that is why we have a few concepts like that is why we uh uh few concepts like promises async and await. Okay. Promises and async await. So the same example let us see with promises and async how it will happen how you know uh

1:13:35 how can we achieve it we'll see it So first of all let us see how to write a promise. So these are all call backs. These are callbacks.

1:14:20 Okay. Now let us come to promises. Now let us come to promises. Fine. Let share. So first of all, what is a promise? Like uh example should I give?

1:15:17 So like promises um if you the promises are used for asynchronous programming. Okay, like I said, like I told you, this is a synchronous. Where is our asynchronous program? This, right? This is a synchronous program. Okay, this is our function. So you're ordering a food like think if you are ordering a food that is an if you

1:16:03 make it a synchronous see what is synchronous and what is asynchronous I'll tell you in this example if you go get the food come and eat that is synchronous programming what is asynchronous you sit at home you order food it It will take some time right some half an hour in that half an hour you can do some other work in that half an hour you can do some other work right this is synchronous program programming right like see once again I'm repeating you go to the restaurant you buy food right you go to the restaurant you buy food and come home you eat it will take

1:16:52 uh You you going to the restaurant, buying the food and coming home, it will take you think half an hour. Only one task is being executed in half an hour. But if you make it a synchronous like ordering the food, okay, like ordering the food, your food will come in half an hour. In the meanwhile, in the half an hour, you can do whatever task you want. Right? This is a synchronous programming. Non-blocking of your work. Okay? Here it is non-blocking of your code. But in real time, I'm in this example I'm telling you non-blocking of your work.

1:17:37 Right? This is asynchronous programming. So in this asynchronous programming we'll use this promises like you have ordered a food in that food ordered after ordering till your restaurant is uh you know or else uh what should I tell Huh? Till your restaurant will accept the

1:18:22 food that means it is in pending state. Right? When whenever you order food your restaurant will take some time to accept that means it is pending. Right? So uh this example okay pending fine. So in JavaScript promises have three states. Wait.

1:19:08 JavaScript promises will have initially it is pending. And uh the second is resolve and the third is

1:19:56 okay. Initially we have three states. Okay. First initially for every promise it will be pending and it have to return resolved or reject like till your restaurant will accept the food. It is in pending state. It is in pending state. Okay. till your asynchronous function will accept the food. It is in pending state. After that, after that, excuse me, if your

1:20:43 promise is accepted, then like your order is accepted. Till if you get the order by your delivery partner then it is resolved then your promise is resolved. Okay. If in between uh restaurant will cancel the order or delivery partner will not will be not assigned or you have canled the order then that promise will be rejected. Okay, understood. Initially the promise is pending. Actually the promise is pending. After that if the delivery the restaurant

1:21:29 accept the order. These two cases are possible. Like if you correctly get your order delivered if you correctly get your order delivered then it is resolved. Your promise is resolved. This promise is nothing but you have given pro Swiggy has given you promise that it will order food right you are ordering a food right you have ordered through Swiggy or Zumato you think Swiggy or Zometo will promise you that they will deliver the food so inside that promise inside that Swiggy till the restaurant will accept the order it is in pending state once

1:22:15 the restaurant accepted Then till you get the order after you uh receive the order that means the promise has resolved. Whatever Swiggy promise has made that it will order the food it is resolved. In between in some circumst uh in some uh circumstances if you cancel the food or if restaurant cancel the food or if the delivery partner is not assigned. So your order in some circumstances it will get rejected right. So that is this rejected state. Okay. In this promise you have resolved or rejected state. So

1:23:00 now what we will do is this is about promise. So in call back you have seen it like this right? Uh the function here you have seen the functions uh like this call back hell. So this is somewhat called back hell. Something called back hell. Okay, which you cannot debug. Okay, which you cannot debug. So in this promise can debug. Okay, you can debug the error

1:23:49 and it is also in readable format. So the same function will take the same three functions will take the same three functions. Let us take Guys, give me a There we go.

1:25:08 Okay. So here instead of this uh what I'll do instead of this And let me copy paste this first. Let me uh we'll remove call back here. We'll remove the call back here from everywhere. We'll remove the call back. Wait, instead I'll copy this code without the call backs. Okay, copying this code.

1:25:58 Now inside this function, I'll make promise. I make a new promise. Okay, forget about reject. We'll see reject afterwards. Okay. Now I'll paste this inside. Okay. After this after this. Now

1:26:45 [Music] let me call the resolve. Okay. I'll tell after console login this resolve. Okay. Similarly here also I'll create a new promise. I'll remove reject for now. Copy it. X Ctrl + V. Then here also I'll call the resolve. Fine. Same here also. New promise. I'll remove this reject from here.

1:27:42 Now here I'll call the resolve. Okay, understood. So now let us execute this. Okay, now let us execute this. Now here a small uh change. Okay, here a small change. Uh here we have to use something called inside step one you have to use something called after step one executes if and only if it resolves. If and only if it resolves

1:28:30 then you have this then block. Okay. Then you can tell execute step two. After that you can tell execute then execute step three. Okay. after that you can tell then I'll give another anonymous arrow function in this so log what we have given there completed right okay so this is how you write

1:29:17 then if you if you use promise if that is a promise is you have to write this chain in function called then okay sorry this is step two so here what I'm saying if step one is executed then only execute this step two call the step two function then only after step two is resolved then only call step three after step three is resolved call this function inside that whatever we have written excuse me now let us execute this excuse

1:30:06 What error we have got? Huh? Before this function is not returning anything. You have to write return error because there's nothing the function is called but no output is coming from there. If you give return then only the output will fine. Now let us execute. See step one is executed then step two then step three. Okay. Step one, step two and step three.

1:30:53 Okay. Understood? So this is about promises. This is about promises. Okay. Using promise also you can achieve a synchronous programming. Okay. Using promises also you can achieve a synchronous programming. So here

1:31:40 can see I've created a new promise. Okay. So this is how uh promise is that there is something uh we have uh reject also here for suppose reject. Okay instead of resolve if I call reject. So now let us see what will happen. Step one is done.

1:32:27 After step one, step two had a rejection there. Rejection you can think somewhat error there. Okay. Can think somewhat error was there. Okay. So for that you have to you know uh write dot catch method. So here

1:33:24 Okay, like this you can debug your error. Okay, now let us see using this catch block. Okay, after all the then you can use the catch block. See at step two you have got some error that means you have given reject here. So in reject if it is rejected if it is having some error it will not move on to this line. It will not move on to this line or this line. These both will get stopped. It will directly come here. Something

1:34:11 went wrong. Okay. Step one executed properly. It is resolved. Step two, it is resolved with uh it is not resolved actually. U we have given reject in step uh two. Okay. We have given reject in step two function. So in step two something uh you have rejected the promise. So something error was there. So it will skip these two steps. It will skip these two steps and it will come to catch and it is telling something went wrong. Something went wrong. And let me let us see

1:35:00 whether the error will get Okay, I'm not sending here. Let me send [Music]

1:35:49 Okay, let me Right. Something went in step two. Okay. Like this. I'll write here instead of something went wrong. Now let me execute this.

1:36:42 See something went wrong in step two. From where it is coming inside result I have given a statement. Sorry inside reject. given a statement that some so that using this catch whatever uh error you are getting from catch will be thrown into this catch block. Using that output you can print the using that you can print the error whatever you get. Doing that you can print the error whatever you get. Fine.

1:37:29 Understood. This is about promises. This is how you use promises to handle a synchronous programming to handle a synchronous programming. Okay. Uh, give me a 2 minutes break.

1:39:52 So uh if you want you can take a screenshot of this very important in JavaScript.

1:41:22 this code file I'll be sharing it with your faculty please uh ask your faculty now okay we have few more topics left with us in JavaScript and uh we'll see that so we can achieve this a synchronous programming in uh three uh three possible ways call back hell in using callbacks, using promises and using using one more thing we have async and await. We have something called okay

1:42:08 and await. So in uh let uh let us take a 5 minutes break. Uh I'll I'll drink some water and come we'll start as a wait. Okay.

1:49:24 Yeah guys, now let us see. Now let us see how to you know uh achieve this using a sync and await. We have a sync and await. Okay. So what this will do? What this will do? The same promise here. Let me comment this out. [Music]

1:50:10 Same thing. The same thing. the same functions. What I will do? The same functions. The step one, step two, step three. same functions using a sync aait using async aait how how can we achieve this? So

1:51:11 let I'll create an async function. I'll give the function name as uh run steps. I'll give the function name as run steps. So inside this I will call all the step one. Step two and step three. Then after

1:52:07 console.cloud Cloud. What we have written here completed right? Okay. If you write like this. So let us see um what will happen now. Let us see without a synchronous if I write it like this. And if I run, see what will happen.

1:52:56 First completed. So there is a rejection here, right? I'll tell you how to uh handle uh rejects also in this async. So there is a promise rejection step to done cls and third again let me so this got executed then step two got executed step three then step one this shouldn't happen right so we have seen using call back help to uh do this step one step two step three

1:53:43 and again we have seen this using promises now we are seeing it using a synink aait okay So how to use a sync aait in this? So before you have to make this function a sync. Okay, you have to make this function a sync and you have to use a keyword await. Await. Okay. Now see what will happen.

1:54:29 I haven't saved this. Step one done. Step two done. Step three done. After this step, after this step only this will get executed. Okay. after this uh promise only this will get executed. So this is an asynchronous function. Okay. See you cannot uh you know you cannot use this await keyword if you don't make this function a synchronous. See it has no effect on the type of this expression.

1:55:15 Await expressions are only allowed within asynchronous functions at the top level module. That means this function should be a synchronous. You have to define this function as a synchronous. Then using await keyword you can execute this functions step by step. Okay. You can execute this functions step by step. Okay. So you have seen that uh what do you call uh uh we are seeing about the error. So here we have an error.

1:56:00 So how to debug that error in this async away. So here inside this you can write a try catch block. Okay. Inside this try catch block you can shift the code up inside the try and inside the catch you can write console.log whatever error you get. Okay inside this console.log you can write whatever error you get. Fine. Now you can debug the error.

1:56:51 See something went wrong in step two. From where it is coming? From here it is coming. Okay. If you want You can also write For your confirmation you can also write

1:57:37 this is from catch block. Okay this is from catch block. For your understanding I'm writing it. This is from catch block. Something went wrong. Okay. This error is whatever error reject is throwing will come in catch. Whatever reject whatever reject is throwing it will come in catch. Okay. Whatever reject is throwing it will come in catch block. Understood?

1:58:27 So using uh a sync aid or this then catch you can see the using promises. Okay. Using promises you can achieve a synchronous uh programming. You can achieve a synchronous programming uh step by step. Okay. in two ways. Using then catch. We have used then catch here. Okay. Using this chaining function. Otherwise using async await. Using async await. Okay. Understood.

1:59:46 Fine. understood how to use this uh async aait then catch try catch when to use where to use okay you can achieve this asynchronous programming using then catch or try catch or async weight okay if you use async weight you can use this try catch or else you can use then catch H understood.

2:02:37 Okay. Now uh let us this is about asynchronous programming. So now let me uh

2:03:23 let us see uh string and array methods. Did I show you uh string and array methods? Now let me show you string and array methods. Let me take a string. Any

2:04:09 string is there here. Did I show you? No. Right. I've not showed you um string and array methods.

2:05:00 So let me take a string honest [Music] punch. Great equal to good uh gre equal to good afternoon. So this is a string right? This is a string. So we have a few methods called

2:05:49 wait let me show you console.log log date dot two. Do we have any function called delete? That is why it is not coming now.

2:06:37 Okay. Tool lower case is a function is a method. Sorry. Good afternoon. So it has converted all the characters in the string to lower case. Okay. Now let me console.log to upper case. Okay. Now let me console.log say good afternoon and good afternoon. You can see that is in this is in lower

2:07:24 case. This is in upper case. Okay. Like this uh you have many methods in string methods. Okay. And also you can find the length greeting dot length. Okay, you can don't for it.

2:08:18 See length of length of this is uh 14. Okay, length length of this string is 14. Okay. And then uh you have uh character at okay greeting dot character at whatever number you can give you can give okay character at uh this is 0 1 2 3 at three I'll give and save it now Then I'll run it.

2:09:08 See character at three is B. Okay. And uh And you can um name is already taken.

2:09:56 My name is already taken. Okay. So I can also concatenate greeting dot concat base comma name I'm sorry it is my name Right.

2:10:42 Good afternoon. Concat using concat. I can add space then whatever uh string you want you can after that greeting. Okay. And uh you can also uh search for includes greeting dot include greeting.incclude. includes inside

2:11:29 includes you can give whatever uh you know this thing you want like if if G is present or not. Let us check it is it will return only true or false. It is false. So G is not there. So capital G is there. Now let me find is true. You can find G O O V save again to you got see because good is there in that. Okay. If you can search for any substring you can use this uh

2:12:15 dotinccludes. Okay. Then uh okay you have something called slice also you can yeah something called slice. Wait, I'll tell you what is slides not greeting dots slice. Okay, you can uh slice this but you have to give the uh where to start and where

2:13:01 to end. Where to start and where to end. So let us start at I want this good only. I want to cut it from zero and I want to end it from 1 2 3 0 comma 3. Let me check. 0 comma 4 it is I guess 0 1 2 3 ah the next uh thing you have to give okay good like this you can splice

2:13:51 uh these are all the methods string methods in Java in this thing okay and So you also have a split split method for spring. You have a splitting dot split inside split you can tell at what way to split I'll give a space. So there the the words will get split. So let me run this. See good afternoon. So at this space the

2:14:40 word got uh split and it has given me an array with two elements. One is good and one is afternoon. Okay understood. Excuse me. And you also have trim. You also have trim. If you have spaces in the string like this, you can trim that. You can trim that like console.log log create

2:15:28 greeting dot trim. It will remove all the spaces. See our string is like this. You have space here and here. So it will trim all the space. You can see when we use this uh split, it has splitted the string like this at the space. Okay, understood? It has removed space around the string. Okay, around this string it has removed the space.

2:16:19 So this is about string methods. Okay, this is about string methods. Actually string method should be here only.

2:18:28 Okay. Uh students, I'm uh enabling the live chat. If you have any doubts regarding anything, you can ask.

2:26:33 Uh students, live chat is enabled. If you have any doubts, please uh text in the live chat. Chat is enabled. If you have any doubts, uh please post it in the chat.

2:27:37 If you have any doubts, please post it in the live chat room. To run the program, you have to type node index.js or whatever file name you give node and the file name. Yeah, please tell your dog what dog do you have.

2:28:32 Yeah, definitely. I'm sharing it now. That is based on your interest. If you do it in your phone or wherever it is, no issue for me. But you have to learn

2:29:21 I guess I have sent the HTML and CSS to your faculty. No. Okay, wait. I'm sending no worries.

2:31:00 only I'm sharing it with your faculty group. So I have sent the compressed file in the group. Okay.

2:32:34 shared uh I've shared this uh in your faculty group please ask it explain synchronous and asynchronous. Synchronous and asynchronous see I told you right synchronous is like if you want to eat food from you want to eat a food from a restaurant you have two ways. One is

2:33:19 you go take a bike, go to the restaurant, order food, take it parcel or eat there only and come home. Think this will take 1 hour. Okay. After that you have some work to do at home. So after eating food you have some work to do at home. So uh you think you have half an hour work to do. So 1 hour you go uh it will take time for you to go eat and come it'll take 1 hour of time again coming

2:34:04 home after coming home you do your whatever work you have here you can order food from sigy or zato in sigy or it will take I think You you assume it will take half an hour time. Your Sigi will uh deliver food in half an hour. In that half an hour meantime, whatever the half an hour time you have by uh till the food gets delivered. In that time you can do your half an hour work whatever you have. It is not blocking your work. Right? This is asynchronous programming.

2:34:50 Like you have 10 lines of code. Okay, 10 lines of code. JavaScript is single threaded. That means it will execute one line by one line, one line by one line. So what will happen? What will happen if in the fifth line it think it is taking half an hour time. So with uh you know uh synchronous what will happen till fourth line the execution happens in the fifth line it will stop the execution till half an hour. After half an hour again the rest uh 6 to 10 lines 6 to 10 lines will execute. Okay. So

2:35:40 instead if you what is asynchronous is the fifth line will start executing in the meantime till it execute it will come to the sixth line and it will also start executing. So this is something called a synchronous programming. So non-blocking of code okay non-blocking of code execution is called asynchronous programming. Okay.

2:36:26 Okay guys, uh thank you for joining. If you have any queries, please reach out to your faculty. Okay, please reach out to your faculty. uh they will bring bring your queries to our notice. Okay. Thank you all. Thank you for joining. Have a nice day. Bye-bye.