Naan Mudhalavan Frontend Development Session - 5

39:20 Good morning all. Welcome to the front end development with MongoDB non-Mal one program. So can anyone please confirm I am audible and my voice is clear. Okay. So, we'll wait for another uh five more minutes. Uh then we'll start our session

45:58 Okay, good morning all once again. Welcome to the front end development with MongoDB power covered by smart bridge and nonmodal one. So we'll start the session today without any delay. So actually your trainer Mr. Nanjan is unavailable today. So that's why I'm taking today's session. So after from next session he will continue the uh classes. Okay. So yeah in the last session previous session I hope you have studied you have studied and you have gone through and you have hands on with the something like statements, control statements, conditional statements and all. Right. Now in this today's session we will be going to start with okay in

46:44 today's session we'll be going to start with something called functions. Okay so in every programming language function is a common. So if anyone already know about what is mean by function, what is mean by functions in the any programming language, you can just type your uh you can just type the answer for definition. You can just write the definition for the function.

48:10 Okay, in every programming language, function is nothing but it is a piece of code or block of code which is used to write the statements, write the tasks continuously. Okay, let me just tell you the first about definition and after that I'll show you how the function is helpful. What is how we can decay declare a function? How we can define a function in JavaScript? Function is similar to a procedure, a set of statements that performs a task or calculates a value. But for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

48:58 So normally function is nothing but it is a piece of code or a block of code which helps us to uh execute the some set of instructions uh without any having the extra lines. Okay, first let me share my screen to run the JavaScript we have various way like with the help of HTML we can run with the help of the cocoa.js JS we can run with the help of the NodeJS server we can run as of now I'll be just going to use HTML file or something called cocoa.js JS to run the JavaScript. Okay,

49:48 hope my screen is visible right now. Let me just create one folder here. So, better to whenever you work on any project, better to whenever you start any project. So, please try to maintain a folder for the project. Okay, please try to maintain a folder for the project. So as of now I just want to run the some basic functionality, some set of programs or some code in JavaScript. So that's why I'll be just going to create first a folder. Inside the folder, I'll create the various HTML, CSS, JavaScript files so that I can easily access in a future. Okay. So let me just give the uh uh folder name as NM

50:34 F that is front end. Okay, non Model one front end. So let me just open this now. I usually so for the last few days for the last few sess sessions you know I hope you guys are familiar with the VS code and all right so now for writing for for writing the JavaScript also I'll be going to use VS code now here we have to open this folder inside the VS code to write the code okay to write the HTML code to write the CSS code or to write the JavaScript code we have to open the folder inside the VS code. Now here we have multiple ways. So one of the way is so first open the folder. So if you have any subfolders just enter into that

51:21 subfolders. If you don't have or you just want to open the main folder you can just target the path here. You can just target the path from here and you can type cmd. Okay. You can type cmd. So now whenever you type the command like cmd so it will open the command prompt I mean the terminal. Now here you can run the command like code space dot. Okay code space dot. So whenever you write this like code space dot this command this particular code space dot will open your folder inside the vssp. So whatever the uh the folder say

52:06 directory you have like inside the C you have the users inside the user you have ara inside the ara you have one drive inside the one drive you have desktop inside the desktop you have the nonmod one fe so whenever you run this code like it will open I mean the folder or directory name with nm will be opened in the vs code. Now let me just enter So now here you can see it is uh opening. Yeah, now it has opened. So till then I'll just close my terminal

52:51 because that is not any use for me. Now here you can see this is the UI of the uh VS code. So first you have you can just close this. So on the left hand corner you can see in the left hand side you can see there is a sidebar inside the sidebar you have the few things like NMF. Now this NMF is my folder name right? NMF is my folder name. So there is nothing I mean there is no files or folder inside my NMF. So that's why it is empty. Okay that's why it is empty here. So now if you want to create any folders uh okay if you want to create any folder or file you can just access the buttons from

53:38 here. So here you have new file here you have the new folder. So as of now I just want to create the file. So as I said to run the JavaScript we have the multiple ways. Okay. So first one like running directly on the browser with the help of HTML file running with the help of node server or else you can use any playground like cocoa.js for a ease of understanding I'll be just going to use the HTML file and the javascript file. Now let me just create the first like index.html. Okay index dot html. Now hit enter. Now here you can see one html file has been created. Okay. One this uh what is this dot? HTML means it is the extension. Now

54:25 if I use the dot CSS, it will be the extension of CSS file. Now for the JavaScript file, I have to use the dot JavaScript. JS extension. Okay. For JavaScript function, for JavaScript files, I can use the JS. Okay. Till here, I hope everyone understood. Now I requ so before that let me uh just uh generate the boiler plate code. So in the previous sessions you have already studied what is the boiler plate code what is the syntax and standard of the HTML file. Now for the in VS code we have one start one shortcut to generate the boiler plate code we can use the exclamatory mark

55:11 hit enter. Now it will generate one boilerplate code or one HTML template to write the HTML file. You already know this. So this is the doc type which tells what type of doc what type of HTML, what type of HTML we are using. This is the HTML root element. Inside this we have the two tags, two main tags. One is the head tag, another one is the body tag. Now whatever we write inside the head tag it will be considered as the meta information and whatever we write under the body tag it will be considered as the uh actual text actual data that uh to be displayed on the browser. Okay. So I hope you guys are already know about these things. So before wasting time now

