JavaScript ES5 Chaining map(), filter() and reduce()

JavaScript
Transcript

English (Auto-generated)

So we can change the change the map, produce and filter utility methods on an array. And remember that these methods don't mutate the original array. Instead they returned the filtered map and reduced values in an array. So let's take a look at an example. And out here we have an array called a web deV resumes which has a four objects in it. And each one of these objects has three key value pairs, a soul name, langs and experience. And let's just assume that this there's this company and they have an opening and they've received a bunch of resumes. Data has been extracted and then put into this format and they're looking to hire Javascript developers with a cumulative experience of 12 years at least. So this can this condition can be fulfilled by one developer with a total of 12 years experience or two or more developers as long as the total years of experience is at least 12. Now looking at this array of objects, you see that we have two objects here Which language length property is strictly equal to the string Javascript. So we have to Python developers and we have to Javascript developers and we're looking for one or more Javascript developers with a total of 12 years of experience. Right? So let's filter and extract these debs these javascript debs from this array and I'm going to do let no let developers is equal to web dev resumes dot filter method. So apply the filter method on the web dev resumes to rape and to the filter method, we will pass a callback function as an argument. The callback function interim takes item as um a program and then we want to return, okay we want to return item item out here refers to each object. So we are going to return the item only if it's langs property is strictly equal to the string javascript. Right now, let's just insert this into the dom to see the deV's and this is a bit more fun than console dot log. So I'll just append it. Oops again capslock. Don't want to use that. I'm just going to append this to the body. So document dot body and use the dom append a child method and not a pen child. Well I'm not a pending anything. Let's insert it, insert some text. So inner html So addition assignment operator is equal to Jason dot string. The fi And I'm gonna string if I developers so we have to use a Jason dot string. If I method which is going to pass an object and return a javascript ah reduce on string. Sorry. So let me control s to save and there you go. So now that we see that this variable developers references the filtered out javascript developers which we can see on our page here and we can confirm Yes. The lands property is indeed equal to javascript. So we've filtered out our javascript developers. Now I'm just gonna press enter because I'm going to do my chain in here and maybe remove the semicolon. So now next we'll use map because we're going to retrieve only the value of the experience properties of these two objects. Right? So I'm gonna Chena map method here, which also takes a callback function as an argument and I'm going to only return item, start experience and let me go ahead and control s and there you go. So now you see that we have an array of two values of five and 7. Now, next, what we're intending to do is to add these values five and 7. So that we get um you know, we're checking if we get a total value of 12 because remember the company wants a cumulative experience of 12 years in Javascript, it doesn't matter if it comes from one developer or more. So now we're going to use our reduced method that we have covered in a previous podcast. So let's add these two array values together by chaining the reduce method. So, reduce And this also takes a callback function as an argument and passed to the callback function is an accumulator. And we'll just call this item as well. So we're using the reduce method on the result which is returned by map right? And we used map on the result of whatever was returned by filter. So out here, I am going to return the accumulated result plus item. Okay, so the reduce method takes an accumulator and item s arguments and so that the accumulator is it references the reduced result as the callback function is called for each array item and then this result is added to the next number or item in the array. Right? So essentially reduced method is executing a reducer function on each element of our array and it's returning a single value and now if I control s here, You will see 12. So this lets us know that yes, the company has, you know, we've we've found our to developers and they have a cumulative result of 12. Now let's make this message a bit better by using if else, conditional statements. So what I'm gonna do is I'm going to say, well we need we if the condition is satisfied, then show, you know, show a message to the company if the messages and if the condition is not satisfied if there are no javascript developers who applied with a cumulative result of years of experience resulting in 12 then let the company know in that case as well. So, I'm going to structure my if else conditional statement here. If and then we can just put else on the next line doesn't matter. So, my condition is if developers Right is greater than or equal to 12 and I could have called this developers or years of experience, I just called the developers right. Um that doesn't matter. So now I am going to um a pen a not a pen but change ah the inner html of my body documents body and let's just use a temperate string here. So we can say something like yay um you have successfully found um candidates with the accumulative experience With a cumulative 12 years or more experience and javascript right now else we just say well let me go ahead and control Yes here. But basically what we could do is also insert this. So what I'm gonna do is just control C but I'm gonna change this here is equal to um keep looking and then what I can do is you have found you have successfully found candidates with a cumulative um experience and with a cumulative, what I can do is basically just insert a variable here. Right, right. With a cumulative 12 years experience in javascript. Right, so let's go ahead and try this out control as to save and there you go. So now a message says you have successfully found candidates with a cumulative um 12 years experience in Javascript, we can change this, let's change it from 7 to 8 And now it's 13 that's fine. So you can keep playing around with this and the change of functions will, you know the the change methods will execute as expected. So that's all for this code cast and see you in the next
145 Views 0 Likes 0 Comments

Learn how to chaining map(), filter() and reduce() methods to do functional programming

Comment
Leave a comment (supports markdown format)