We earn commission when you buy through affiliate links.

This does not influence our reviews or recommendations.Learn more.

Whether its backend or frontend (or evenspaceships), JavaScript is everywhere.

Along withfilter()andreduce(),map()forms a holy trinity of sorts.

Lets tackle them one by one, starting withmap().

map()is among those functions that give the most trouble to people learning JavaScript.

But thats a whole can of worms that I can open perhaps some other day.

Okay, so,map().

How exactly to convert an item is provided as another function, which by convention, is anonymous.

Thats all there is to it!

Why might we want to usemap()?

Depends on what were trying to achieve.

The originalproductsobject remains untouched.

you’re free to argue thatmap()is nothing but a glorifiedforloop and youd be totally right.

Lets reuse our weather example.

This is howfilter()will know whether or not to include that item in the filtered array.

Lets rewrite the previous code to contain the bug:

Notice something?

Great job if you did!

Theifcondition towards the end checkscolderDays, which is actually an array!

In other words, the code we wrote will never say that there were no colder days last week.

The fix is very simple, as given in the code prior to the above code.

I hope you dont get bitten by this and save yourself hundreds of hours of debugging effort!

The reason is that and Ill be honest here!

reduce()is hard to understand, in the sense of both concept and execution.

Now, dont get scared.

Thereduce()function is nowhere close in complexity and intimidation to, say,B+ Treesand their algorithms.

Its just that this sort of logic is rarely encountered during the average programmers day job.

As the name suggests,reduce()is used to, well, reduce something.

Heres a simpler way to put it reduce()transforms an array into a single value.

Having understood this much is half the battle already.

This function is what we call the reducer function, which forms the first argument toreduce().

The second argument is a starting value, such as a number, a string, etc.

(Ill explain in a while what the heck this starting value is).

Now lets tackle the heart of the whole thing: the reducer function.

I know, I know .

that was a lot of terminology for a single function that is not even mandatory in JavaScript.

And this is why people run away fromreduce().

Okay, so, back to the topic at hand.

The starting value being passed toreduce()is .

well, the starting value for the calculation you want to use.

Now lets look at the signature for the reducer function.

A reducer function being passed toreduce()has the following form:reducerFunction(accumulator, currentValue).

So, whats this current value in a reducer function?

Lets say we have an array holding the firstnnatural numbers (1, 2, 3 .

n) and were interested in finding the factorial ofn.

As is obvious,numbersis the array thats holding all the numbers we want to multiply.

Why usereduce()?

Its a really great question and to be honest, I dont have a sure-shot answer.

Whateverreduce()does can be done through loops,forEach(), etc.

But do check that you look at someneat examplesbefore you decide to binreduce().

You want to know whether there are people in the array who are over the age of 35.

What were saying here is the equivalent of one or more or at least one.

How do you do this?

The code is too C-like or Java-like, in my opinion.

Verbose is another word that comes to mind.

Experienced JS might be thinking of ugly, horrible, etc.

And rightly so, Id argue.

Turns out we have a rather neat function calledsome()already available in the core language.

This function works arrays and accepts a custom filtering function, returning a Boolean value oftrueorfalse.

The code now almost reads like natural language.

every()

Just likesome(), we have another useful function calledevery().

Of course, the test to pass is supplied as an anonymous function most of the time.

includes()

How do you check for the existence of sub-strings and array elements?

But theres a nice alternative that we can make use of:includes().

The usage is as simple as the name, and the resulting code is extremely heart-warming.

And now, time for some code!

But hey, we do know it works on arrays, so maybe we can do some trickery here .

So, what do you happens when you run this code?

It doesnt explode, but the output is disappointing as well:false.

How would you approach it?

Perhaps youd create a new string and use it to store all the necessary characters and return them.

Concepts like slicing are more prominent in other languages, notablyPython.

Slicing is neat and extremely convenient, and theres no reason to not use it.

For JavaScript developers, I highly recommended getting familiar withslice()and adding it to your arsenal!

My complaints notwithstanding, lets take a look at howsplice()works.

In those situations,fill()saves you from loops and off-by-one errors.

It can be used to replace some or all of the array with the given value.

Conclusion

JavaScriptis a large language, despite the small number of core concepts to learn.

The many functions (methods) available to us make up the bulk of this large size.

Actually, the same goes for functional programming concepts, but thats a topic for another day!