55:58 here also in CSS we have seen two uh to add CSS we have three ways right? So inline CSS, internal CSS and external CSS. Now in for JavaScript we have two ways like internal JavaScript and external JavaScript. Internal JavaScript means inside the body tag itself we can declare the JavaScript. Okay, inside the Java body tag itself we can write the JavaScript. Now between this open and close of the script tag, okay, between this open and close of the script tag, I can write my JavaScript code. Okay, this is the internal uh CS uh sorry internal JavaScript

56:49 internal JavaScript. Now to if you want to have the external JavaScript you can just uh create the separate file. Okay. So as of now I'm just creating a separate file with the name of index.js. Okay. You can keep the any name but the extension will be the js for the JavaScript file. HTML for the HTML files. Okay. Now here you can see one index.js file has been uh created here. Now let's suppose if you don't want to use the internal internal JavaScript, you want to use the file that is index.js that you have written. Now to link this file, you can uh import the script src folder

57:35 uh script src tag. Okay. Now inside the src you have to define from which source you want to take the uh file. Okay. I want to take from the index.js. So now I request all of you to create a folder. If you have already existing folder, you can just open that folder and create two files. One is index.html, another one is index.javascript. Now inside the index html just uh just write the uh boil just generate the boiler plate code.

58:35 So after that you can create the index.js file. So once you are done with this both things so please let uh let me know so that I can move on to the next uh topic.

59:35 Yeah. Now after creating the index.html index.js file, I'll be going to write my index.js code here. Okay. So for any programming language, so first we'll be going to write the code of the hello world. So I hope you have already written I mean you have already said the hello to the programming world. So now here first to check so whether my index.js and index html have linked or not I'll just write the console dot log. Okay, I'll just write the console.log of

1:00:23 hello. Okay, or else I'll just write like good morning. Okay, done. So now to see the output uh we have to come back to the index.html. I hope you have already installed the live server right. So now just open the live server. Open this particular index.html file with the live server. Here if you have already installed the live server from the extensions you can able to see the open with live server. Click on this open. Open this with live

1:01:10 server. So now here you can see as of now there is nothing on my UI because of I didn't have any single content single context on my HTML page. So if I want to see the JavaScript output I can just open the inspect elements. I can just open the inspect elements. Now just give the right click. Click on inspect. Okay, just give the right click. Inspect and it will open something

1:01:55 called developer tools. Okay, we call this thing as a developer tools. Now I hope you are already familiar with these elements and also where you can find what are the things you will be have on these elements. Now to see the JavaScript code we can directly come to this console. Okay. So whatever we write the JavaScript code that will come under the console. Okay. Now let me just refresh the page. Let me just refresh the page. Now here you can see you have the now here you can see you have the some text called good morning. Now this text

1:02:43 is coming from your JavaScript file. Right now your text is coming from the JavaScript file. Now means you have a successfully connected I mean established the connection between index.html HTML and index dot JavaScript file. Okay. Now let's come to our uh topic. So now let me go back to my index.js once again. So let me just comment down. So as of now for just I'll just minimize this. Now first what we are going to study? So we are going to study the function. Okay.

1:03:31 So what is mean by function? Function is nothing. block of code. Okay.

1:04:40 Okay, function is nothing but a block of code which can be reused any number of times in a program. Okay, function is nothing but a block of code which can be reused any number of times in a program. Now let us see let us suppose there is a one good morning. Okay, there is a one good morning. Now if you want to print the good morning for six times, okay, so sorry five times. So you have to write the this five lines of code for five times right here you can see if you have the good morning. So if you want to print the good morning for five times you have to just uh duplicate

1:05:25 the lines means you have to rewrite the same line you have to rewrite the same line console.log console.log inside the every console.log log you have the same content like good morning, good morning, good morning. This is the normal thing. Now if you use the function, okay, now if you use the function instead of writing these so many lines, you can just write create a function inside the function you can just add the good morning content. Okay, good morning content. And now whenever you need the thing, okay, whenever you need the good morning to print, you can just call the function. Now let's suppose for the five times it is easy. Okay, for five times it is easy. So now let's suppose

1:06:11 in future if your codebase has the,000 2,000 lines multiple developers are working together. So if you want to uh write this type of content, it is very difficult. Okay, it is very difficult to define and declare the good morning. So for that purpose you create a function. Okay, you just create this all these things inside one function. Now when whenever you need the good morning to be printed you can just call that function. Okay you can just call that function. So now here you can see so for creating function we have three things like function name, function

1:06:59 parenthesis and curly braces. Okay. So first we have to use something called function. Now this function is a keyword. Okay. This function is known as the keyword. Keywords are nothing but the words already reserved in each and every programming language. Okay. So keywords keyword function is nothing but it is a keyword. Keyword means which already have been defined inside the each and every programming language. Means you cannot use that keywords directly. that keywords has a specific meaning. So if I take con means it is the variable name that stands for constant. If I take function it stands for function. So that I cannot use that word separately for my programming. I

