Callback and arrow function introduction in array

okay so here's the deal you're gonna understand a whole lot of things in this video but I have to dumb down the thanks to a very very low level this might trouble you as an experienced programmer so have patience a little bit but if you are experienced programmer you might be having patience for rest of the people just focus it carefully because you are gonna understand a whole lot of concept about some of the arrow functions no I'm not discussing it in detail but a bare minimum example will be given here so that you get friendly with it okay let's go ahead and do this I want to do certain tasks on an array but I don't have knowledge of loops right now in fact maybe for some reason I even don't want to use loop I just want to fix and do these things very very minimally just with the knowledge of Faerie now notice it very carefully first and foremost I would like to declare a simple function here so let's go ahead and say function and inside this function let's just call it as is even so you might have guessed what's coming up we are going to try and find out whether the elements are even or odd you're gonna pass me on an element there we go and I'm gonna do some testing on this so I'm gonna simply go ahead and say if the element let me copy this so that I don't make mistake so if the element that you are giving me and I do a modulus of eight by two it should return exactly zero because if a number is completely divided by two it is even that's how we check them last time I checked so we're gonna simply go ahead and say return true but if that's not the case we're gonna go ahead and say return false okay let's do a quick testing of it sure let's go ahead and say console.log and we're gonna say is is even and i want to test it with two pretty simple value let me go ahead and try to run this now when i try to run this one here let me just run this zero three intermediate eight arepa two dot GS I try to run this this gives me true fairly accurate when I try to run this one here again let's try to run this fairly accurate okay now let me show you a bit of minimalistic code and you're gonna see this a lot people like to just shrink their code a lot and your learn that eventually but there is nothing wrong in this code do you can hundred percent write it I recommend big nuts to write this level of code because eventually you adapt to smaller code so what I can do is I can actually remove this false here because I don't need it now notice here what's going to happen and in fact I can just keep it all of it so that you have this one comment this out now notice here what I'm gonna say is I'm gonna say I want to return something and I just want to return that whatever the element you give it to me if I module it by two I should be getting zero now the advantage of writing this single line of code is that that this situation is always gonna evaluate as either true or false and if it evaluates to as true that means number is even and if it evaluates to false that means it's false so technically this and this line of code is exactly same this is little bit trickier and eventually you learn to write these style of code with experience no hurry in that so we see false and we go ahead and see - and this is gonna come in as a true ok no big deal so far now as I talk to you in well the earlier video that what we can do is actually we can call a simple VAR keyword we can put up an equal sign and write a function this is like holding the entire thing inside a variable but also what you're gonna notice that sometimes we don't even write this function keyword but rather we insert an arrow here literally equal sign and this greater than or smaller than however you see that so we literally use this arrow and this is exactly the same code it has syntactically and to be honest inner working there is nothing difference this actually makes our life a lot easier in many of the cases and we're gonna understand this a little bit later but by inserting this arrow function in this one liner of code notice what happens when I even remove this return keyword now save this and let me show you something this is this is important when I run this it says undefined when I go back here and I add this return keyword now it's gonna give us the true again we are going to discuss about this undefined later on right now I just wanted to say that yes it is why to have a return keyword because it's a narrow function now coming moving on to the point now so far we know about there are functions we can hold them in to available we have these arrow functions and sometimes when we don't put return keyword they give us a bit of a headache there but there is another type of function and known as callback functions these functions don't have any name but they are super helpful in some of the situation the situation which we are about to handle in a second okay enough of that so that was all the base that I have created for you for to understand that what's about to happen okay now we're gonna comment this out so there we go now we have a method let me close this down and we have an array I can actually declare a variable and hold the array but I can actually do it directly as well so there we go and eight so I have this array and as soon as I put dot on it I can use all the methods of an array like a push I can use unshaved shift and everything that's there one of the very interesting method that you should and I think every programmer should be aware of is array as soon as I put this every notice here there it's a something known as call back FN that is called back function so we can call pass on a call back function and the values that you can use in it are number index and array so these are the three things we can use right now we're not gonna use any one of them but just the first one which is the value that we are passing on so what does array what this every actually does it goes into your array and look for every single element and whatever you are gonna say inside this array it's gonna do that test or that operation with every single element so if I just say is even is even like this it's gonna take every single element and we'll run a test on this here okay that's what it does notice here very carefully I'm not saying is even like this I'm saying is even and this is the difference when you don't want to run the function rather you want to pass on a reference on to that so that whenever this every goes onto every single method it knows where to look for the function we are not running it running for it okay now let's just say that I under stole whatever comes up as result I'm going to hold this into a variable result and I'm gonna simply go ahead and do a log of result there we go save this open this one and let's go ahead and run this one notice it comes as true the true actually came because every single element in this is actually giving us a result of true in the case of is even and that's where every is actually super super handy now let's go ahead and try to run this as three when we save this and run this again it gives me a combined result of false so this is checking for every single element and if all the elements are passing our tests then only it gives us a true result if one of them actually fails us so this is what we are having again this is not the only case of every that we are having we can have many other scenarios where every can be used and many other such methods are there you might have heard about map filter and we're going to talk about them in the separate video but this is just one case now coming again taking you onto another world right now we don't have knowledge of loop but still I was able to perform certain tasks on every single element because I studied a bit more in depth about the documentation of the array that is why I recommend you to spend some time in array don't be in a hurry okay okay so now the next thing that I want to show you here is exactly same whatever we have done this is it but we want to do it a bit more modern way the thing which you actually will be doing in all of the react angular a whole bunch of other things as well now we want to write the exact same code but we want to have a look on how these callbacks are actually returned so notice we have got two three six eight this is the array and this is entirely the code I'm gonna copy that comment that out and writing this I just want to write it bit shorter as a code right now I have to go back write a function and pass on the reference up here you can actually avoid all of this if you know how to write callbacks let me show you how it is that is being done now notice I'll remove the reference of is even then in order to write the callback there are actually a couple of ways how you write the callback in 2020 and onwards you'll be writing the callbacks which are arrow functions call back especially es6 and es8 and moving forward there so you need to understand them right now right here how to write a callback a simple function which doesn't have names so make it a habit pair of parentheses and arrow sign and a curly brace but there is a little bit more here little bit more okay first let's understand the basics of it then we are going to go for more of it remember two three six eight so the result expected because of the three is false that's one thing here we are expecting an element E or element and we are modeling it by two and then returning a zero so let's do the same expecting an element call it X Y a B we are calling it e here I'll come here and I'll hit an enter and I'm gonna say I want to return whatever the element you give me I'm gonna module it by two and I'm gonna give it zero compare it with zero now let's see what is the result that comes in the result comes is the false let's go ahead and try it with four so that we can be very sure that result is coming up good true that's fine okay now let me show you something more which a lot of people just say ah that was not expected in a lot of cases you are not going to use the return keyword whenever you are not using the return key words that means you should not be using these curly braces so remove the curly braces which technically makes it just a one line of code of course I have to remove this one this technically makes it a one line of code again this is exactly same what we have returned in the past but this time we don't want to use curly braces and that is why we are using this EE here and parentheses just like this exactly same okay now let me show you that if I run this one again this has nothing to do with the code logic this is exactly same but this is the biggest problem that everybody face do I have a shortcut to remember this yes I do have a shortcut so previously we were writing this let me cut this out again let me show you previously we were writing this and this was the basic idea arrow function whenever you put a curly braces you got to return something but in case you don't want to return something still want to remember the sin tax remember these guys they are always there to help you to save the day so in here what you can do is whatever the element you are expecting I'm gonna come here and I'm gonna say II is gonna be module by two and we're gonna get is equal to zero this is much more an understandable syntax compared to when you have nothing there so when you use these parentheses then you don't have to write the return keyword if you have to use curly braces then you have to write the return keyword now when I'm gonna save this probably chances are high that these braces will be get over or will be removed from my on board here this time not but sometimes they are automatically removed because of my extension in the code editor but again if I run this one this gives me exact same result and I can test it out for all the things up here and I don't even have the knowledge of loops till I'm able to do all of this I know this video can be too much for a lot of you to understand the syntax but I have tried my best to actually dump it down the most easiest way so that you understand the things you avoid a lot of bugs in the future while you will be coding in react or angular or any other framework so this will help you again the knowledge of this every keyword is super important that's what I have tried to give you this entire lecture don't worry we're gonna talk about the loops as well later on it's gonna be much more fun but I think this was also too much so let's keep the video short and enjoy your iced tea and I'm gonna catch you up in another video [Music]

Channel: Hitesh Choudhary

Views: 53,105

Keywords: Programming, LearnCodeOnline, javascript, javascript for beginners, javascript course, javascript tutorials, learn javascript, udemy, coursera, udacity, learn js online, javascript projects, js tutorials

Id: Tny4_-QjNHg

Length: 12min 43sec (763 seconds)

Published: Tue Jul 28 2020