#51 Arrow Function | JavaScript Functions & Data | A Complete JavaScript Course

hello and welcome back in this lecture we are going to talk about Arrow function syntax Now Arrow function is a new syntax which is introduced in es6 version of JavaScript and using this syntax we can write Anonymous functions in a slightly shorter way let's try to understand this with an example here let's go ahead and let's create a function and here I'm going to use function expression syntax let's call it greet and and here we going to use the function keyword followed by a set of parenthesis and inside that we are going to write a console.log statement and here let's say greet function called all right let's go ahead and let's call this greet function and if you save the changes you can see this message logged GRE function called now here this is an anonymous function because for this function we are not specifying a name so we are creating this function using Anonymous function syntax and we are assigning that function to this GRE variable so this is function expression syntax and this is an anonymous function because for this function we have not used a name now this same function we can write using Arrow function syntax now what do we do in Arrow function syntax in the arrow function syntax we don't use this function keyword at all we use parentheses like this and after that we use Arrow syntax for that we use equal to and then greater than and this is called as Arrow syntax and the function is created if I save the changes this function will still run so using this Arrow function syntax we are creating a function we are assigning it to this greet variable and then we are calling that function so inside that function we are simply logging a message that message has been logged here so to create an arrow function syntax you create a variable you use equal to sign after that you use a set of parenthesis like this then you use Arrow symbol equal to and greater than and then you use curly braces like this and inside that you write your function body in the function body you can write anything any function body here I'm simply writing console.log statement and here I'll say Arrow function called all right let's save the changes and now you will see Arrow function called so this is how we create an arrow function now to this Arrow function if you want to pass a parameter you can simply specify the parameter list in these parenthesis for example let's say I want to pass a name parameter and I want to pass time of day parameter and then I want to use the value of these parameters inside this console.log statement so here what I'll do is I'll use back Tex and inside that I'll use template atal syntax so here let's say hello and then I'm going going to use template ital syntax and there I will use name parameter and after that let's say good and then let's again use template literal syntax and there let's use the value of this time of day parameter okay and then now when we are calling this GRE function we need to pass the value for name and time of day parameter so for the name let's pass Chan and for the time of day parameter let's pass morning and now if I save the changes you'll see that in the result we have hello John good morning so basically we using the value of the name parameter and time of day parameter in this string value and based on that this result has been generated so in this way we can also pass parameter to the arrow function by specifying it within the parenthesis now let's say your arrow function is simply taking a single parameter so for example let's say we don't have this time of day parameter and here we will simply say good morning so when the arrow function takes a single parameter in that case these parentheses are also not required you can simply omit these parenthesis and if I save the changes it should still work so it says hello John good morning so here we are using the value of name parameter and then we simply say good morning so in this way also when you have a single parameter for your function then in the arrow function syntax you don't need to wrap that single parameter inside parenthesis but if you have multiple parameters that means if you have more than one parameter in that case you will have to wrap it within parenthesis if I use this time of day parameter again I cannot use it like this in that case I'll have to wrap it within parenthesis like this then only it will work otherwise we will have an error so again here let me go ahead and let me use time of day parameter okay another thing is if your function body when you're using Arrow function syntax if in your function body you have a single line of code then you can also omit these parenthesis but in that case you will have to write the complete function in a single line like this okay so when you have a single line of code in your function body you can omit parenthesis and move it in the same line if I go ahead and if I save the changes it is still working but if you have more than one line of code in that case you will have to wrap it within parenthesis okay in that case you cannot write multiple lines of code for an arrow function without using parenthesis if I have one more line of code here for example I'll just create a variable let's say xals 10 in that case I will have to wrap this function body within parenthesis because now it has multiple lines of code another very important point about Arrow function syntax is let me actually go ahead and let me create one more function so here I'm going to create a variable I'll call it add and I'm going to create this function using Arrow function syntax this function is let's say going to take two parameters X and Y and from within this function we are simply going to return the sum of X and Y okay let's call this add function and there let's pass 20 and 30 and this add function it is going to return us a value let's square and let's log it in developer console if I save the changes it has logged 50 so it is loging the value as expected the sum of 20 and 30 will be 50 but now since we have a single line of code here we can omit these parenthesis that is not required so I'll go ahead and I'll remove this opening parenthesis and I'll also remove the closing parenthesis now if you have a single line of code in your arrow function and you're not using parenthesis for that in that case you cannot use this return keyword you'll have to remove it if you want to use return keyword then you will have to wrap it within parenthesis like this okay then only it will work if I save the changes it is working as expected but if I want to remove the parenthesis in that case I cannot use return keyword so I'll have to remove it but remember that even though we are not using return keyword here by default JavaScript will use return keyword in place of this so here we are simply saying X+ y but we are not using return keyword to return the value of x + y so we are not specifying it explicitly but this expression here since we are not using parenthesis it is going to return this value so if I save the changes you will still see 50 logged here that's because this value is getting returned we are not using return keyword but remember that this value is getting returned but if I use parenthesis then I will have to use return keyword in order to return this value if I don't use return keyword now it is not going to return anything and by default undefined will be returned so you see undefined is locked because now this function is not returning any value since I have used parenthesis I will have to explain itly use return keyword to return that value but when we are not using parenthesis then we don't need to use this return keyword so this is very important to understand because many beginners even me also when I was a beginner I was making this mistake because in the arrow function syntax as I said if we don't use parenthesis then we don't need to use the return keyword but if we use parenthesis even if we have a single line of code we need to use the return keyword if you miss this it is not going to return the value value and because of that it creates a lot of confusion among beginners all right so in this lecture we learned about the arrow function Syntax for the arrow function syntax we don't use function keyword instead we directly use a set of parenthesis where we can specify the parameter list after that we use this Arrow syntax which is equal to and greater than and after that using the curly braces we can write the body of the arrow function if we have only one line of code we can also omit these curly braces so we are going to use this Arrow function syntax a lot because it is simple and it does not involve a lot of code but when you are working with arrow function you need to be very careful because there are some things about Arrow function which you need to understand before using Arrow function for example when working with this keyword and we're going to talk about it in great detail in our coming lectures so in most cases Arrow function will work just like any normal function but there are some scenarios where Arrow function is not ideal and we will talk about it in our coming lectures this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 227

Keywords: javascript, es6, es 2016, modern javascript, javascript tutorial, complete modern javascript course, procademy

Id: jXrpLsoKuNU

Length: 10min 23sec (623 seconds)

Published: Fri Jul 12 2024