1:07:46 have to use the function I mean I have to use the keywords within the uh limit of the JavaScript itself only. So first function we are going to create that is the function declaration. Okay. function declaration. So let me just create this greet. Okay, I am just keeping the function name as a greet. So now here inside this I'll just add the console.log of good morning. Okay, console.log of good morning. Now previously okay previously if I want to print the good morning for five to five five to 10 times where else in in future whenever my code base is like 2,000 lines 3,000 lines so whenever I want to

1:08:32 print the good morning so I have to replicate the code I have to duplicate the code each and every time now instead of duplicating replicating I'll be going to just call the name of the uh function for this many times. Okay. Now let me just explain what I have written. First I have written function. Function is nothing but keyword. Now greet is my function name. Okay. Greet is my function name. So after the greet to define this as a function. We have to write the parenthesis. Okay. We have to define the parenthesis. If I define the parenthesis means it will be considered as a it is a function. Okay. It is a function.

1:09:18 Now after that we'll be having the curly braces. Now inside the curly braces we are going to write our statements. Okay. Inside the curly braces we are going to write the statements. So first we have the function keyword function name as a grid. We can keep any name for the function. I can keep the grid. I can keep the nonmodal one. I can keep the smart bridge. Even I can keep the name of the function as a my name as a arshad only. Okay, I can uh just keep my name as a arshad also. Then no worries for the name. Okay, understood. Now parenthesis parenthesis tells like that this is a one function.

1:10:03 Okay, this tells like that this is a one function. Now after the function we define the curly braces. Now inside the curly braces we write the statements. Okay, this thing is known as the statements. Now in the first we have studied function is nothing but it is used to print the statements or else in the we have already written one definition right function is nothing but a block of code which can be reused any number of times in a program. Now let's suppose this is one line block of code. So if I want to print okay if I want so these are my statements. Now inside the statements I'll just write the 10 15 40

1:10:50 lines of the code. Now whenever I want to print the 10 lines of the code instead of replicating I'll be going to call the function. So previously here you can see I have the six lines of a console lot. If I want to replicate once again this six lines code, I have to uh replicate the code. Means I have to duplicate the code. Now instead of duplicating code, I have just keep this. Okay, I have just kept this all these things inside the I have just kept all these things inside the one great function. Now uh I don't need to so let's suppose I want to print the good morning for 40 times. So

1:11:36 previously I have to write the 40 lines of code. Now instead of the 40 lines now here you can see I have already five statements right now five into um eight I mean if I call the function greet with for the eight times I can able to easily print the good morning. Or else if I want to print for 20 times, I can just call the greet function for four times. It will give the output for the 20 times like good morning, good morning, good morning. Right? So now so I hope everyone understood this is the function keyword function name parenthesis which tells like this is the function and now inside if you want to write any arguments if I if you want to write any statements uh block of code inside the curly braces you have to write so that

1:12:22 it will be considered as this is the part related to the function. Now to see the output so to see the output we have to call the function. Okay, call the function. Call the function means are calling a function means we have to give the function name. We have to write the function name. Now along with the function name, okay, along with the function name, we have to write the parenthesis. Then it will be considered as a calling a function. Now if I just open my output, okay, here you can see I'm not having anything on my console, right? I'm not having anything on my console because of the few console messages have already written but there is no a calling statement. So now let us

1:13:11 call the function. Calling the function. Now for calling the function I have to use the function name and parenthesis. Function name can be anything as we have already discussed. I can keep the arshad also. I can keep the non-Mudal one. I can keep the MongoDB. I can keep the smart bridge as well the my function. Now let's suppose if my function name is like arad or sayad I can have to call this with the arshad or say and parenthesis. Now let's go to our output. Now here you can see I'll be having good morning. Okay, I'll be having the good morning means this good morning is coming from my function.

1:13:58 Now let's suppose I want to print the good morning for five more times. So instead of writing the or instead of duplicating the code or duplicating the console.log, I can just call this function. Okay, I can just call this function. So call means once again I have to write the greet. So after that parenthesis. Now here you can see inside my console I'm getting the good morning for this many times. Okay, I'm getting the good morning for this many times. This is how a function works. Okay, this is how a function works. So first function keyword, function name, parenthesis, curly braces, statements and now this is

1:14:44 the calling the function. So if you call the function for 10 times the whatever the data is written inside the function will be going to call for this many times. Okay. Now I request all of you to please uh execute this function. So you can uh for a better understanding you can just write some other statements. You can keep the function name as a different and you can call the function for any various times. Okay. So I request all of you to please uh execute this function. After executing please just give me a hint so that you have completed

1:19:15 Okay, if you're done with the functions, so we'll move I hope if you are done with the simple and basic function, we'll just see some other function. Okay, so now we'll be going to see one math function that is just simply take the two inputs and it will return one output. Okay, it will take two inputs and it will return just one a simple output here. So I'll create a function here. Function. So I'll just give the function name as add. Okay. Function name as add and the parenthesis. Parenthesis along with the curly braces.

1:20:03 Okay. Now here I'll just uh print this console.log. Okay. I'll just print the console.log log a + b. Okay. A + b. Now here I'll take the a comma b. a comma b. Now here whatever the previously we have created it is a very basic and function declaration. We call this as a very basic and function declaration. Now in JavaScript we have or in most of the programming languages we have something called parameterized function. Okay,

