Javascript Ninja’s that matter: map ,filter and reduce

The javascript factory.

Hey there, happy you made it let me use this medium to wish you a very prosperous and coded year ahead.

Let’s talk about things that matter this year shall we, i mean we always want to do things that matter,if that is not your case , please close this tab else let’s proceed.

Great, you are still with me. So what are these stuffs that matter? JavaScript favorites “ Map, filter and reduce”. Now there are chances that those new to JavaScript probably don’t know this guys yet, because you are using old or wrong materials, or your instructor is probably new. This is because, this stuff is new, and you are still learning JavaScript, so new people should know the new things right?(My thoughts), enough of the talk, let’s talk about these three,let’s talk about them.

.map()

Note that this is not the same with Map object ,read more about that using this link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map .

Let me explain how .map() works with a simple example. Say you have received an array containing multiple objects — each one representing different types of fruits . The thing you really need in the end, though, is an array containing the names of those who created each fruit(just an example,you can’t create any fruit at least not now).

// What you have
let fruits = [
  { id: 1, name: 'Banana',createdBy:'Fred' },
  { id: 2, name: 'Udara', createdBy:'Donald' },
  { id: 3, name: 'Mango', createdBy:'Leo' },
  { id: 4, name: 'Apple',createdBy:'Pro' }
];</span><span id="ee0c" class="dy jq in db jr b js jw jx jy jz ka ju s jv">// What you actually need
[Fred, Donald, Leo, Pro]</span>

This is where map comes in to handle this work,we grab our variable “fruits” and attach .map() to it, (like some guy attached to some girl) and work out one or two, let’s see that with code.

// What you have
let fruits = [
  { id: 1, name: 'Banana',createdBy:'Fred' },
  { id: 2, name: 'Udara', createdBy:'Donald' },
  { id: 3, name: 'Mango', createdBy:'Leo' },
  { id: 4, name: 'Apple',createdBy:'Pro' }
];</span><span id="8026" class="dy jq in db jr b js jw jx jy jz ka ju s jv">let whoCreatedTheFruit = fruits.map(eachFruitObject => { 
  return eachFruitObject.createdBy
});
console.log(whoCreatedTheFruit);</span><span id="1bd1" class="dy jq in db jr b js jw jx jy jz ka ju s jv">// [Fred, Donald, Leo, Pro]</span>

So what happened there is that, using the map function it takes an argument which is the different objects in the array and returns the createdBy value of each object in the array, very simple and sweet.(map does not only work for array of objects,also normal arrays with or without prop names).

.filter()

This guy does exactly what it’s name stands for, it just filters some kind nice array based on some kind nice rules you set, let’s see how that works before i explain.

// What you have
let fruits = [
  { id: 1, name: 'Banana',createdBy:'Fred' },
  { id: 2, name: 'Udara', createdBy:'Donald' },
  { id: 3, name: 'Mango', createdBy:'Leo' },
  { id: 4, name: 'Apple',createdBy:'Pro' }
];</span><span id="8219" class="dy jq in db jr b js jw jx jy jz ka ju s jv">let whoCreatedTheFruit = fruits.map(eachFruitObject => { 
  return eachFruitObject.createdBy
});</span><span id="f4ca" class="dy jq in db jr b js jw jx jy jz ka ju s jv">console.log(whoCreatedTheFruit.filter((creators) => creators === 'Fred' || creators === 'Donald'));</span><span id="1e93" class="dy jq in db jr b js jw jx jy jz ka ju s jv">// [ "Fred", "Donald"]</span>

Using our previous example, i attached the filter function to our mapped object which currently contains an array of fruit creators. So we receive the creators as props and set a rule to return only an array of some certain creators.

So i decided to filter my array of fruit creators if only the array item is equal to Fred or equal to Donald, so it would only return a creator if your name is Fred or your name is Donald. Even sweeter right?

.reduce()

This guy has been a big brother to me i must say, after we fought some kind nice battle together. The **reduce()** method executes a reducer function (that you provide) on each member of the array resulting in a single output value.The reducer function is fed four parameters:

Accumulator (acc)
Current Value (cur)
Current Index (idx)
Source Array (src)

Your reducer function’s returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array and ultimately becomes the final, single resulting value. Still does not make any sense? Let’s code.

//The creators are Fred and Donald</span>

So, what happened here is that we passed a reducer function to the .reduce() with a value to start with, which is a string. Let me try my very best to explain so pay close attention, because it can be confusing.The reduce function takes two arguments, at times though. The first like i said is the reducer function, this is a regular function that receives an accumulator and currentValue as parameters. The accumulator is the last accumulated value of the reduce process, for us, it is the string “The creators are” because we specified it. The currentvalue is the next value to be operated on and then later on added to the accumulator. So, the block of code in the reducer function(not reduce) is the operation to be carried out on the currentValue and then added to the accumulator, and it must start with a return if on multiple line for arrow functions,else the result is undefined. For us, we take “The creators are” the first time and attach the current value to it with a space before the currentValue and return that to the accumulator, then this action occurs for the next item on the array list till it is done, then it returns a single value.

Reduce also works on array of objects with properties and values, maybe you should try it out as an exercise.If it doesn’t work then you are probably using IE 5.

Well, that’s all about the three ninjas that matter in JavaScript, if this made any sense to you, please give me a round of applause. Drop your questions and contributions below. Keep Learning!!

Javascript Ninja’s that matter: map ,filter and reduce

Comments

More from this blog

The Tech Industry in 2026: What Engineers Should Prepare For

gRPC Streaming Patterns

Sending Raw Emails with Attachments using AWS SES in Go

SHA HMAC signature verification for Paystack Webhook in Go lang

2023: I Escaped

Javascript Ninja’s that matter: map ,filter and reduce

.map()

.filter()

.reduce()

Command Palette

Comments

More from this blog

Javascript Ninja’s that matter: map ,filter and reduce

.map()

.filter()

.reduce()