Full transcript of “Arrow Functions in JavaScript | JavaScript Made Easy - Session 28”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:00 Hello all, welcome to an another session in this course. As part of this session, I'm going to cover the next topic that is arrow functions. So let's get started. What exactly are arrow functions? The topic for this session is arrow functions. You see why I'm covering this uh before explaining what exactly are arrow functions in JavaScript. Okay, before explaining that you need to understand why I'm covering this particular topic here. If you remember in the last session I covered part one methods that we can use with arrays. Okay, what are the different methods there are lot of methods that you can use with arrays and I didn't cover the entire methods
0:45 that you can use with arrays rather I covered only few basic methods that you can use with arrays as part of the part one. Uh what about the part two and part three? I didn't cover that for you. The reason behind that is to understand the remaining methods that you can use with arrays. We need to have the knowledge of these arrow functions. Without having the knowledge of this arrow functions, you cannot understand how to use the other methods with these arrays. Okay, the part two and part three methods that you can use with arrays, you cannot understand. So before going to that array methods, part two and part three topics, you need to understand the arrow functions. And to understand this arrow functions you should have the knowledge of these functions that I have covered in one of the previous sessions here. The traditional functions okay here when
1:32 I said functions means it's traditional functions. How do you write the traditional functions? So these are these are arrow functions right? These are arrow functions other okay just let me do one thing. These are arrow functions. Okay I'll just moving this arrow functions to the right side here. These are arrow functions. And uh here I'll be writing the traditional functions. I'll just write traditional functions. Okay. What is the difference between the arrow functions and traditional functions. Uh traditional functions are you know kind of lengthy in code. Whereas arrow functions are shortcut or short representation short syntax shortcut syntax for this traditional functions. You don't have to write so many lines of code. In a single line you can complete an arrow function. Okay. So I'll show you an example. uh if I want to add two
2:18 numbers, I want to create a function which can add two numbers. I can write like this function add two numbers and uh this circular bracket starting of the function ending of the function and here you can have any number of parameters like this and uh here you can write the code right here you can write the code return a + b or whatever it may be okay this is a traditional function the similar one okay this is a traditional function right I can create a shortcut representation shortcut syntax for this uh traditional function or shortcut way of writing this traditional function in a single line with the help of something known as arrow functions. Okay, how here what is the name of the function add to numbers. First I need to create something known as I have to use let keyword for declaring this uh function.
3:04 Here I'll not be using the function keyword. I'll be using the let keyword that I generally use for declaring the variables and all those stuff right objects and variables etc. Right? The same let or con you can use for uh creating this uh function here. What is the name of the function? Add two numbers is the name of the function. You don't have to write circular brackets and all those stuff. Just give the name of the function here after the let keyword. If you want to convert this traditional function into the error function, first you have to write the let keyword or con keyword followed by the name of the function here without circular brackets and say is equal to is equal to and after that you have to write the circular bracket and inside circular bracket what is parameters are there? A comma b okay a comma b parameters are there. After that what I have to do after that I have to
3:49 write I don't have to write this uh uh like you know in multiple lines I can complete this now these are the parameters of this particular function just uh write like this greater than symbol sorry is equal to greater than symbol and here we have the starting of the function ending of the function right you can write like this in a single line only you don't have to write in multiple curly braces inside the curly brace what is there here written a plus b is there right I'll just Write a + b. That's it. That's that's enough. You don't have to write more than that. Okay? You can write like this. A plus b or something. You can write like this. Okay? So this is a format guys. This is a format. Uh these things are optional. If only one line is there. These curly braces are also optional. You can simply write a plus b.
4:35 This is enough. This how you can convert this traditional function into a error function like this. Okay. You can see the now you can convert. You see here 1 2 three lines along with spaces five lines are taking here only one line here how do you call this function the same way add two numbers and I'll pass five like this I'll pass I'll call the function and uh this function will return use some the addition of this a + b that is 5 + 5 will go into a and four will go into b when I call this function and 5 + 4 is 9 that will be returned back to the function calling statement that I'll store into something known as result or r whatever it may be and then if I say uh console dot log of r means
5:21 the result 9 will be printed in the output. Okay, you need to call this function similarly how to call this arrow functions the same way guys. Okay, the traditional way that you call this uh traditional function the same way you will call this arrow functions also but only the difference here is uh this traditional function is in multiple lines whereas arrow function is only in single line. How to call this function? Again the same thing. Let uh r our result whatever you want to write add to numbers. Okay numbers and circular bracket I need to call this function uh like you know 4a 3 or 4a 3 or whatever it may be. Four will go into a and three will go into b and four + 3 that is uh seven will be returned and stored into this uh uh will be returned back to the function calling statement and will be stored into this r
6:06 and then you can write console dot log of r here seven will be printed in the output. Same way these two lines are same but here traditional function has been converted into arrow function. uh multiple lines of the function got converted into single function here single line okay with arrow functions shortcut uh syntax will be there okay here traditional function has lot of lines of code to be written but here you can write in a single line okay fine so a lot of things are there for you to understand about the arrow functions okay that I'm going to cover practically in this session so I also have some notes with me I'll be using the notes as a reference and explain you all the concepts about the around the arrow functions for you hope you got the understanding of the concept. So here I'll open the
6:51 arrow functions related reference notes here shorter syntax. Okay, the traditional function has good number of lines but if you want a shorter syntax you can go with the arrow function. Okay, the same function represented like this. Here constant const let can be used here and the name of the function can be used here is equal to the parameters. Okay, like this and the calculation the whatever the result you want. Okay, what what what the function need to return that you can write here. Okay, whatever the function want to return that expression you can write here the function will return that. So like that many things are there guys. Okay, a lot of examples are there here. I'm going to start with the simple examples first and then we'll go for the detailed ones. Okay, so here I'll just write arrow
7:37 functions.js. Okay, so one JavaScript file I created for demonstrating the arrow functions for you. First I'll write it traditional function. Function add two numbers is the name of the functions and traditional function will have circular brackets followed by the function name. Starting of the function will be starting with the curly brace and ending of the function with the ending curly brace. And here I'll be writing here I'll be writing add two numbers right here I'll be writing you know uh like this uh parameters I'll give first. Okay. Uh you can have any number zero or any number of parameters here like a and b are the parameters here. And the function need to write like this a + b. The result of this a + b can be written here. Okay. Now how to how to call this function the name of the function and
8:23 inside the circular brackets I need to give the arguments. Okay. These are the parameters I need to pass the arguments like five comma uh four. Okay. So when five will go into a i and four will go into b and 5 + 4 will become 9 and that 9 will be returned to the function calling statement. the return value I'll be storing into R result or something and then would like to print R. Then if I run this code node space if I run this code node space arrow uh uh functions do demo uh functions.js JS sorry JS if I run this code what will happen this this function calling statement will call the function and pass five into a and four into b this is a traditional function you already have the knowledge of this a + b will become 5 + 4 that is result is
9:09 9 the 9 will be returned back by the function to the function calling statement that returned value will be stored into the variable and printed here okay so 9 should be printed in the output you see nine got printed in the out now what I'll do here is I'll keep these two lines as it is I'll not change any of this fifth and sixth lines I'll not change this function traditional function I'll write shortcut syntax for that using the arrow functions I'll write the shortcut arrow functions are the in JavaScript offer a shorter syntax for writing functions okay shortcut way I'll write the functions this function I'll write in a shortcut way using this thing so how to convert this uh traditional function into shortcut function first I need to use a keyword like or con and then I need to give the name of the function here without circular brackets then is equal
9:55 after is equal to I need to give the parameters circular brackets surrounded parameters I'll give here after that I just need to write greater than sorry is equal to greater than and then here I can also write like this you know okay curly braces and here I can copy this statement and paste it here that's it this how you can convert this traditional function into a arrow function can you see the difference here let here function keyword is not used in traditional function. We use a function keyword to create a function and the function name will be immediately followed by circular brackets with parameters and starting of the function. Remaining everything is here and everything is there. But only the thing here is here function keyword won't be there. Let keyword will be there. The name of the function will be given here
10:41 like a variable is equal to then whatever the number of parameters surrounded by circular brackets should be given and then here we need to give is equal to greater than symbol and uh the remaining part need to be written in a single line. Okay. Now this one is not required. You can remove this and uh run this code. Again you got the same output. This how you can convert a traditional function into a arrow function which is which has a shorter syntax. Okay shorter syntax compared to the traditional functions. In a single line you can create a function. Now when you have only one line when you have only one line one statement is there. Then you can remove this curly braces here. Remove this curly braces here. uh you cannot use a return keyword guys when you uh anyhow by default it
11:28 will understand okay by default it can understand you are returning the result of this a plus b so curly braces can be removed when multiple statements are not there and you don't even have to write the return statement because automatically a plus b will return the sum of this a and a a and b will be returned back to the function calling statement here you see this is how simple you can make it more better okay so if I run this again I got the same output I don't have a return keyword I don't I have curly braces like that. Fine. Now, what if what if I don't have any parameters here? What if I don't have any parameters here? What I will do here? Here, I'll write something like this, you know, uh console.log hello. When you call this, I'll just print hello here. That's it. Okay, this
12:14 particular statement is not returning anything, but it is printing hello text. When you call this function, I'll change the name of the function here. Uh uh say hello say hello okay I'll just simply say say hello here I'll simply say say hello when I say say hello I just need to call this function right say hello function okay so here I don't have to pass any arguments here because zero parameters are there and what will happen I don't have to store into something or something as simple as this you see this is a function and calling statement which is calling this function. When you call this function, the code inside the function will be executed that is console.log hello will be running and hello will be printed in the output. You
13:00 see hello got printed in the output. Fine. And there's a possibility that there is a possibility that this particular function uh can have one parameter. Okay, let's say a is there and I just need to print the value of the variable a here. Okay, I just need to print the value of this variable a here. So how to how to do this? So I just need to uh pass some value here like say hello five or something. Five will go into this variable a parameter and the five will be printed here. Okay. You see five got printed here as it is simple. Okay. And uh if you simply write a also what will happen? If you write a here what will happen in this case? The say hello function will be called and five will pass it to the a and uh five
13:45 will be returned back to the function calling statement. Here you have to write something like this. Let R is equal to our result is equal to console.log console dot sorry let me write it again console.log R console.log log r clear clear and then you see five got printed okay here what happened I'm calling the function calling statement and then pi's argument is passed to the single parameter and that is uh nothing but five will be written back to the function calling statement here only is means five will be written back to the function calling statement that is stored into r and then same five got printed what if I say a a then what will happen in this What will happen guys? Five will pass it to a five
14:31 five. 25 will be returned back to the function calling statement and r will be uh when you print r 25 will be printed. Okay, you can do anything. You can do anything. And of course here if only one parameter is there, you don't even have to write the circular brackets. When you have either zero parameters or multiple more than one parameter, you can write circular brackets. You can write like this also. You can write like this also. Okay. So now run this. The same output you'll get 25 you got. Okay. without circular brackets. So you also got if it is only one parameter, you don't even have to mention circular brackets. You can make this arrow function as simple as possible. Okay, here are some notes for your reference guys. Okay, this traditional function has been converted like this. And then you know no parameters you can write like this. One parameter you can write like this already explained. Multiple parameters
15:17 you can write like this. Okay. So then uh if you have multiple statements okay then you can write like this with curly braces you can write I told you right uh uh if you have multiple statements okay in the traditional function if you have multiple statements then uh again I'll just change it back to a comma b here two parameters are there and here what I will do here is I'll say uh let c is equal to a + b some two statements I want to write after that I want to write uh let c is equal to a + b. Okay, that c is equal to a + b. I need to you see here errors are coming. The reason behind that is when you have multiple statements here return C. I'll say here how many statements are there? Two statements only one
16:02 statement. Not a problem. But if multiple statements are there, what I have to do? I have to surround this with curly braces like this. Okay. Have to surround this with curly braces like this. Okay. Then it will be okay. Written C means it will return back here. I have to say 5, 4. Then what will happen if you have multiple statements in this arrow function then you have to write curly braces otherwise only one statement is there you can you don't need curly braces and even you don't need a return keyword also I just mentioned right already so like this lot of varieties are there here so you'll get the answer as 9 okay 5 + 4 9 so so hope guys you got some idea about this uh arrow functions in JavaScript okay how to convert the traditional function if you want to save the number
16:48 of lines and write a shorter syntax you know the people tend to write you know they don't want to create a detailed function sometimes okay uh they want to write these functions in a single line so this is the way okay you convert the traditional functions into the arrow functions uh and uh and there are other way all the other things I covered here okay the important things I covered here when you have to use a curly braces when you don't need the circular brackets when you have only one parameter you don't need circular brackets whether you put it or not doesn't matter when you have zero parameter circular brackets are required. When more than one parameter are there, compulsory circular brackets are required. And here return statement is not required. X plus Y will be automatically returned back to the function calling statement. If you write the return written keyword again, you have to surround with curly braces and all. Okay, so a lot of things are there
17:33 guys. Okay, lot of things are there regarding the arrow functions and uh this how you need to understand the arrow functions for this point of time. Okay, so since you have now understood what are error functions, now you can understand the other methods of that is okay. the other methods that you can use with arrays as part of part two and part three. I may I may be using this arrow functions concepts. Uh if you don't understand this arrow functions, you'll not be understanding the part two and part three methods that we can use with arrays in the next sessions. Okay? So go with this arrow functions first and then go to the next sessions, okay? Accordingly. So guys, that's all for this session. See you in the next session. Thank you. Bye-bye.
