1 00:00:00,970 --> 00:00:05,080 This video is all about arrow function. 2 00:00:05,740 --> 00:00:10,900 Arrow function is one of the new features that has been shaped into the language. 3 00:00:11,470 --> 00:00:17,350 As a beginner, if you see this syntax for the first time, it looks scary. 4 00:00:17,860 --> 00:00:23,770 Not only scary, but also you find difficult to be familiar with the syntax. 5 00:00:24,100 --> 00:00:26,710 But don't worry, that is why you are here. 6 00:00:27,220 --> 00:00:31,080 I'm going to make it pretty simple for you to understand and use. 7 00:00:31,510 --> 00:00:36,430 So in this video I will talk about everything about arrow function. 8 00:00:36,640 --> 00:00:44,530 So you're going to spend a couple of time or minutes for this particular video and arrow function expression 9 00:00:44,560 --> 00:00:54,910 is a more concise way to write a traditional expression, but also it cannot be used in all situations. 10 00:00:55,420 --> 00:01:02,170 The key note here is concise and then cannot be used in all situations. 11 00:01:02,500 --> 00:01:07,330 When we say concise, meaning, easy way to write a function. 12 00:01:07,660 --> 00:01:15,760 And one point is that it has some limitations where we will talk about most of the limitations with 13 00:01:15,760 --> 00:01:16,690 example. 14 00:01:16,870 --> 00:01:22,510 But before we come back to this one, let's have a look at the syntax of arrow function. 15 00:01:22,510 --> 00:01:26,800 Then we come back and talk about some of the limitations with code. 16 00:01:27,310 --> 00:01:32,020 Well, so let's get back to Visual City code and start with Arrow function. 17 00:01:32,650 --> 00:01:38,760 So back to my Visual Studio code, I have a subheading called Arrow Function. 18 00:01:38,770 --> 00:01:42,670 Now what is the syntax for Arrow function? 19 00:01:42,880 --> 00:01:49,960 To better understand, we are going to write a traditional function and then we convert it to arrow 20 00:01:49,960 --> 00:01:50,440 function. 21 00:01:50,440 --> 00:01:53,200 And that way we better understand differences. 22 00:01:53,440 --> 00:01:54,010 Good. 23 00:01:54,010 --> 00:01:56,920 So this function is going to take in two numbers. 24 00:01:56,920 --> 00:01:58,390 Let's say add. 25 00:01:58,810 --> 00:01:59,800 Let's see, add. 26 00:02:00,100 --> 00:02:07,750 This function will take in first and then the second arguments and just console.log a plus. 27 00:02:07,750 --> 00:02:13,780 B So let's say console dot log or limit return simple return button. 28 00:02:13,870 --> 00:02:19,270 So a return, let's say A plus B, these are simple function. 29 00:02:19,750 --> 00:02:20,200 Good. 30 00:02:20,200 --> 00:02:24,460 So how can we convert this one to arrow function? 31 00:02:24,730 --> 00:02:27,580 As the name implies, I'm going to use arrow. 32 00:02:27,760 --> 00:02:28,300 Good. 33 00:02:28,420 --> 00:02:37,420 And here we go for this function because it has a name we need to assign to a variable called add and 34 00:02:37,420 --> 00:02:45,580 then equal to my parentheses and then my arrow like that and then my carry basis. 35 00:02:45,580 --> 00:02:50,170 So this syntax is same as the one you see here. 36 00:02:50,710 --> 00:02:56,050 So let me say this is R two so that I will not have naming convention being conflicted here. 37 00:02:56,590 --> 00:02:59,800 So this function and this one looks the same. 38 00:03:00,130 --> 00:03:07,870 So the difference is that for arrow function, first of all we assign to a variable equal to and then 39 00:03:07,870 --> 00:03:11,830 our parentheses and then arrow and then our carry basis. 40 00:03:12,640 --> 00:03:17,710 But for this one, we have some situation where we don't need it. 41 00:03:17,710 --> 00:03:21,820 But don't worry for now, let's see the Centers for Arrow function. 42 00:03:22,300 --> 00:03:34,390 So for this one too, you pass in A and then B and inside my parentheses return A plus B so this function 43 00:03:34,600 --> 00:03:39,910 are the same, meaning they perform the same logic but with different syntax. 44 00:03:40,570 --> 00:03:44,080 The first one is a traditional way of what creating a function is. 45 00:03:44,080 --> 00:03:46,750 What the new way of what creating a function. 46 00:03:46,960 --> 00:03:48,220 So what is the difference? 47 00:03:48,220 --> 00:03:51,640 Is one for the arrow function. 48 00:03:51,640 --> 00:03:55,720 We don't have the function keyword, but for this one we have it. 49 00:03:56,700 --> 00:04:02,460 And always evolve and function we assign to a variable but not all situations. 50 00:04:03,600 --> 00:04:08,580 And then we have equal two of which our normal function don't have it. 51 00:04:09,520 --> 00:04:11,530 And then we have our parentheses. 52 00:04:11,530 --> 00:04:13,930 It has here is that we have error. 53 00:04:13,960 --> 00:04:15,490 This one has no error. 54 00:04:15,490 --> 00:04:17,740 Here we have parentheses. 55 00:04:17,769 --> 00:04:20,410 It has and we have the return keyword. 56 00:04:20,410 --> 00:04:21,589 It also has. 57 00:04:21,610 --> 00:04:25,060 So now is how we write error function. 58 00:04:25,600 --> 00:04:31,750 Now that we know how to write error function, let's get back to the slide and talk about some of the 59 00:04:31,750 --> 00:04:32,770 limitations. 60 00:04:32,770 --> 00:04:36,760 Well, this is the only way of not creating error function. 61 00:04:36,760 --> 00:04:41,610 As we move on, I'm going to show you some different way of how we can create a function. 62 00:04:41,620 --> 00:04:47,980 The reason why I just show you the syntax is that we need that one to explain some of the features or 63 00:04:47,980 --> 00:04:50,080 limitations about error function. 64 00:04:50,230 --> 00:04:53,080 Let's have a look at error functions. 65 00:04:53,350 --> 00:04:54,520 Limitations. 66 00:04:54,580 --> 00:04:55,150 Good. 67 00:04:55,150 --> 00:05:02,500 So the first one is what error functions do not have this keyword, remember? 68 00:05:02,500 --> 00:05:10,240 And the object object can have their own methods that can be used on the object properties. 69 00:05:10,940 --> 00:05:14,890 So is it true that every function doesn't have this keyword? 70 00:05:15,140 --> 00:05:15,470 Great. 71 00:05:15,500 --> 00:05:17,240 So let me show you with code. 72 00:05:17,330 --> 00:05:19,390 So back to the Visual City code. 73 00:05:19,400 --> 00:05:21,860 Now we know how you created a function, right? 74 00:05:21,860 --> 00:05:23,120 So now I'm back here. 75 00:05:23,990 --> 00:05:25,730 So the first limitation. 76 00:05:25,760 --> 00:05:27,110 Limitation here. 77 00:05:29,200 --> 00:05:30,260 Imitations. 78 00:05:30,490 --> 00:05:32,030 Oh, yes, like that. 79 00:05:32,050 --> 00:05:36,640 So the first one is every function doesn't have this keyword. 80 00:05:36,640 --> 00:05:37,480 So let's see. 81 00:05:37,510 --> 00:05:39,860 Let's say we have a car. 82 00:05:39,880 --> 00:05:45,130 Objects concept car object is equal to this. 83 00:05:45,550 --> 00:05:51,670 The name of my car is going to be b am w the name of my car. 84 00:05:52,470 --> 00:05:57,960 And then let's say the year this car was made was 20, 22. 85 00:05:58,680 --> 00:05:59,060 Good. 86 00:05:59,070 --> 00:06:07,710 So now for this object, I want to have a method that's going to get the name of the car so I can add 87 00:06:07,710 --> 00:06:15,600 the method as this, let's say, gets a name, get a name like that and is equal to for the meantime, 88 00:06:15,600 --> 00:06:19,020 let's use the traditional way of creating a function. 89 00:06:19,020 --> 00:06:21,540 And this one, there is nothing new here. 90 00:06:22,050 --> 00:06:27,720 So inside this one I want to return the name of the object. 91 00:06:27,780 --> 00:06:35,850 So return and I'll make use of this dot name as that. 92 00:06:35,970 --> 00:06:44,100 So when I call it a function, so this represents the object of which the method is being operated on. 93 00:06:44,250 --> 00:06:52,800 So if I want to console.log the the function or the method inside my object, as simple as Karl objects 94 00:06:52,800 --> 00:06:55,560 don't get named as that. 95 00:06:55,860 --> 00:07:03,360 So if I console.log the result const let's say result equal to this one. 96 00:07:03,810 --> 00:07:07,560 Now inside the console let's console.log the results. 97 00:07:09,150 --> 00:07:18,110 Now you see that I have B and W to make it more simple, let's just display, let's say console.log 98 00:07:18,210 --> 00:07:22,320 the this keyword inside that to be more precise. 99 00:07:22,320 --> 00:07:29,730 So this so this represents the instance of the object that this method is being operated on, right? 100 00:07:34,120 --> 00:07:40,960 This represents the instance of the object that this method is being operated upon. 101 00:07:41,380 --> 00:07:43,330 So now let me remove this one. 102 00:07:43,330 --> 00:07:49,800 And now as soon as I save it, it has already printed inside the console because I just console.log 103 00:07:49,810 --> 00:07:50,020 it. 104 00:07:50,020 --> 00:07:53,070 Here I have it as BMW. 105 00:07:53,080 --> 00:07:55,090 I start with the object. 106 00:07:55,120 --> 00:07:58,810 Now I have this inside this the object. 107 00:07:58,900 --> 00:08:02,530 So what about if I change this one to error function? 108 00:08:02,530 --> 00:08:04,060 Now let's remove this one. 109 00:08:04,300 --> 00:08:05,920 And now here we go. 110 00:08:05,950 --> 00:08:09,420 Remember, every function can be written in anonymous way. 111 00:08:09,430 --> 00:08:11,320 For the meantime, bear with me. 112 00:08:11,320 --> 00:08:14,740 I will show you the different way of how you create a function. 113 00:08:14,740 --> 00:08:24,370 So my parenthesis, my error function, and then my basis as that and then is considered log this keyword 114 00:08:24,370 --> 00:08:25,750 if I save it. 115 00:08:26,140 --> 00:08:26,950 Have a look. 116 00:08:27,580 --> 00:08:35,440 Let me see if this one and now if I refresh this one see that the this not represent the window object. 117 00:08:35,440 --> 00:08:36,280 Perfect. 118 00:08:36,520 --> 00:08:43,840 But if I try to access the instance of the object properties like the name if I make use of this dot 119 00:08:43,870 --> 00:08:44,590 name. 120 00:08:45,630 --> 00:08:45,810 Yes. 121 00:08:46,080 --> 00:08:46,770 Have a look. 122 00:08:47,280 --> 00:08:48,090 You see that? 123 00:08:48,390 --> 00:08:48,900 Nothing. 124 00:08:48,900 --> 00:08:50,070 Nothing printed here. 125 00:08:50,070 --> 00:08:51,060 Right here. 126 00:08:51,240 --> 00:08:55,020 Because it has no this inside the arrow function. 127 00:08:55,680 --> 00:08:56,850 In arrow function. 128 00:08:56,880 --> 00:09:00,060 This represents the global objects. 129 00:09:00,450 --> 00:09:07,770 So this doesn't represent our making reference to the object of which the method is being used on. 130 00:09:07,800 --> 00:09:12,860 That is one thing that every function does not have this keyword, remember? 131 00:09:12,870 --> 00:09:15,870 So if I change this one back to the normal function, you saw it. 132 00:09:15,900 --> 00:09:17,640 We have the name as before. 133 00:09:17,700 --> 00:09:18,780 That's the point. 134 00:09:18,810 --> 00:09:19,680 Number one. 135 00:09:20,490 --> 00:09:24,870 Point number two states that error function do not have arguments. 136 00:09:24,900 --> 00:09:31,080 Remember that we talk about argument and destruction and then spread operators. 137 00:09:31,410 --> 00:09:38,730 So I given simply means that any parameters or arguments we pass into the function, we have access 138 00:09:38,730 --> 00:09:42,990 to those parameters inside the argument of the function. 139 00:09:43,260 --> 00:09:45,880 So let's just add one function here. 140 00:09:46,210 --> 00:09:46,990 Here. 141 00:09:47,400 --> 00:09:48,810 Limitation number two. 142 00:09:48,840 --> 00:09:50,000 I will give you all the slides. 143 00:09:50,010 --> 00:09:50,760 Don't worry. 144 00:09:51,090 --> 00:09:53,340 So let's have a function const. 145 00:09:53,340 --> 00:09:54,510 Let's say add. 146 00:09:54,540 --> 00:09:56,910 Now use a function. 147 00:09:58,200 --> 00:09:58,950 Like that. 148 00:09:59,490 --> 00:10:04,620 So inside this one, can we have access to the arguments? 149 00:10:04,650 --> 00:10:05,250 Let's try. 150 00:10:05,280 --> 00:10:06,090 So consult that. 151 00:10:06,090 --> 00:10:08,250 Log the argument. 152 00:10:10,910 --> 00:10:13,730 So if I call a key, it has been declared. 153 00:10:13,730 --> 00:10:15,590 So let me comment this one out here. 154 00:10:17,330 --> 00:10:19,910 If I call the ad function. 155 00:10:21,050 --> 00:10:23,870 Let's see, I get reference error. 156 00:10:24,380 --> 00:10:31,040 Meaning the argument is not defined because every function we don't have the arguments, but instead 157 00:10:31,040 --> 00:10:32,900 we can use the spread operators. 158 00:10:33,110 --> 00:10:39,460 But if I change this one to normal function as a function, let me say this. 159 00:10:39,470 --> 00:10:46,790 I'm going to be at two parentheses, carry braces and console that, log the arguments. 160 00:10:46,790 --> 00:10:52,940 And now if I call the function at two, now you can see that we have it. 161 00:10:52,940 --> 00:10:54,530 So let me console.log. 162 00:10:54,560 --> 00:10:56,600 Let me remove this one for now. 163 00:10:57,610 --> 00:10:58,790 Yes, we see that now. 164 00:10:58,790 --> 00:11:00,600 We have the agreement. 165 00:11:00,610 --> 00:11:07,270 So any agreement or passing to this function, I have access inside the agreement as one and three. 166 00:11:07,690 --> 00:11:12,820 That's why we say that every function don't have the agreement inside them. 167 00:11:12,910 --> 00:11:22,210 The next limitation says that every function cannot use as a constructor for this particular concept 168 00:11:22,210 --> 00:11:28,750 because we haven't talked about classes in JavaScript immuno understand for some of you, but don't 169 00:11:28,750 --> 00:11:32,680 worry, we will treat classes later in this course. 170 00:11:32,680 --> 00:11:40,570 But for some demonstration purposes let's try to go over and show you why we can use every function 171 00:11:40,570 --> 00:11:42,250 as a constructor function. 172 00:11:42,580 --> 00:11:50,020 So let's go ahead and create simple class of a car and or a person, and then you're going to create 173 00:11:50,020 --> 00:11:52,090 an instance of the person. 174 00:11:52,300 --> 00:11:53,320 So here we go. 175 00:11:53,950 --> 00:11:56,860 So let's say that I have a function. 176 00:11:56,860 --> 00:12:01,210 For the meantime, let me use the normal way of creating a class. 177 00:12:01,480 --> 00:12:06,760 So function going to be the person uppercase. 178 00:12:07,930 --> 00:12:09,820 And then as that. 179 00:12:10,360 --> 00:12:17,410 So inside here I have access to the name inside my agreement here as name. 180 00:12:17,710 --> 00:12:23,470 So here I will say that this does name equal to name. 181 00:12:23,650 --> 00:12:28,930 Now I can create an instance of a user from this particular class. 182 00:12:29,380 --> 00:12:38,230 So let's say that I want to create, let's say ban so accounts and we see ban and then equal to new 183 00:12:38,230 --> 00:12:41,560 and then the person class as that. 184 00:12:41,560 --> 00:12:46,560 So here I'll pass in let's say John let me say ban. 185 00:12:46,570 --> 00:12:49,000 Yes, let me say Ban Joe. 186 00:12:49,760 --> 00:12:50,450 The name. 187 00:12:50,570 --> 00:12:54,860 So if I console a band, I'm going to have as what? 188 00:12:54,860 --> 00:12:58,910 Banjo as my instance of the person object. 189 00:12:59,090 --> 00:13:03,650 As we see here on the console, we have it being displayed. 190 00:13:03,860 --> 00:13:11,600 So if I going to use error function, we cannot create an instance of that class from our function. 191 00:13:12,020 --> 00:13:14,240 So let's convert this one to a function. 192 00:13:14,240 --> 00:13:25,670 So here I'm going to remove this one and then bring const and then here equal to and then remove the 193 00:13:25,670 --> 00:13:27,410 here, not remove here. 194 00:13:27,410 --> 00:13:30,800 You bring your arrow function here and that is it. 195 00:13:30,830 --> 00:13:36,050 So I've converted the normal function to error function if I save it. 196 00:13:36,050 --> 00:13:40,310 Nine C that person is not a constructor. 197 00:13:40,340 --> 00:13:43,550 That's why it says that we cannot use. 198 00:13:44,360 --> 00:13:47,270 Every function as a constructor. 199 00:13:47,420 --> 00:13:51,480 Now that we know some of the limitations we have, I think five or six of them. 200 00:13:51,500 --> 00:13:53,770 But for the meantime, let's stick to this. 201 00:13:53,780 --> 00:13:57,620 You can read more to advance your knowledge about a function. 202 00:13:57,630 --> 00:13:58,550 So let me comment. 203 00:13:58,550 --> 00:14:00,590 This one's out now. 204 00:14:00,800 --> 00:14:03,020 The the flow starts here. 205 00:14:03,020 --> 00:14:05,000 How to create a function. 206 00:14:05,510 --> 00:14:07,820 Now we are going over again. 207 00:14:07,820 --> 00:14:11,300 So let me say error, function, syntax. 208 00:14:12,230 --> 00:14:17,240 Sin taxes are going to have a lot of syntax here about every function. 209 00:14:18,180 --> 00:14:24,310 The first scenario is every function with one parameter with expression. 210 00:14:24,330 --> 00:14:30,390 The first method here is what if we have, let's say, one parameter? 211 00:14:32,360 --> 00:14:34,070 Parameter. 212 00:14:36,350 --> 00:14:39,140 With simple expression. 213 00:14:39,140 --> 00:14:41,720 I will show you with simple expression. 214 00:14:41,840 --> 00:14:43,790 How are you going to create? 215 00:14:44,590 --> 00:14:46,420 So for this one. 216 00:14:47,110 --> 00:14:51,570 I always want to create a normal function and convey about to everyone to see the differences. 217 00:14:51,580 --> 00:14:56,980 So here it says that this function would take in one parameter with some simple expression. 218 00:14:57,070 --> 00:15:02,290 So let's say the same way function can it be as ADD? 219 00:15:02,290 --> 00:15:06,550 And then here my normal function and then just return. 220 00:15:07,030 --> 00:15:13,000 Return the argument here as a so I'll pass in a here up here a little bit. 221 00:15:13,240 --> 00:15:13,810 Yes. 222 00:15:13,810 --> 00:15:14,920 As that here. 223 00:15:15,860 --> 00:15:23,330 You can see that this function takes in one parameter here as that and with a simple expression as that. 224 00:15:23,750 --> 00:15:24,170 Great. 225 00:15:24,170 --> 00:15:27,980 So now how can we convert this one to error function? 226 00:15:28,160 --> 00:15:30,230 And here we go. 227 00:15:30,350 --> 00:15:40,340 So cost the name of my function, I'll make it as add two is equal to my parentheses and then my error 228 00:15:40,340 --> 00:15:42,050 function as that. 229 00:15:42,230 --> 00:15:50,990 And next is I want to retain the value outputs in here as a and then here going to return a you can 230 00:15:50,990 --> 00:15:58,400 see now as I save it, I get this from the mean time we need to configure I mean prettier. 231 00:15:58,580 --> 00:16:05,600 I just made some changes to the way is formatting my data here so let me bring it back to default so 232 00:16:05,600 --> 00:16:07,310 that would be on the same pipeline. 233 00:16:07,850 --> 00:16:14,930 Now I change this one too and the prettier parentheses are change to avoid. 234 00:16:14,930 --> 00:16:17,150 So let me bring it back to always. 235 00:16:17,150 --> 00:16:18,590 Yours will be always. 236 00:16:18,920 --> 00:16:19,520 Okay. 237 00:16:19,520 --> 00:16:24,260 So now this syntax is equally as this. 238 00:16:24,650 --> 00:16:27,590 So now let's try to call these functions for this one. 239 00:16:27,590 --> 00:16:29,540 You know how to cause there's no problem with that. 240 00:16:29,540 --> 00:16:30,500 Okay, let's call it. 241 00:16:30,530 --> 00:16:31,010 Okay. 242 00:16:31,160 --> 00:16:33,410 So let's just console.log here. 243 00:16:33,440 --> 00:16:35,990 Let's say console.log. 244 00:16:38,080 --> 00:16:40,390 The add function, then I'll pass. 245 00:16:40,690 --> 00:16:44,990 Let's say to it's going to return to us that. 246 00:16:45,110 --> 00:16:45,430 Okay. 247 00:16:45,430 --> 00:16:46,630 So what about the error function? 248 00:16:46,630 --> 00:16:55,080 How can we call it the same way we call the normal function here as that as add to which my URL function. 249 00:16:55,090 --> 00:16:59,110 Now let me comment this one call here and now I still see two. 250 00:16:59,530 --> 00:17:04,030 It means that they all achieve the same logic but with different syntax. 251 00:17:04,480 --> 00:17:13,660 But a key note here is that if you have a function with one parameter with a simple expression return 252 00:17:13,660 --> 00:17:15,160 key word is out. 253 00:17:15,160 --> 00:17:15,960 Not necessary. 254 00:17:15,970 --> 00:17:16,720 You see that? 255 00:17:16,720 --> 00:17:18,280 I just return immediately here. 256 00:17:18,280 --> 00:17:22,030 And then the parentheses is also necessary here. 257 00:17:22,119 --> 00:17:28,930 Again, if we have one parameter, we can ignore this parentheses as that. 258 00:17:30,730 --> 00:17:31,270 Has that. 259 00:17:31,270 --> 00:17:33,550 And this is a perfect pension. 260 00:17:33,970 --> 00:17:40,960 If I save it, I'm going to have the PTI been putting my prime here inside parentheses. 261 00:17:40,960 --> 00:17:44,710 That's why I deactivated that features from PTI. 262 00:17:44,740 --> 00:17:47,710 So let me bring it back as let me avoid it. 263 00:17:47,740 --> 00:17:48,880 Okay, bring it back. 264 00:17:48,880 --> 00:17:49,840 Let me turn off. 265 00:17:50,360 --> 00:17:54,460 Okay, so if I save it now, you see that it looks the same. 266 00:17:54,460 --> 00:18:03,280 I get the same result as to again, if your function has one parameter with one expression, you can 267 00:18:03,280 --> 00:18:08,110 ignore the parentheses and ignore the return keyword. 268 00:18:08,110 --> 00:18:09,880 And then the carry braces. 269 00:18:10,740 --> 00:18:11,190 Perfect. 270 00:18:11,220 --> 00:18:16,920 That's how we can create a function with one parameter with simple expression. 271 00:18:17,680 --> 00:18:24,160 The next situation is what about if you have multiple parameters with expression in that way you may 272 00:18:24,160 --> 00:18:26,060 need the parentheses. 273 00:18:26,080 --> 00:18:28,060 So let me bring this one back here. 274 00:18:28,090 --> 00:18:31,570 Let me bring let me see comment here as number two. 275 00:18:32,380 --> 00:18:35,050 If you have multiple parameters, let me see. 276 00:18:35,050 --> 00:18:36,100 Multiple. 277 00:18:37,630 --> 00:18:40,690 Parameters with simple expression. 278 00:18:40,810 --> 00:18:48,820 For this example, let's create a function called AD three and it's equal to parentheses, error and 279 00:18:48,820 --> 00:18:50,040 my carry braces. 280 00:18:50,350 --> 00:18:52,060 So it says that. 281 00:18:53,830 --> 00:18:59,230 If a function has multiple parameters with some simple expression, what do we need? 282 00:18:59,230 --> 00:18:59,980 One. 283 00:19:00,070 --> 00:19:02,650 It requires the parentheses. 284 00:19:03,410 --> 00:19:04,400 And then they return. 285 00:19:04,410 --> 00:19:06,380 Key word is not needed. 286 00:19:06,410 --> 00:19:13,220 For example, here I can come here and say return as that with a simple expression. 287 00:19:13,400 --> 00:19:18,740 So for this one, let's say that I'm adding two numbers so I can add here A and B, if you have more 288 00:19:18,740 --> 00:19:22,970 than one you need to bring, the parentheses is required. 289 00:19:23,090 --> 00:19:30,680 So for this one, I can just return the sum, let's say return A plus B. 290 00:19:31,190 --> 00:19:37,870 So for this one says that if you have two parameters by this one, this one is a must. 291 00:19:37,880 --> 00:19:42,350 But the return keyword here is not necessary. 292 00:19:42,350 --> 00:19:49,190 So for this one, I can remove my parentheses and remove my return and remove this one. 293 00:19:49,190 --> 00:19:55,130 So now if I save it, now I have it on one line where this is perfect as before. 294 00:19:55,760 --> 00:20:02,810 So the same way I can call this function and let's say let me console.log it and say I want to pass 295 00:20:02,810 --> 00:20:11,780 in, let's say two and three and when I get I mean y I got two or three here. 296 00:20:12,380 --> 00:20:13,700 Isn't supposed to be that. 297 00:20:15,170 --> 00:20:16,140 Oh sorry. 298 00:20:16,190 --> 00:20:18,350 The function is if I had three. 299 00:20:18,350 --> 00:20:19,640 Sorry guys. 300 00:20:19,640 --> 00:20:21,560 Let's say two and three. 301 00:20:21,770 --> 00:20:23,210 Now I get five. 302 00:20:23,240 --> 00:20:26,240 Let me comment this one to avoid more console.log. 303 00:20:26,240 --> 00:20:27,620 Now I get five. 304 00:20:27,650 --> 00:20:30,380 That's one or the second scenario. 305 00:20:30,950 --> 00:20:37,460 The third scenario is if you have multiple statements, again, multiple statements. 306 00:20:37,460 --> 00:20:45,770 So step number three or syntax number three is if you have multiple statements, let me show you here 307 00:20:46,520 --> 00:20:47,960 multiple statements. 308 00:20:49,810 --> 00:20:51,580 With multiple statement. 309 00:20:51,580 --> 00:20:56,170 One, it requires the body braces and then the return keyword. 310 00:20:56,200 --> 00:20:57,220 Let me show you. 311 00:20:57,250 --> 00:21:08,440 Let's say that I have this as some const at sum of numbers and then is equal to my arrow function as 312 00:21:08,440 --> 00:21:09,040 that. 313 00:21:09,040 --> 00:21:10,090 And here we go. 314 00:21:10,480 --> 00:21:16,900 For this one, I'm going to pass in only one value as a but inside here, I'm going to have multiple 315 00:21:16,900 --> 00:21:17,920 statements. 316 00:21:18,460 --> 00:21:18,760 Okay. 317 00:21:18,760 --> 00:21:22,360 So let's say I will declare a variable called a, which is equal to ten. 318 00:21:23,230 --> 00:21:28,630 So whatever our percentages function, I want to add to this variable, I'd click inside here because 319 00:21:28,630 --> 00:21:30,880 this one now has multiple statement. 320 00:21:31,000 --> 00:21:33,640 So now I can come out here and see that return. 321 00:21:33,940 --> 00:21:36,280 Just return whatever. 322 00:21:36,280 --> 00:21:41,470 I'll pass into this function as a plus and make it as B sorry. 323 00:21:41,500 --> 00:21:42,280 B here. 324 00:21:43,630 --> 00:21:50,170 Now take whatever are passing to this function and add it to be so here going to be a plus B for this 325 00:21:50,170 --> 00:21:50,830 function. 326 00:21:50,830 --> 00:21:55,010 We have what, multiple statement, statement number one and two. 327 00:21:55,030 --> 00:21:59,620 So we need to bring in your K replaces the return keyword inside. 328 00:21:59,800 --> 00:22:03,550 But the this parentheses is optional. 329 00:22:03,550 --> 00:22:09,400 We can bring it back as this one put them as that EDC, but it's optional. 330 00:22:09,400 --> 00:22:15,520 If you have one agreement, we can not bring this parentheses here. 331 00:22:15,550 --> 00:22:20,020 If I save it and I call this function at some. 332 00:22:21,320 --> 00:22:22,330 Let's see some. 333 00:22:22,340 --> 00:22:23,390 Then I'll pass. 334 00:22:23,480 --> 00:22:23,840 Let's see. 335 00:22:23,840 --> 00:22:24,320 Ten. 336 00:22:24,860 --> 00:22:27,630 I'm going to get 20 because ten plus ten is 20. 337 00:22:27,650 --> 00:22:28,240 That is it. 338 00:22:28,250 --> 00:22:28,850 That is this. 339 00:22:28,850 --> 00:22:31,070 I mean, scenario number three. 340 00:22:31,990 --> 00:22:38,500 It's never a number four is whatever if you have multiple parentheses with multiple statements. 341 00:22:38,770 --> 00:22:40,020 So here we have what? 342 00:22:40,030 --> 00:22:41,200 When we have what? 343 00:22:41,350 --> 00:22:44,470 A single argument with multiple statements. 344 00:22:44,680 --> 00:22:51,730 So whenever we have multiple arguments or parameters with multiple statements and multiple statements 345 00:22:51,730 --> 00:22:53,440 and multiple. 346 00:22:53,710 --> 00:22:57,430 Multiple, I mean parameters. 347 00:22:59,520 --> 00:23:00,690 Parameters. 348 00:23:00,870 --> 00:23:02,650 How are you going to do it? 349 00:23:02,670 --> 00:23:07,230 So let me comment this once to avoid console.log. 350 00:23:07,260 --> 00:23:08,100 A lot of them. 351 00:23:08,650 --> 00:23:08,940 Okay. 352 00:23:08,940 --> 00:23:10,140 So now here we go. 353 00:23:10,680 --> 00:23:11,280 Let's go. 354 00:23:11,320 --> 00:23:12,010 A variable. 355 00:23:12,030 --> 00:23:14,840 A function called act four in I code. 356 00:23:14,850 --> 00:23:19,760 Now one is see multiple parameters, meaning it can take more than two or three. 357 00:23:19,770 --> 00:23:22,280 So here I need to bring my parentheses. 358 00:23:22,290 --> 00:23:24,450 So taking A and B. 359 00:23:25,660 --> 00:23:29,080 B, A and B, I wouldn't take a C. 360 00:23:29,380 --> 00:23:30,450 It's up to me. 361 00:23:30,460 --> 00:23:34,960 But I think two is okay for just for showing the syntax of error function. 362 00:23:35,230 --> 00:23:37,720 Now I have my error as that. 363 00:23:37,720 --> 00:23:38,530 Perfect. 364 00:23:38,860 --> 00:23:45,790 Now inside my function I can declare additional variable called C and this is my statement as ten. 365 00:23:46,360 --> 00:23:51,400 And then let's also D is equal to 20. 366 00:23:52,240 --> 00:23:58,360 Now I can retain retain the A plus B. 367 00:23:59,270 --> 00:24:04,610 This either agreement now passed into the function, then add to the variables inside my function as 368 00:24:04,610 --> 00:24:06,170 C plus D. 369 00:24:06,830 --> 00:24:11,630 So for this one we have what, multiple statement, which are these ones? 370 00:24:11,900 --> 00:24:15,590 And we have a mean multiple parameters as that. 371 00:24:15,590 --> 00:24:20,360 In this way we need to bring in your parentheses and then the return keyword. 372 00:24:21,590 --> 00:24:27,980 Next is will about immediately retain object literature. 373 00:24:28,490 --> 00:24:30,920 This syntax will lose a little bit scary. 374 00:24:31,160 --> 00:24:38,840 And this syntax is mostly used when you get back to, I mean, react, how is going to retain an object 375 00:24:38,840 --> 00:24:40,370 or Jesus code. 376 00:24:40,760 --> 00:24:42,020 So here we go. 377 00:24:42,020 --> 00:24:43,990 Don't worry, we practice. 378 00:24:44,000 --> 00:24:45,050 We're familiar with that. 379 00:24:45,170 --> 00:24:50,660 So situation number four is that if we have immediately. 380 00:24:51,800 --> 00:24:54,560 Immediately return. 381 00:24:56,420 --> 00:24:57,210 Objects. 382 00:24:57,350 --> 00:24:58,160 Literal. 383 00:24:59,160 --> 00:25:01,740 I think when I write the code, you better understand. 384 00:25:02,700 --> 00:25:12,300 So let's say that I have a user and then I won't display the user to the browser or in the console or 385 00:25:12,300 --> 00:25:12,650 whatever. 386 00:25:12,660 --> 00:25:15,750 Now let's just dump the data inside the console. 387 00:25:16,290 --> 00:25:24,000 So the function that we are going to create is going to take a user and then print out the values to 388 00:25:24,000 --> 00:25:24,750 the console. 389 00:25:24,870 --> 00:25:26,630 So here we go. 390 00:25:26,640 --> 00:25:28,980 So const function. 391 00:25:28,980 --> 00:25:31,500 For the meantime, let me add the user object. 392 00:25:31,510 --> 00:25:34,530 Clumsy const, say user objects. 393 00:25:35,160 --> 00:25:38,400 This way I'm going to pass in to the function to be called. 394 00:25:38,580 --> 00:25:42,480 So here, let's say I need the person's name. 395 00:25:42,510 --> 00:25:44,340 Let me say John. 396 00:25:45,830 --> 00:25:51,240 And then the person's age as, let's say, 20, for simplicity's sake. 397 00:25:51,260 --> 00:25:51,530 This. 398 00:25:51,560 --> 00:25:52,070 Okay. 399 00:25:52,130 --> 00:25:58,520 Now the function to take this object and display to the console or just return it so counts. 400 00:25:58,550 --> 00:25:59,250 Here we go. 401 00:25:59,270 --> 00:26:03,020 For this one, let's run normal function and convert to error function. 402 00:26:03,200 --> 00:26:05,060 So I'm going to make it function. 403 00:26:05,060 --> 00:26:06,560 Let me say as what? 404 00:26:06,560 --> 00:26:07,670 User info. 405 00:26:09,000 --> 00:26:10,140 User info. 406 00:26:11,310 --> 00:26:14,430 And then parentheses and my carry bases. 407 00:26:14,430 --> 00:26:17,430 So here I'm going to return the object. 408 00:26:17,820 --> 00:26:25,110 So I'm going to be like this one, my parentheses again, and then I'll pass in the user here. 409 00:26:25,980 --> 00:26:34,530 So for this I can give it a property name, say name, and then I will take the user object dot name. 410 00:26:36,190 --> 00:26:41,350 And then after that, I also want to take the age so it can be anything here. 411 00:26:41,800 --> 00:26:43,960 It can be my age or whatever. 412 00:26:44,110 --> 00:26:50,650 But make sure the objects that are using DOT, it has the property on the object. 413 00:26:51,100 --> 00:26:53,080 So here I can say age. 414 00:26:53,410 --> 00:26:53,920 Perfect. 415 00:26:53,920 --> 00:26:57,940 So now when I call this function comes. 416 00:26:57,940 --> 00:26:58,510 Let me see. 417 00:26:58,510 --> 00:27:10,360 Get user info or user info and then I'll pass in my user object, my user object as above. 418 00:27:10,420 --> 00:27:15,460 This function is taking in this user object as my parameters to the function. 419 00:27:15,550 --> 00:27:20,890 Now let's assign to a variable called the user here equal to that. 420 00:27:21,220 --> 00:27:28,360 So inside the console, let me console look here and let's say the user where if I save it, I get something. 421 00:27:28,360 --> 00:27:30,370 Where here y undefined. 422 00:27:30,370 --> 00:27:31,030 Undefined. 423 00:27:31,060 --> 00:27:31,690 Oh, sorry. 424 00:27:31,690 --> 00:27:34,710 I didn't pass in the right argument, which is this one. 425 00:27:34,720 --> 00:27:38,610 The object is self sorry if a passenger and I save it. 426 00:27:38,620 --> 00:27:39,160 You see that. 427 00:27:39,160 --> 00:27:40,780 I get it as that. 428 00:27:40,810 --> 00:27:42,670 This is a normal way of using. 429 00:27:42,670 --> 00:27:44,230 Traditional way of what? 430 00:27:44,290 --> 00:27:46,750 I mean, displaying an object. 431 00:27:46,870 --> 00:27:51,880 So let's go by the arrow function way, the same syntax. 432 00:27:51,910 --> 00:27:54,960 Now, let's try to reduce that one a little bit. 433 00:27:54,970 --> 00:27:56,260 You did the syntax a little bit here. 434 00:27:56,260 --> 00:28:02,770 So now for this function, I'm going to remove the function keyword here and make use of const. 435 00:28:03,040 --> 00:28:11,440 And now here after my function name equal to and now before my parentheses, I'll bring my arrow function. 436 00:28:11,500 --> 00:28:15,220 So this one, if I save it, I have it as before. 437 00:28:15,520 --> 00:28:16,870 There's nothing new here. 438 00:28:17,230 --> 00:28:24,670 But the cool part is that for arrow function, it says that if we are returning an object, we can do 439 00:28:24,670 --> 00:28:26,230 it even on one line. 440 00:28:26,350 --> 00:28:32,380 So now for this one, we are going to remove this one, the parenthesis as that. 441 00:28:32,380 --> 00:28:33,520 And now here we go. 442 00:28:33,550 --> 00:28:38,050 I'll bring my parenthesis again of this one. 443 00:28:38,050 --> 00:28:47,940 And inside I'll bring my object right here and here I can have access the name and my object as user 444 00:28:47,950 --> 00:28:49,270 dot name. 445 00:28:51,180 --> 00:28:52,350 I would like to hear. 446 00:28:53,220 --> 00:29:00,360 And after that, come on, going to be the age is going to be user age. 447 00:29:00,450 --> 00:29:03,200 And it's the same if I save this one. 448 00:29:03,210 --> 00:29:07,950 You see, I still have the same to this situation. 449 00:29:07,950 --> 00:29:12,030 You're going to find yourself in some code, especially in React. 450 00:29:12,480 --> 00:29:15,990 So if you see this code in some places or in some blog, don't be scared. 451 00:29:15,990 --> 00:29:17,190 This is how you write it. 452 00:29:17,220 --> 00:29:17,880 Okay. 453 00:29:18,330 --> 00:29:23,910 The next situation is what about destruction object with error function? 454 00:29:24,330 --> 00:29:26,850 Can we in this structure object with error function? 455 00:29:27,030 --> 00:29:30,060 Yes, we have done destruction before. 456 00:29:30,330 --> 00:29:32,040 So let me show you how I'm going to do this. 457 00:29:32,040 --> 00:29:32,550 One, two. 458 00:29:33,180 --> 00:29:36,450 So situation number six, right. 459 00:29:36,450 --> 00:29:38,700 So the structure in. 460 00:29:41,420 --> 00:29:42,320 Objects. 461 00:29:43,320 --> 00:29:46,530 Weight error function. 462 00:29:48,460 --> 00:29:49,180 Here we go. 463 00:29:49,390 --> 00:29:51,630 So let me comment this once. 464 00:29:51,640 --> 00:29:53,470 I need this object. 465 00:29:54,820 --> 00:29:55,990 So here. 466 00:29:56,810 --> 00:29:58,010 Have some space. 467 00:29:58,220 --> 00:29:58,780 Okay. 468 00:29:58,940 --> 00:30:02,420 How can we structure objects with zero function? 469 00:30:02,540 --> 00:30:03,660 But it's easy, right? 470 00:30:03,680 --> 00:30:04,850 So here we go. 471 00:30:05,690 --> 00:30:08,290 So comes my function. 472 00:30:08,300 --> 00:30:13,270 For the meantime, let's also stick to the normal function and convert back to arrow function. 473 00:30:13,280 --> 00:30:13,970 Don't worry. 474 00:30:14,000 --> 00:30:14,960 We are wasting time. 475 00:30:14,960 --> 00:30:15,560 But don't worry. 476 00:30:15,620 --> 00:30:16,970 Just moving step by step. 477 00:30:17,300 --> 00:30:20,780 So my function goes like this as this play. 478 00:30:22,080 --> 00:30:23,310 Display. 479 00:30:24,400 --> 00:30:31,810 A user and now my codebase is so parenthesis and my carry basis. 480 00:30:31,930 --> 00:30:37,780 And now for this one just console.log the values, let me say, return a return from this function. 481 00:30:38,140 --> 00:30:39,520 Let's say return. 482 00:30:39,520 --> 00:30:46,030 Then I would take the the user here as before user. 483 00:30:46,120 --> 00:30:54,850 It's going to be the object or I can do it on one line as so I can say that back tick and next is mine 484 00:30:56,620 --> 00:30:58,390 or yeah, it's okay. 485 00:30:58,390 --> 00:31:07,120 So I would take in the user objects user dot name and then comma the edge. 486 00:31:07,360 --> 00:31:13,990 Let me say your name is so that your name is. 487 00:31:14,710 --> 00:31:25,060 Space and age is dollar sign parentheses and then user dot h. 488 00:31:25,450 --> 00:31:34,750 So now if I call this function, let's see cost user is equal to display user, then I'll pass in the 489 00:31:34,750 --> 00:31:36,280 user object. 490 00:31:37,040 --> 00:31:40,250 Now when I console.log the user. 491 00:31:40,280 --> 00:31:41,060 Let's see. 492 00:31:43,490 --> 00:31:45,200 No, I have. 493 00:31:45,230 --> 00:31:49,220 Your name is John and age is 20. 494 00:31:49,730 --> 00:31:50,180 Perfect. 495 00:31:50,180 --> 00:31:53,450 So how can we convey this one to every function? 496 00:31:53,540 --> 00:31:57,170 Again, we can structure this one, taking what we need. 497 00:31:57,170 --> 00:31:58,940 So here destruction goes. 498 00:31:59,090 --> 00:32:00,740 I need the name. 499 00:32:00,740 --> 00:32:02,150 And then come on. 500 00:32:02,180 --> 00:32:04,220 The H on the object. 501 00:32:04,250 --> 00:32:06,360 Here I have the name and the age. 502 00:32:06,380 --> 00:32:07,520 That's why I'm distracting it here. 503 00:32:07,520 --> 00:32:12,020 So now I can remove the user here and remove the user here. 504 00:32:12,020 --> 00:32:13,790 Now we have less code. 505 00:32:13,820 --> 00:32:16,190 Now we have it as before. 506 00:32:16,220 --> 00:32:17,360 There is nothing new here. 507 00:32:17,360 --> 00:32:20,600 All is not changed now but every function. 508 00:32:20,600 --> 00:32:24,170 How can we convert this one function by destruction? 509 00:32:24,170 --> 00:32:25,220 Pretty simple, right? 510 00:32:25,220 --> 00:32:30,080 So as always, remove the function keyword and bring your const. 511 00:32:30,500 --> 00:32:33,950 And now equal to after my variable name. 512 00:32:33,950 --> 00:32:36,020 And next is after my parentheses. 513 00:32:36,020 --> 00:32:39,440 I'll break my error as that if I save it. 514 00:32:39,680 --> 00:32:43,760 It is before you see there is no change. 515 00:32:43,820 --> 00:32:45,710 That's one scenario. 516 00:32:46,370 --> 00:32:54,950 The next scenario is what about destruction array with error function we have done about what the destruction 517 00:32:54,950 --> 00:32:55,580 before. 518 00:32:56,000 --> 00:32:59,750 So how can we do that one to with an array this an object. 519 00:33:00,050 --> 00:33:02,540 So here, bring this one back here. 520 00:33:02,540 --> 00:33:03,260 Let me comment. 521 00:33:03,260 --> 00:33:04,250 This one's. 522 00:33:04,610 --> 00:33:06,330 And now come down here. 523 00:33:06,350 --> 00:33:11,210 We're going to be destruction objects Mickey array with objects. 524 00:33:11,970 --> 00:33:12,810 So now. 525 00:33:14,280 --> 00:33:19,770 Let's say that we have a function and that function is going to take in an array and then display it 526 00:33:19,770 --> 00:33:20,670 to the console. 527 00:33:21,440 --> 00:33:22,430 Perfect, right? 528 00:33:22,430 --> 00:33:23,690 So here you go. 529 00:33:24,200 --> 00:33:29,240 So Konst let me use normal function first then I right back to earth. 530 00:33:29,900 --> 00:33:36,560 So let me say function again here display user because you have comment out this one. 531 00:33:36,560 --> 00:33:38,630 So there's going to be no conflict here. 532 00:33:39,290 --> 00:33:49,160 So I'll start and here return the name and the age it's going to be as back take or I can put them in 533 00:33:49,180 --> 00:33:53,210 the objects and see I think this long way ladies one line here. 534 00:33:53,660 --> 00:33:54,950 So back take. 535 00:33:55,100 --> 00:34:03,800 So I will take I have access to the user array here and then backtrack is going to be dollar sign. 536 00:34:05,160 --> 00:34:07,200 Dollar sign and my parenthesis. 537 00:34:07,210 --> 00:34:17,880 Then I will take in user Dot's name and then after that I would take the H as user dot h. 538 00:34:18,639 --> 00:34:19,780 So here we go. 539 00:34:19,989 --> 00:34:22,199 I'm going to pass in the values to this. 540 00:34:22,210 --> 00:34:29,260 So here, when I call the function, I want to pass in sum array, array of uses. 541 00:34:29,260 --> 00:34:30,310 So here we go. 542 00:34:30,460 --> 00:34:36,639 So here, let me see when I call the function as display user here, when I'm passing an array with 543 00:34:36,639 --> 00:34:37,690 some details here. 544 00:34:38,110 --> 00:34:39,820 The first one is John. 545 00:34:41,010 --> 00:34:43,199 And then let's say the H. 546 00:34:43,199 --> 00:34:47,050 Remember how we structure array for this one. 547 00:34:47,070 --> 00:34:54,330 It's no work because the syntax here or our logic here works for an object, but because an array we 548 00:34:54,330 --> 00:34:56,820 need the structure h before we can use it. 549 00:34:56,850 --> 00:34:59,340 So for this one we need this value. 550 00:34:59,350 --> 00:35:06,180 So here quickly when I console.log for the meantime, let me comment this one out here and do something 551 00:35:06,180 --> 00:35:06,600 here. 552 00:35:06,930 --> 00:35:12,990 If I console that, log the user, I'm going to have the properties as an array. 553 00:35:13,730 --> 00:35:18,680 And for this one I needed the first name and then the H passing. 554 00:35:18,680 --> 00:35:24,770 So here I can quickly come here and then the structure is the first one going to be. 555 00:35:24,770 --> 00:35:25,730 It can be anything. 556 00:35:25,730 --> 00:35:29,140 Let me say a name and then come on, let me see my age. 557 00:35:29,600 --> 00:35:31,160 Why I can anything here. 558 00:35:31,190 --> 00:35:37,940 So if I console.log these are given here I'm going to have John and what 30. 559 00:35:37,940 --> 00:35:39,290 So now let me bring it back. 560 00:35:39,320 --> 00:35:46,460 Now I can remove the user here because it's no more an object, but instead an array that I've structured. 561 00:35:46,760 --> 00:35:52,550 So if I console.log it now where I get some weird message h is not defined. 562 00:35:52,550 --> 00:35:53,360 Oh sorry. 563 00:35:53,960 --> 00:35:56,960 Here is my h then remove this one. 564 00:35:58,190 --> 00:36:01,370 Now let me assign the result to this. 565 00:36:01,370 --> 00:36:03,800 So const let's say result. 566 00:36:04,580 --> 00:36:08,420 Result is equal to that now. 567 00:36:08,450 --> 00:36:14,180 If I check the result here, you see, I get June 30. 568 00:36:14,330 --> 00:36:15,920 It has been displayed nicely. 569 00:36:15,950 --> 00:36:19,800 So how can you do this one with an arrow function as before? 570 00:36:19,820 --> 00:36:28,610 Why not remove this one and bring const and here after my variable name equal to it, and after my parentheses 571 00:36:28,610 --> 00:36:30,410 I have my arrow function here. 572 00:36:30,500 --> 00:36:37,070 Arrow keyword is that you see it in a display or because I didn't check again. 573 00:36:37,070 --> 00:36:41,180 So let me check the very here as June 30 as before. 574 00:36:41,210 --> 00:36:43,100 This is one scenario. 575 00:36:43,670 --> 00:36:45,920 What about we have a function. 576 00:36:45,920 --> 00:36:51,980 That function we are not going to pass in an array, but instead we already have an array. 577 00:36:52,010 --> 00:36:53,570 How can we do that? 578 00:36:53,660 --> 00:36:55,160 Well, here we go. 579 00:36:55,190 --> 00:36:57,620 So let me comment this one. 580 00:36:57,620 --> 00:37:04,040 And now let's come down here and let's see how we can structure, array, inside array, function. 581 00:37:04,490 --> 00:37:05,360 So here we go. 582 00:37:05,360 --> 00:37:12,050 So the same step counts, let's say display user and now is equal to this. 583 00:37:12,050 --> 00:37:15,170 And now I have my arrow as that. 584 00:37:15,410 --> 00:37:17,720 For now, let me bring my parenthesis here. 585 00:37:17,720 --> 00:37:18,800 So here we go. 586 00:37:18,920 --> 00:37:29,060 So let's say that I have this array which holds the first name as John, and then come on the H. 587 00:37:30,580 --> 00:37:35,020 D h let me say, I'm going to be 50 here. 588 00:37:35,900 --> 00:37:36,300 Okay. 589 00:37:36,320 --> 00:37:40,880 So now I have passed in to this function, my array. 590 00:37:40,910 --> 00:37:44,540 The first one is John and then the first name is John. 591 00:37:44,540 --> 00:37:45,640 The age is 50. 592 00:37:45,650 --> 00:37:48,050 So now how can I structure this? 593 00:37:48,050 --> 00:37:55,100 So here as before my parentheses, sorry, my square bracket here and now equal to that and now here 594 00:37:55,100 --> 00:37:59,510 I want the first one as name and then the age. 595 00:37:59,510 --> 00:38:00,380 So here we go. 596 00:38:00,380 --> 00:38:05,240 So here I can remove the parentheses because this is a simple expression. 597 00:38:05,570 --> 00:38:08,180 So you can bring it or you can choose not to bring it. 598 00:38:08,180 --> 00:38:09,650 The choice is yours. 599 00:38:09,890 --> 00:38:16,880 So I can display, let's say, I mean your back take here and let's see the first one I'm going to be 600 00:38:17,240 --> 00:38:19,790 the name. 601 00:38:20,000 --> 00:38:24,950 And then after that I also have my dollar sign in parentheses. 602 00:38:24,950 --> 00:38:27,710 And then the age I start. 603 00:38:27,710 --> 00:38:30,800 So let me have let me make it one, one line. 604 00:38:30,800 --> 00:38:33,920 I think it couldn't just jump on next line as that. 605 00:38:34,040 --> 00:38:41,720 So if I consider log the function called display user here, I'm going to have it as a function call. 606 00:38:41,750 --> 00:38:42,440 Sorry. 607 00:38:42,470 --> 00:38:45,950 And now I have it as John 50 as that. 608 00:38:45,950 --> 00:38:52,160 So these are some of the scenarios you may need the arrow function, the next scenario or situation 609 00:38:52,160 --> 00:38:54,590 you may need some different way of writing. 610 00:38:54,590 --> 00:39:00,140 A function is if you have every function with some default parameters, let's see. 611 00:39:00,470 --> 00:39:07,970 So let's say I have commas, let's say add numbers together and this number is I need to add for the 612 00:39:07,970 --> 00:39:14,720 meantime, let just write this one first is that I need to take in a and then be. 613 00:39:16,000 --> 00:39:21,790 And for this one, because a simple expression, I can ignore the parentheses and bring in A plus b. 614 00:39:21,820 --> 00:39:23,680 This one is nothing new here. 615 00:39:23,800 --> 00:39:27,320 Well, I guess some syntax error here because this name exists. 616 00:39:27,320 --> 00:39:29,830 So let me change this one to, let's say add nine. 617 00:39:30,430 --> 00:39:31,000 Okay. 618 00:39:31,730 --> 00:39:37,080 So if I call this function, I have to pass in two arguments to it. 619 00:39:37,100 --> 00:39:40,850 So let's say add nine with my function name. 620 00:39:40,880 --> 00:39:43,430 I'll pass in two and three. 621 00:39:43,790 --> 00:39:49,960 So for this one, if I console.log this one, I can copy this one and check inside my console here. 622 00:39:49,970 --> 00:39:51,230 And I have five. 623 00:39:51,320 --> 00:39:51,860 Okay. 624 00:39:51,890 --> 00:39:53,840 Because two plus three is five. 625 00:39:54,320 --> 00:39:54,860 Okay. 626 00:39:55,460 --> 00:40:02,930 So what about if I refuse to provide this when I check the result here where I still see if I didn't 627 00:40:02,930 --> 00:40:04,550 save it, let me save it again. 628 00:40:04,580 --> 00:40:07,260 Check again when I get some undefined. 629 00:40:07,280 --> 00:40:10,070 Well, this one looks weird, right at nine. 630 00:40:10,070 --> 00:40:11,840 Why am I getting this? 631 00:40:12,840 --> 00:40:17,030 Okay, I think there's something wrong, so let me console.log it here perfectly so that I don't see 632 00:40:17,030 --> 00:40:17,450 the error. 633 00:40:19,070 --> 00:40:20,180 So cost. 634 00:40:20,180 --> 00:40:20,850 Let's see. 635 00:40:20,880 --> 00:40:22,640 Answer is equal to this. 636 00:40:23,180 --> 00:40:26,540 And now if I check my answer here we see. 637 00:40:26,540 --> 00:40:32,680 I get not a number because this function requires us to pass in two agreements. 638 00:40:32,690 --> 00:40:35,210 But when I quote a function, I pass in only one. 639 00:40:35,360 --> 00:40:38,540 So to avoid that, we can have some deferred value. 640 00:40:38,660 --> 00:40:42,640 I can say this one is equal to, let's say 20. 641 00:40:42,650 --> 00:40:44,540 Now everything will be fixed. 642 00:40:44,540 --> 00:40:48,860 If I check my answer here, I get 22. 643 00:40:48,890 --> 00:40:56,750 The last scenario is an anomalous function, and then most functions are function without a name. 644 00:40:56,990 --> 00:41:00,830 For the meantime, let's just write it in a traditional way. 645 00:41:00,830 --> 00:41:08,180 So let me comment this once and I'll come down here as an anonymous function. 646 00:41:08,690 --> 00:41:09,230 Here we go. 647 00:41:09,230 --> 00:41:12,370 So function because it has no name. 648 00:41:12,380 --> 00:41:19,760 I'll bring in my parentheses and my services and this function I'll pass in only one agreement and just 649 00:41:19,760 --> 00:41:21,500 return this agreement. 650 00:41:21,710 --> 00:41:27,870 Return this one and say a I start into a plus to whatever, Nancy. 651 00:41:28,010 --> 00:41:29,120 I get an error. 652 00:41:29,480 --> 00:41:31,490 So to make this for animals. 653 00:41:31,490 --> 00:41:35,960 Well, and to put them inside, I mean, parentheses. 654 00:41:35,960 --> 00:41:40,670 So here, one parentheses here, and then have to close it here. 655 00:41:41,330 --> 00:41:44,530 Meaning I'm putting my function inside this. 656 00:41:44,530 --> 00:41:47,510 So here when I press it here, it's at before. 657 00:41:47,810 --> 00:41:51,590 If I have it now, we have it as that. 658 00:41:51,830 --> 00:41:58,130 But to confuse function because always we use a function as a callback. 659 00:41:58,460 --> 00:42:03,140 But if we want to call a function like this one, how are we going to do it? 660 00:42:03,170 --> 00:42:09,620 Once I bring it under, I mean, parenthesis as that, if I save it now, if there is nothing new here. 661 00:42:10,010 --> 00:42:17,480 But if I copy this function and paste it here and now, I get not a number because I didn't pass in 662 00:42:17,480 --> 00:42:19,880 some argument here when I call the function. 663 00:42:20,360 --> 00:42:28,880 So if I passing this here to here and let me copy this function to now I have four because a plus two 664 00:42:28,880 --> 00:42:29,510 is four. 665 00:42:29,570 --> 00:42:34,430 And this is what you call an anonymous function without a name. 666 00:42:34,820 --> 00:42:39,430 And most importantly is called ifI meaning immediately invoke function. 667 00:42:39,440 --> 00:42:40,220 For the meantime. 668 00:42:40,220 --> 00:42:41,990 Don't worry about the syntax alert. 669 00:42:42,020 --> 00:42:42,950 Don't worry about it. 670 00:42:43,040 --> 00:42:48,350 But with this one, we can also simplify this one using arrow function in a simple way. 671 00:42:48,800 --> 00:42:59,090 So for this one, I have my parenthesis pass in a and then error function and then return a plus two 672 00:42:59,450 --> 00:43:01,220 and it's perfect syntax. 673 00:43:01,880 --> 00:43:02,720 You can see that. 674 00:43:03,240 --> 00:43:10,310 So this syntax is equally as this as you saw from the first slice as this. 675 00:43:11,320 --> 00:43:12,130 Great. 676 00:43:12,460 --> 00:43:14,110 So let's some of the scenarios. 677 00:43:14,110 --> 00:43:15,880 You may need functions. 678 00:43:15,950 --> 00:43:16,310 Don't worry. 679 00:43:16,330 --> 00:43:20,920 As you move on, we are going to practice and repeat ourselves and use this. 680 00:43:20,920 --> 00:43:22,870 Error functions in most cases.