1:20:50 parameterized function means where we are going to pass the parameters inside the function. Okay, where we are going to pass the parameters inside the function. Parameter is nothing but it stands for a simple parameter or it just simp stands for data. So now here you can see so I have passed the two things like a comma b. Now this a comma b is my data or parameters. Okay. Now this my a comma b and a comma b are the parameter of my add function. Now here you can see when I just hover on this a comma b I'm getting the a thing like parameter right parameter.

1:21:36 Now actually uh so now let me just uh show you with the basic uh example. So 10 + 10 okay 10 + 10. Now if I just call this function so I'll be going to get 10 + 10 20 I'll be going to here you can see. So when I just print the 10 + 10 inside my console do I am getting the 20 here right? I'm getting the 20 here. Now uh so uh sometimes I don't know how many parameters I so for each and every call

1:22:22 I need the separate output. So whenever I call this first ad I need the 10 + 10. If I call the some other one more add I need the 5 + 10. If I call the one more add, I need the 5 + 5. Now this thing we can achieve with the help of the parameters. Okay, we we can achieve this thing with the help of this parameter. Now let's suppose I'll be just going to pass the 10 comma 5. So 10a 10 and 5a 5. Okay 5a 5. Now if I open now here you can see for three times I'm getting the same 20 20 20 but I need on the first thing I need the 15 okay second I need the 20 third I

1:23:11 need the 10 okay third I need the 10 because of 10 + 5 15 10 + 10 20 5 + 5 10 right so this is the my actual out expected output now to achieve this thing okay to achieve this thing we can use the parameterized function. Parameters are nothing but it is a simple data that is passed inside the function call. Okay, function call. Now this thing is known as the arguments. Okay, whatever I have passed like 10a 5 or 10 or 5a 5 are the arguments of my function call add. Okay, these are my arguments of my function call.

1:24:00 Now here I'll take okay now inside the add I'll take the parameters as in a comma b a comma b now here [Music] actually arguments is the nothing but actual data that to be passed and parameters is like that just a reference for the argument. Okay, this 10 comma 5 is known as the arguments. A comma b is known as the parameters. Now if we come to the layman's term. So 10a 5 is the actual data we are going to pass to the parameters a comma b. Okay, 5 is the actual data. I mean arguments we are going to pass this as to the parameters. Now here arguments can be different. Okay, arguments can we can give any

1:24:45 number. We can give anything for the argument and parameters also we can take any number any name for the parameter I have taken the a comma b now here inside my function add instead of 10 + 10 I'll just write like a + b okay a + b okay I have written like a + b here okay I have written like a + b now if I open my output now here you can see first I'm getting the 15 20 and 10 right so for the first function call I'm getting 15 second functional function call I'm getting 20 and third function call I'm getting 10 here in for my add function okay I hope everyone understood right

1:25:36 I hope everyone understood now this 10a 5 10a 10 5a 5 are the arguments and this a comma b a comma b is The parameters. Okay. Parameters understood. I hope everyone understood. No one have any doubt in this. Right? Yes. Now here we can create the some other functions. Now in now here if I add the instead of plus operator if I add the multiplication it will be going to multiply. Here you can see 10 into 5 50 10 into 10 100 5 into 5 25. Okay, this is how the parameterized function works. Okay, let me just write like

1:26:21 parameterized function. Okay, this is the parameterized function. Now here let me write the definition. function which takes arguments is a called parameterized function. Okay.

1:27:08 So parameterized function means function which takes arguments is called as the parameterized function. This a comma b is the parameters and 10 comma 5 is the argument. Okay. 10 comma 5 is the argument. Now I request all of you to please uh execute this parameterized function. So after that we can move on to the function expression uh call back function rest parameter and all. Okay. So I request all of you to please execute this uh function I mean the parameterized function here. Okay. Now here I have taken the only two variables I mean two parameters two

1:27:54 argument you can multiply you can take any number of parameters you can take any number of arguments and all okay it's up to you whatever you want to Okay.

1:37:14 Sorry for the inconvenience. Oh, I just got disconnected. So, yeah, I hope everyone uh written I mean executed the parameterized function right now. Let us see about the rest parameter. Okay. So, hope if everyone understood the parameterized function. We'll just move on to the rest parameterized function. Now this arrest parameterized function is nothing but uh where we are going to pass the any number of or any number of

1:37:59 the parameters. Now let's suppose you have went to the a supermarket. Okay, you have went to the supermarket. You don't know how many items, how many things you will add into the how many things you want to buy. So that's why he will give you a one cart, right? he will give a cart. So now inside that cart you can add the any number of things that you needed in the same way. Now let me share my screen once again here. Now let's suppose I'll be going to take the first example of the parameterized function function.

1:38:45 So here I'll just take the fruits. So now here I'll just print the console.log of a. Okay. Now here I'll be going to pass the a. Now here inside the fruits I'll be passed my arguments as a apple. Okay. Apple. Now if I I'll be just going to pass the one more thing like orange a comma b. Now inside this now if I open my output

1:39:36 let me restart my HTML server once again. Here you can see I'm getting only apple but here I have passed two arguments right? So here I have passed the two arguments one is apple and orange but here I'm getting only apple because of inside my console I have just printed only apple. Okay, instead of here I have just only printed apple here. Okay, apple here.

