Implement/polyfills Array Functions like a map, reduce, filter, forEach and find in Javascript

hello welcome to the tutorial today we are going to learn about the array methods rather we are going to implement them we might have used array method in our projects day-in day-out but how we are going to implement suppose our script doesn't have those methods or we have to write the polyfills that's what we call it if suppose in some browsers some function is not available in old days and old old days what he used to do like 2 4 4 5 years back suppose Internet Explorer doesn't have find then we had to write some polyfills we had to implement them so that's what we are going to do today we know that array have some methods and have you ever wondered like how those matters get available in the airing an instance so what happens is like array instance get created with the array constructor and add a constructor have all these methods available all these methods added as a in the prototype property so that's how it's inherit from the array class so whatever array we create that is basically a class instance of the array and that's how we get all those methods available so now suppose we are going to add such matter we are going to implement our array method so we have to do similarly like those gets available in their instance so all those methods we have to add them in the prototype property of the array class so let's dive into the code and we'll see how we can implement them one by one if I have to use the forage what I will do array dot for each and rich and you have to give a callback to it and yeah so you have to basically give a call back and call back we have three things value of your blue index and the array itself is three things will be there in the callback so you basically have to provide this callback so basically all those mattered like map filter find reduce we'll see later on that all all those a method uses this callback and that solids get created now we'll see for each so suppose this array now we have we have already written a callback here so no we have to provide these variables so we like the current value index an array I'll tell you that this writing this array is not like this is optional thing you can write it it depends upon whether you want it or not it is basically it passes the whole array so in most of the cases you will not need it this is index which will tell you which index it is like I traitor value this also you may not need in every case and this is the current value this is mandatory field so this index and array these are optional so you can you can omit them as well it depends upon used for just for explaining I am writing all those suppose what will do we will console but in value index and added and we'll see so as you can see here we have value as one index the second value is index that is zero and this third values whole array itself so now the value is two so ii will use two and the index is one likewise for value is four and this is the index to index 3 value 8 index for value 10 and this is whole array so that's all in to see the we are going to implement the for each so what we have to do is we have to take the array dot prototype will give the function name suppose we will give my for each you is equal to function function will have all back and so now there is a problem here how we are going to get the array value right as we can see here this was the array instantiated and me array has this property for each and we are able to access this whole array so how we are going to get that array here so in this function whatever that this will be this is pointing to that array whatever array will be using who use our my for each function so this will behave as a array suppose what I will do I will just do console dot log and this and now what I will do is I will write array or my for each and we'll give some we are not going to give anything we'll just give a dummy all back here and as we can see this comment is so that you will get to know and solar printing world so this year now you can see that it's printing the whole area itself basically this is pointing to to that array that is where we got this Oh Larry now we are clear that this is this is basically data rates and what we are going to use so now we have that array so what we'll do we will be needing a for loop we'll X is equal to u so this is the new now we we have this callback right so what does for each do or resist whatever callback you are going to provide it just going to all that callback so we are going to do the same thing but what we have seen whenever we if the callback it will have the three values that's all we have to get the array and we are just going to call that callback that's what foresters it doesn't do anything special it just calls the whatever function you are providing whatever thing you are going to do in the callback so let's see if a callback is working fine or not so we are going to provide a callback and what we are going to do is we uh suppose what we'll do this is a current value we don't need all those thing will just use current value and we'll do console you buddy and so you but in velu it is suppose I'm going to just increment all those values 100 sword I won't call back to do it's throwing summoner let's see what you have to do is we have to provide the actual value the actual value will be this is that array and the that actual the current value will be this dot I and this dot index rather and here it will be index and here this will there ever be that this so that's unit saying we are made some mister of bad I have written so yeah there's a very there look so our array values were one two four eight ten and what it's printing hundred 100 200 400 800 10 so yeah that's all so our for it is my my 4-h is working fine so we will just comment this and we'll this comment this out and we'll see the next function what we are going to implement is removed the next function we are going to implement his map what does map does so map will basically do some transformation in our current array and it returns a new area so so far it was just for I trading the array and do whatever you want with with those values but map is Li returning in youëre with some modification in values of whatever we want to do so we'll see that no so the construct for map would be same array dot map and we'll have a call back this yeah so that's and callback we have three values always will have three values current value index and the array itself so now we are going to implement the same thing or the man rather we can have same thing here for map and we'll just change the name my forage will become the my map my map and yeah so but here we have to do the slight modification we want a result Eric a array left it initialized with the value M ta why I am taking this as I told before that map function returns a new array so that is why I created this array to get all those values which will get process in each of the iteration and we'll keep it in this area and add then we are going to return that new array so this result array will act as that array so now we have that result array where we are going to put every values now we have to run that callback every time in each iteration and we have to take the value out of it because whenever we do map how we how we used the map map we provide some callback function where we return something we give some some some computation suppose we are adding one to each of the value in the array so that's what we had to write a return statement so we are sure that the callback of map function will have a return so whenever we are going to implement this callback it will be returning a new value do that value we are going to put inside that inside our new array and at then we are going to return at result array if you are not understanding what I am saying let's just see how we use map so you'll understand it we already have a map and you already have that arranged lies there suppose this is the current I am item and as I told we need a return statement what we are going to do with item will become a term plus suppose I'm going to add a thousand to each of them and yes you and we had eight that is as I told map returns a new era we are going to consolidate as you can see it's returning in you Aryan as we are adding thousand to each of the item the values are a thousand twenty thousand to four likewise so this is what map is same thing we have implemented so we know that each callback as we can see from here this callbacks has one return statement which is doing some computation and it's returning value we know that this callback is going to return a value that value we are going to push it in one airing and at last we are just going to return that array but that map was so easy to implement actually all those functions are so easy to implement this we have to focus on what exactly that matter is doing like filter will have some condition will going to see the filter next filter will have some condition and it will filter out the array based on that condition so it will not have all those argument only those element it will have which satisfies that particular condition and map as we have already seen it does some computation in the array values and it returns something so we have to utilize we have to understand what exactly to in likewise we can implement implementing is very easy so now I will just remove this and we'll comment this out and we'll see the filter function so I think first we'll just see what filter does so it will become easy to understand just have a simple use case of filter here we are just we going to take the mended tree element that's the current value and filter as I told you have to provide a condition here so what I will do is return my element which are greater than let's see what array we actually have we have something called okay so we'll write return me item which are greater than eight and it again with it it will again give us a new era as a result which is a subset of the me nary because it has filtered out some of the result now we are going to see what exactly is in the new era you as you can see only 10 is there because what is array arrays this which values greater than 8 we have only one values so that's what filter does it filter out values based on some condition that's what we have to implement let's just quickly implement this we can again utilize the same construct little bit modification we have to do my mouth will become my filter it again needs it returns a new era so we wanted a result array this all things are the for loop will be the same because we have to iterate here as well but thing is we don't push everything to a result array veer we have to see the condition which whichever value is satisfying that condition that we have to put it in our array so this callback we are going to implement and it's going to return a new value if that satisfies our if condition then we are going to this is needed result array will have only those value o result or Porsche will have that value so I'll call back we call back we have provided the current value index array and there it it has returned me that statement it got checked okay suppose this value is greater than eight or not it is not then it will skip this if it blue but if it is greater than eight then this will become true and then that particular value we are going to push it in our result array and at last we are going to result we are going to return that array in our case it is resolute here that's how we have to implement filter so is it just like where we have to do that conditional check whatever we were we will have in the callback so it was simple right guys let's see if it is working fine or not so now what we'll do is added or my filter so era dot my filter it will have one value here in one callback item will give the same condition whatever we have given earlier in actual filter function and the value or we are going to give is I term should be greater than eight this is this basically returns a boolean value as we can see so whenever we are going to implement this callback as we can see here and as the result of it will be a boolean so first we might have passed this dot in - what we what what is that one one came here one is less than 1 is less than 8 that is wrong a 1 is not greater than it that is false value so this become this became false and as a result is we are not pushing that to result but when will reach 10 n is basically greater than eight so this will become true and then we'll push that to the result array we'll see here made some mistake I suppose okay this should be indexed and okay it again threatens the values we have to take that you just go to console that you you look that is working as expected now we are going to see the fine function so what does fine do so fine basically I trade in the airing and look for the element you are searching you will give some condition as we have given that I want something where item is greater than 8 so find just written the first value it will it's not going to return you an array it's just going to return the first value which satisfied your condition so that's the difference filter basically returns in new array but fine function is just going to return a new value and that will be the first value in the array in that order which satisfies your condition so we can just quickly see I will just comment out all of these and I will just do it or find it will again take a call back it has almost same construct here also we have to give the condition suppose we give item is greater than 8 same thing we are giving I'm just going to cancel the whole event that we can see this result quickly you I need a every item a greater than me look it has written the value 10 but suppose my array has 12 as well dad also satisfies my condition but it's not going to return that 12 it's just going to return the first value which satisfies our condition but if same thing we do and check in filter it returns a whole array was because I commented out this look filter is returning to value standard tour because this condition is true for two values and in two and that is why this that is returning all that is returning a new era which have all those values which is satisfying this condition but find is a different thing find just written a single value which satisfies your condition and that is the first one in that order maybe many of the element will be satisfying that condition but it won't return it so we'll just quickly implement the find we'll just copy this we'll just comment it out will do my find as we know here we are just going to result the first occurrence of the four the currents of the element which satisfies our condition again here we have to check the condition we have already same thing we have to do little bit modification here we are checking the condition here so as soon as we get the value true we have to break this loop so basically we have to return from it so we'll return the will return what the result will return the this that particular value which is satisfying that particular condition so in our case this if this is getting true for this value so that value we want we'll just return it and break this loop we don't want this this is also not required now we'll do mmm canceled or log my or my find and [Music] we are going to provide a callback which will have a simple condition of you simple condition of item is greater than eight and see what it's printing if it is working as expected or not look it's printing ten after eight we have that value ten itself working similarly as what we what the finders so this is also working fine so it guys you can see that these are very simple fun functions which we can be we have to implement if you know one you can implement all of those the last one is reduce a many of many people find it difficult to implement this but we are going to see if it is really difficult we should not be scared of reduce because we don't use reduce that much so we are little scared of by same people little scared of reduce but it's not like that it also the we just have to understand what exactly it's doing it's not difficult so array dot reduce we have to understand what role things it takes it takes one callback all right brother this way it takes one callback callback we'll have four things yeah that's a little difference all of those function used to have three things the rent value index and the array as the argument of the call back but here little different the things are little different so one value the first value will be the accumulator now with this understanding what exactly reduce is doing don't worry about it we are going to understand it well how exactly it's working we'll see the example then we are going to implement this so accumulator the second value will be the current and when you third will be the index likewise Eddie and apart from that there is we haven't seen that in other other of the function was here we have a different thing here what is that that is initial value that is the initial value so what reduced us reduce basically takes a re it does something some modification and it aggregates all those responses into a one value it returns a single value that value can be array that can be a string value that can be a number so we can use reduced to do the summation of pairing suppose I have for I as we see as we saw in our example our array has these many numbers if you want to sum all of those then we can use reduce so reduce basically is used to get a single value now we'll understand what these terms are accumulator is basically a single value which add then gonna give you the final result it is going to if all those values of each iteration in going to submit subtract whatever thing we are going to do it can be multiplication it can be a subtraction as I am giving you the example if you are adding it up so all the result will get final result will get added in the accumulator the accumulator holds the final value and each step it will keep the previous value and the current value as well so that's the only difference between other function and dysfunction what and now we will see what this initial value suggesting initial value is the optional parameter we can give it or we may not give it it basically tells what if we want to give some initial value to the accumulator we can give 0 or something like wise and we can we can just ignore it accumulator we'll just take the first value of the array as its initial value so let's see one example of reduce so it will be a very simple example this is a recuperator and what it is doing it just look will just give all the values accumulator rent value index we can give actually we don't need that those are not mandatory again and suppose we are giving initial value as one now what we are going to give what we are going to do here is we are going to all those them to the accumulator you let's see what resulted gifts I does not define or so basically artists I demand us the same under Fame okay we have to turn you yeah so it's giving the value as 38 sohow 38 we can say this 20 to 30 34 34 36 37 and the initial value we have given 1 so that is where it has become tacked yet same thing we are going to implement we'll just copy this out my radius just named it as my reduce to no the callback apart from callback we need initial value here as well so we have we should when do and this whole thing looks good it will burn here what we want is we want a new variable because we want a final result that final result should be in some variable right as we know that accumulator that that whatever final result would be there the first value of it the initial value of it comes from the initial value what be so if it is defined and just we can just initialize it with that value and now we don't need all of this as we know our accumulator should get each value of the hydration and is uhh in next you have to write exactly similar in similar fashion whatever the construct here is accumulator current value index and the sway here is this is all back we'll be returning the value and [Music] will we just keep updating this accumulator a pre iteration at at the last we just need to return this accumulator let's there's do it check written read or my tools of callback Oh [Music] a new next daddy and what we want here is on a connector well do I feel like the place where you and so this part is completed initial-value we are going to give you a let's give the same thing because whatever we have given the result the same is to the console dot log of pity puss yeah when I am having a bit of writing aji AZ index very fun I've had you it's printing 38 it's printing 38 two times because one is actual reduce and one is what we have written now so this reduce can be used for many purposes we can use it even for flattening or array we can see that in some of the videos so that's how reduce works guys we have seen everything or each map filter fine and reduce might have observed that for each man filter find have almost same construct reduce had little bit of different construct it has one extra parameter in the callback that is known as accumulator that is like the final result which holds the final result of the whatever operation we are going to do so reduce basically returns a single value it can be a array and string and whatever either case so that's what reduces we'll see so guys I if you need if you think that you need help in some of the topic you can suggest me in the comment box I am going to make videos on them so this is this what I felt is very important because this many interviews have these questions that's how you are going to implement array functions reduce or in filter map so if you know the construct you can easily make it you can easily implement it similarly the other functions as well so guys hopefully you liked the video please press like button do share and subscribe and stay tuned for more videos

Channel: Tech Storming

Views: 3,134

Rating: 4.8581562 out of 5

Keywords: Javascript Interview Question, Own implementaion of Array function, Polyfill of Array Functions, UI development, front end interviews, data structures and algorithms, tricky interview questions, popular javascript question, question asked in amazon interview, flipkart microsoft wallmart swiggy

Id: Oik9PaWoZVg

Length: 41min 28sec (2488 seconds)

Published: Sun Jun 21 2020