Fusion in JavaScript

JM Santos
JM Santos
Jul 26 · 3 min read
Image for post
Image for post
Photo by Eddie Tsy on Unsplash

Nowadays it is extremely common to see the usage of Array methods such as Array.prototype.map() , Array.prototype.filter() and Array.prototype.reduce() to name a few in manipulating list data structures.

You can see a lot of method chaining such as a chain of Array.prototype.map() to process the transforming of a data, a chain of Array.prototype.filter() to include/exclude specific items in the array or a mixture of two (2) Array.prototype.map() and a Array.prototype.reduce() at the end. Those sorts of chainings are extremely common and that happens very often.

It’s actually a great result having those sorts of chainings to manipulate data but there’s a hidden cost on that in terms of performance and that’s where the Fusion comes in.

⚡ Fuse ’em all

Fusion is a technique of combining pure functions — taking advantage of composition and removing the intermediary copies of data on each layer.

Let’s see an example comparing the non-fusion and a fusion approach.

I would like to start noting that a mapper function that is passed on to the Array.prototype.map() should always, at least, handle it process in a pure manner to avoid unexpected results. Avoid using it and accessing outside variables or mutating another variable outside its lexical scope. Make it pure.

With the given example, you would think it’s well written and easily understandable but what’s the big deal? What is the hidden cost of having a chain of Array.prototype.map()?

Let’s discover it together by unpacking this chain.

Are you surprised? I am too at first.

Each chain of method whether it is Array.prototype.map() , Array.prototype.filter() or Array.prototype.reduce() comes with a cost. It will result in iterating the whole list again and again which will affect the performance especially if we are talking about large datasets.

You might think why not join the two (2) mapper functions in one call of Array.prototype.map() ?

Yes we can join them in a single mapper to avoid chaining of Array.prototype.map() . That is actually a semi-fusion approach already. A full fusion approach is taking advantage of the composition.

I have a question for you, isn’t it inconvenient to manually pass the result from one function to the next function? What if the order is changed? How can we make it better?

Let’s now see how we can make this thing better by applying the Fusion technique.

The pipe() utility accepts an infinite number of functions that it will run from left to right. Meaning that it will execute the functions, add() and multiplyBy2() from left to right and the result of the current function will be passed to the next one. That is kinda the shortcut instead of manually passing the result from one function to another function as we did on our previous example.

When a function is pure it means we can take advantage of composition. The composition is the act of combining pure functions to create a new single function. In our example, we created a new single function that is a composition of the two (2) pure mapper functions using the pipe() utility.

Now that we’ve applied the Fusion technique, our code will now handle even large datasets in a single iteration without duplicate iteration cost and also we’ve taken advantage of the composition in here which is great!

🤖 Bringing It All Together

Fusion is a great simple technique to have on our hands. It can help us when we are dealing with List data structures to take advantage of composition and also get the benefits in performance as well.

If you are interested in checking it out more, here are some references:

Thank you for reading. I hope this will help you on your journey! ❤️

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Sign up for 💌 Weekly Newsletter

By Weekly Webtips

Get the latest news on the world of web technologies with a series of tutorial Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

JM Santos

Written by

JM Santos

Improvise, Adapt, Overcome

Weekly Webtips

Explore the world of web technologies through a series of tutorials

JM Santos

Written by

JM Santos

Improvise, Adapt, Overcome

Weekly Webtips

Explore the world of web technologies through a series of tutorials

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store