1:40:21 Now here I'll add the a comma b. Okay, a b. So now let's suppose this is the one cut. So now you want you need I have the one more card. So here I'll just add the grapes. Here I'll just add the grapes. Now if you want to print the grapes, okay, you have if you want to print the grapes, then once again you have to call the uh you have to pass the parameter as a one more name and then you have to print the parameter, right? You have to print the parameter. Now here it comes the rest parameter. Okay, here it comes the something called rest parameters. Now basically this rest parameter will

1:41:06 take the remaining parameters. Okay, it will take the remaining parameters that are left inside the function. In JavaScript, a rest parameter allows a function to accept an undefinite number of arguments as an array. It is indicated by three dots followed by the parameter name and it must be the last parameter the parameter in function definition. Now let's suppose if you have the one more thing you have to uh so once again you have to call the a b c d now uh instead of calling the n u multiple parameters we'll be going to pass the rest parameter. So as I said

1:41:53 like rest parameters allow a rest parameter allows a function to accept an indefinite number of arguments as an array. It is indicated by three dots. Spar is used. to pass

1:42:40 any number of arguments to a function. Okay, rest parameter is a is used to pass any number of arguments to a function. Now this rest parameter allows us to write all the parameters I mean the arguments without defining the multiple parameters. Now here to use this I will be going to use the let as of now I just uh remove the a remove the b. So I just give the three dots with a and here three dots with a. Okay, three dots with a. Okay, three dots with Now here you can see the first function call is printing apple orange apple orange grapes. Second one is printing apple

1:43:29 orange grapes. Now uh inside the third function call if I add the one more thing like banana and also I'll be going to get apple orange grapes apple orange grapes banana now if I see my output in the first function call I have the two arguments in the second function call I will be having three arguments in the third function call I will be having the four arguments here right four arguments Now let's suppose instead of the rest parameter if I pass like a comma b comma c comma

1:44:15 d here also I'll be going to pass the same thing. Now here you can see for the first it is printing the data I mean first it is printing the fruit's name but it is giving the undefined. So inside the javascript we have one data type with the name of undefined. Right? In JavaScript we have one data type with the name of undefined. So now whenever I directly print like a comma b comma c comma d it will occupy some space. Okay it will occupy some space. Now instead of direct if I use the rest parameter it won't accept the any space it will

1:45:00 directly just uh print the data whatever I need instead of define instead of giving like undefined right now here it comes the rest parameter. I hope everyone understood. Now here term is like so we have to use the rest parameter as the last parameter inside the function definition. Now here A B C D is this four are the parameters right. So if you want to define the rest parameter you have to define the last parameter. Okay. So now if I directly give the three dots in front of a it will give the error. Okay. Here it will give the error like rest parameter must be a last parameter in last in a parameter list. So

1:45:48 if you want you can directly add the So previously you are getting the apple orange apple orange grapes apple orange grapes banana along with the undefined. Now whenever I add this dd now here you can see for the last one it has not coming like undefined but it is coming like one array. So as I said a rest parameter allows a function to accept indefinite number of arguments as an array. it will accept all the parameters as an array. Now here instead of passing the uh instead of passing to the uh d I'll just pass it to the b itself. Okay, first parameter I know only one parameter is coming and second I'm not

1:46:34 know I'm not sure how many arguments uh the user is going to define. Now if you want to relate with the real time example or realtime scenario you can relate with the swiggy or zomato. So inside the swiggy or zomato you will be you can add the any number of items. Now if you want to add the dinner so you can just order the biryani you can order the along with the dessert starter juice you can add the multiple things at a time inside the card. Now here also the same. So first one user is going to order only the apple orange. One more user want to order the apple orange grapes. And one more user want to order the apple orange grapes and banana. Now if I open now here you can see I'm

1:47:20 getting the apple orange apple orange grapes apple orange banana. Okay. Apple orange grapes and banana. This is about the rest parameter. Okay. This is about the rest parameter. Now I request all of you to please execute this thing. I request all of you to please execute this thing rest parameter. After that take 5 minutes of break. Okay. After executing the rest parameter all of you please take 5 minutes of break please be here at uh 12 20. Okay. After executing this function, please take five minutes of break and please be here in the session by 12:20 so that I'll be going to restart the session once again. We'll discuss the some advanced function like

1:48:07 arrow functions and all. Okay, understood? Yeah.

1:58:16 Yeah, I hope everyone back from the break and shall we continue? Shall we start? Or else we can wait for another two more minutes. Let all the participants come uh back from the break so that we can start by 12:25 exactly without any delay. Okay. Till then ask your friends ask your friends to uh rejoin the session.

2:00:53 Yep. Everyone came from the break right now. I hope everyone understood the first thing what we have discussed normal functions, parameterized function, rest parameterized function. Now we'll be going to discuss about the something called return type function. Return type function is nothing but a function which returns something like either it may be a primitive data type either either may be a non-primitive data type like string array object whatever it is there it will be going to just return okay now first I'll be going to write like return type function

2:01:42 return type function. Okay. Now first here I'll take one function function name I'll just take the add same we have already done this right a comma b right a comma b now instead of directly printing this I'll be going to return this things okay return this things a + b so previously I was just printing the statements inside the function I'll be going to uh print the I mean I'll just going to return the statements now here I'll be going to call the add inside the ad I'll be having 6 9 okay 6a 9 if I open my output

2:02:28 and check I'll be not having anything because of so here my function is correct okay my function I having function keyword function name parameters arguments but I don't have any printing statements so that's why I'm getting the empty screen here okay that's why I'm getting the empty screen here now I'll be just add this inside the uh control I mean the printing statement that is console dot log of add of 6a 9 okay 6a 9 this is mean by this is mean by a return type function here we can as of now I have passed the something like a a + b now here I can

2:03:13 pass the something like a number also a string with the number so now here can see I'm getting the Sayyad and nine okay say and n here if I want to merge only the strings I can add the say dashad so here I'm getting the say dashad as my string this is about the very simple about the return type function so now here you have one instruction like so whenever you write the return whenever you want to use the return keyword this return keyword must be the last statement statement inside the function. Okay. So we have already know what is the statement. Now this return is the last statements that to be declared inside the add function. Okay.

2:04:01 So please remember whenever you want to add the return type function you have to just add at the end of the statements inside the function call. Okay. This is about the very uh simple about the return type function. Now we have uh one thing called arrow function. So now arrow function is very very important. Arrow function is very very important. So as of now as a standardized uh JavaScript version we are going to use the ES6 version. ES6 stands formas script version 6. Okay. ES6 stands formas script version 6. Now inside the ES6 version they have introduced a lot of things like arrow functions, let and cons. Let and cons

2:04:48 have already been discussed in the class, right? Let cons have already been discussed in the previous sessions. Now, one of the feature of the ES6 is arrow function. Okay. Now, arrow function provide a shorter syntax for writing functions. They do not have their own things own this context and are often used for the simple tasks like callbacks. Okay. So previously okay uh previously we have the uh if you want to de declare a function we have to write the three four lines of code. Now this arrow function allows us to write the complete function within a single line. Okay. Now to declare a

2:05:34 arrow function. So first let me just write the arrow function definition here. is a sharp hand. Arrow function is nothing but it is a shortand for function declaration. Now previously I'm writing the function name. Here you can see

2:06:20 function keyword function name parenthesis curly brace statements and finally calling the function. Now this arrow function reduces I mean removes all the function keyword all these things. Now to declare a arrow function we have to pass the parenthesis uh I mean the equals greater than symbol. Now this thing is known as the arrow. Okay. This thing is known as the arrow function. Okay. Now to write the proper can say arrow function. Okay.

2:07:11 This is the arrow function. Okay. So parenthesis greater than equals to symbol greater than parenthesis. Now previously we are writing this much uh this uh this much big uh statement. Now we are going to write the very simple statement here. Okay. Now let me show you how we can declare the arrow function with the help of this parenthesis arrow and curly braces. Now first I'll take something called one variable. So we have already discussed about the variables right. So inside the variable we can store the numbers, we can store the strings, we can store the arrays, we can store the objects. Now in JavaScript inside the variables,

2:07:57 inside the variables, we can able to store the numbers I mean we can able to store the functions as well. Okay, functions as well. So whenever we store a function inside a variable that thing will be considered as a function expression. Okay. Whenever we store a function inside a variable that type of function is known as the function expression. Okay. Function expression. Now let me just create a take one const fun. Okay. con equals to parenthesis. So whatever the we have defined here parenthesis greater than here. So now here I'll just write like console.log

2:08:46 hello. Okay. Now here you can see previously if you want to print only a simple hello you have to write the three lines of code like function, keyword, all this this uh blah blah blah whatever the stuff you need. Now here you can write the same thing in a single line. Okay, you can write the this complete function inside a single line. Now here you can see inside the output also you are getting the hello here. Okay, inside the output also we are getting hello here. Understood everyone? Yes, first I have taken a variable. So I have given the variable name as fun. Now inside this I have stored the parentheses

2:09:33 equals and greater than symbol. This will make a function as a arrow function. Okay. This two uh this two three things will make the a function as a arrow function like parenthesis equals and greater than symbol. These three will make a function as a arrow function. Now here let's suppose if you have a single statement. So as of now you have a single statement inside the function fun. Now here you can ignore the curly braces as well. Okay, you can ignore the curly braces as well. Now here you can see it is returning the same output. This is the beauty of the arrow function. Okay, this is the beauty of the arrow function. If you have the multiple statements then you have to declare the curly braces. If you if you

2:10:19 have a single statement, I mean if you have a single curly brace, you can just ignore the curly braces as well. Okay, understood? So now I request all of you to please okay I request all of you to please execute this uh arrow function. I request all of you to please execute the arrow function. We'll just write one more arrow function after this.

2:13:01 Yeah, I hope everyone executed the arrow function right now. We'll take the same arrow function. We have already one a thing right here. So we have added the a + b. So now with the help of this arrow function we are going to add the a + b here. Okay. So let me take the first fun uh variable uh con add. Okay. So con add. So now here I'll add the uh inside this I'll just write okay so

2:13:49 a + b okay a + b here I'll give the a comma b as my parameters okay and now finally Here I'll call the function add of 4, 9. Okay, 4, 9. So if you need you can just uh huh that's it. So let me just print this inside the console.log log of add of a comma uh 4a 9. Now here inside my I'm getting the undefined.

2:14:36 Okay, I'm getting undefined because of I have just taken the a + b but I'm not returning anything right? I'm not returning anything. Now I have to return this a + b so that I can able to get the output. Here you can see whenever I return then only I'll be going to get the output. If I remove the return keyword so it is not returning anything. So I have passed the 4, 9 but it is not returning anything. So that's why it is coming like undefined. Right? It is coming like undefined as of now here. So this is the a a + b. Now if I have to return this to see the output. So return a + b. So I'm getting the 9 +

2:15:22 4 13. Okay, 9 + 4 13. So if you have a simple statement, okay, if you have a simple a single statement, you don't want to return. So at that time you can remove the curly braces. Now here you can see if you have the curly braces here. Okay, if you have the curly braces here, it will not return any output because of it is undefined in the state. Now, whenever you remove the curly braces, it will automatically return the a + b. So that you will be going to get the output as a 13. Okay. Now here, now here you are not getting the undefined because of this arrow function is automatically returning the statement like a + b. Okay, it is

2:16:09 returning the a + b automatically. Okay. Automatically. So I hope everyone understood about the arrow function and one whatever the one more scenario we have taken for the arrow function. Now we are going to discuss about some uh one thing called advanced function inside the JavaScript that is the call back function. Okay that is the call back function. Now call back function stands for a function passing as an argument to another function is known as the call back function. First here we'll understand what is callback function. Then we have the something called single threaded we have the something called NodeJS by we have the synchronous asynchronous these times these things will learn

2:16:56 later. Okay. So eventually JavaScript is a asynchronous means it will run the code in a async way. So actually for every programming language we have the two types of programming terms. One is the synchronous another one is asynchronous. Now this JavaScript is a asynchronous. Okay JavaScript is a asynchronous programming language. Synchronous first synchronous means it will execute the code line by line. First it will execute the line number 1 2 3 4 5. If there is any error at the line number four, it will stop the execution of the program inside the synchronous. Okay, it will stop the uh execution of the programming in the synchronous. But in the uh JavaScript as

2:17:43 it is asynchronous, it won't stop the execution of the program because of in asynchronous first it will execute the line number 1 2 3 4. If there is any uh like let's suppose if there is any error at the line number four, it will just skip the line. Okay, it will just skip the line and it will move on to the next line. Now let me show you the example how the asynchronous works in JavaScript. So first here I'll have the console dot log of start. Okay, start. Now here I'll take one something called set timeout

2:18:35 processing now here I'll take one more console log And now usually uh we know that output is like first it will print the start, second it will print the processing, third it will print the end. But in JavaScript first it will print the start, end and processing. Now here you can see first I'm getting start, end and processing after 3 seconds. Now let me tell you about the what is set timeout. Set timeout is a function. Okay, set timeout is a function which we have inherited. I mean the which JavaScript inherited from the uh language C. Now

2:19:24 this set timeout is used to add the sometime delay inside your program. Okay, sometime delay in your program. Now I have just given this example because of uh as of now we don't have any real time API to explain you. Now just to add the time delay and just to show you how the JavaScript works in as in a asynchronous way. Now this set timeout is adding the 3 seconds of time delay. Okay, 3 seconds of time delay. Now whenever I start executing the JavaScript program, first it will execute the line number 57 and whatever we have inside the line number 57, it will just print as a start and then it will move on to the next line that is the line number 59. It will check like

2:20:11 that this is the set time out and the set time out it will check it is taking the 3 seconds of time. So that's why it will move on to the next thing like that is the line number 63 and it will print the end. Now after 3 seconds it will check like that it has taken the 3 seconds. Now I can able to print the processing. So that's why first whenever I start executing the program whenever I start executing the program first it is printing start and after 3 seconds it is printing the processing right so now here you can see count 1 2 and three so after three it is printing the processing this is how the asynchronous works in JavaScript now to

2:20:58 handle the asynchronous in Java First step we have the various ways like okay let me just comment down JS I mean the JavaScript is a asynchronous asynchronous in nature to handle it. To handle this, we use callbacks, call back function,

2:21:43 promises, and async await. Okay, JavaScript is a asynchronous in nature. To handle this, we use call back functions, promises and a sync aait. Now, one of the best way I mean the one of the very easiest way to handle the asynchronous is back function. Okay. Now in in normally in JavaScript if I write like this it will first print the start processing end. Now with the help of the callbacks I can make sure like that first it will

2:22:28 print the proc start second it will print the processing third it will print the end. Okay understood the scenario. Now previously if I directly like like console log of start set timeout console.log log it will print the first start, processing and end right now with the help of this okay with the help of the a call back function I make sure like that first it will print the start second it will print the processing third it will print the end okay now call back let's come to the call back function

2:23:16 Callback function is nothing but a function is a function passed as an argument to another function is known as the call back function. Okay. is a a function passed as an argument to another function is known as the known as the call back function. Okay, call back function. Now first here I'll take one function. Now inside the I'll just give the fun one. So here I'll give the console.log

2:24:13 Now here I'll have I'll take one more function function fun I'll just keep the same function that is here we have that is set time out. Okay, that is taking 3 seconds of time. Now if I first call the function one, I'll be going to print the start. Now here I have to take one more function, right? function three inside this I'll have the

2:24:58 end now here I have the function one function two function three now if I open I'll be going to get the same output right first start and after 3 seconds I'll be going to print the processing this is the asynchronous program in nature now let us make okay let's make this as the as I mean the uh let make this as a call back function. So let me read the definition of the call back function once again. A function passed as an argument to another function is known as the call back function. Now first here we have to make like that first function one should have to uh uh print second function two has to print third function three has to

2:25:45 print like this we have to handle now. So as of now first it is printing the function one second it is printing the function three third it is printing the function three. So now we'll make sure like that first it will print the start second processing third end. So whatever the time it takes we allow okay if if it takes 1 day if it takes 2 days if it take 1 hour we have to wait okay until unless processing is printed then only we move on to the end right we only move on to the end so as of now instead of the function one function two function three I'll show you with the help of the function two and function three okay function two and function three now here first it is coming the end and and

2:26:30 processing. Actually my output is like first I want to print the processing and then output. Now in my function I have the in my function definition I have like that a function passed as an argument to another function is known as the call back function. Previously uh this thing is known as the function calling right this thing is known as the function calling. Now the definition of the call back function is function passing as an argument to another function. Now we know that whatever we write inside the fun to of so it will be considered as a will be considered as a arguments right now here I'll be going to pass the function now here we have two terms right one is passing another one is calling

2:27:18 this thing is known as the calling this thing is known as the passing Okay. So, fun two off means it is a calling fun directly. Fun three is nothing but it is like passing. Okay. Fun three is nothing but it is like a passing a function here. Okay. Passing a function here. Now I'll be going to take Okay, I'll be going to take now inside the function to I'll just pass the I mean I'll just pass the function instead of calling I'll pass the function. Now if I open my output first for 3 seconds it will wait. Okay, first 3 seconds it will wait. Now here

2:28:05 you can see first 3 seconds it is waiting 1 2 3 processing and then it will print the now it is not printing I mean it is not printing because of we have to make the function as a call back now here I'll pass the something like call call or else we can take the call back now after this we have to call this function here okay now we are saying the function three so whenever the function fun to executed then only print the function three. Okay, whenever the function two gets executed this whenever the processing printed then only I want to print the end. Now if I go here processing 1 2 3

2:29:14 We have to pass this function for the function two. Okay. Not for the function three. Now here you can see first 3 seconds it is waiting 1 2 3 it is printing processing and then it is printing end. Okay. Now we are make sureing like that first it will print the processing then it will print the end. Now we'll uh so I hope everyone understood function I mean call back function is nothing but a function passing as an argument to another function. We have the function two and function three. Now I'll make the function three as a call back function to the function two. So whenever the function two get executed

2:30:00 then only the function three is going to be executed. Okay understood? Understood. Previously it is printing the end and then it is printing the processing. Now I have made the first it will print the process and then it will print the end. Now I'll make the all the three function as a call back means first it has to print the function one. Second it has to print the function two. Third it has to print to the function three. Now here I'll take one more thing like call back. Here I'll pass the call back. Here once again here you can take anything because this is the parameter right here you can take anything as this is the parameter. Now I hope you have understood the what is calling what is passing. Right

2:30:46 now first I will call the function one. Inside the function one I'll be going to pass the function two as an argument. Take function to now you can see first it is printing start after this it will wait for 3 seconds it will print the processing and then it will print the end here. Hey,

2:34:23 Okay. Now here I have passed the first function one. Inside the function one I have passed one function definition. Inside the function definition I have fun two. Inside the fun two I have passed the fun three. Okay. Inside the fun three. Now if I open my output and check. So first it is printing start. After 3 seconds it will print the processing. After 3 seconds it will end. Now if you want to add the end here also you can add. Okay. Here also you can add like set time out. So here you can add the 2 seconds time. First it will print the whenever we start executing first it will print start after 3 seconds it will print

2:35:09 processing after 2 seconds it will print the end. This is how we can handle asynchronous programming using the call back functions. Okay. This is how we can able to handle the asynchronous programming with the help of the call back functions. Now I request all of you to please execute this thing and then we'll wind up the session for the day. Okay. So I request all of you to please execute this thing.

2:39:42 So all of you please execute and then we'll just wind up the session. So we'll discuss the doubts in the next session. Okay. So as such uh we don't have any doubts. So that's why we'll discuss the uh any if you have any doubts or if you have any issues in in the next session. Okay. So yeah I hope everyone understood whatever we have discussed in the today's session. In the next session we'll deep dive into the more about the JavaScript. We deep dive into the advanced topics in the JavaScript like conditional statements and we have the turnary operator async function promises

2:40:28 and all. Okay. So if no one have any doubts I'll just wrap up the session for the day. Thank you. Thank you for joining. Keep motivated. Please learn each and everything. If you have any doubts just uh reach out to your faculty. Your faculty will take your doubts to us. we'll try to resolve your doubts. Okay, you'll be having 24 by7 support from your faculty as well as from our side. Okay, thank you guys. Thank you for joining once again. Thank you.