Transduction — Functional Programming in JavaScript

Transduction — Functional Programming in JavaScript

One of the great benefits of FP (Functional Programming) is how it encourages a declarative style of code rather than imperative. It has these three very common functions that are widely known as map, filter, and reduce.

One of the great benefits of FP (Functional Programming) is how it encourages a declarative style of code rather than imperative. It has these three very common functions that are widely known as mapfilter, and reduce.

This article will discuss one advance — or I should say “very clever” technique and pattern — used in Functional Programming called Transduction.

Before reading this article, it’s crucial that you are familiar with FP general principles as jumping straight onto this without prior FP knowledge might feel a little pointless. Here’s an article that I wrote earlier which provides an introduction to these principles.


Before starting with transduction, it’s very important to understand how filter, map, and reduce work. Below is a simple real-world diagram that lays out how these three functions break down.

Image for post

Let’s say that we have to make a breakfast fruit smoothie bowl. The steps involved are:

  1. From the pool of veggies and fruits in the refrigerator or the basket, we filter out only the mandarin orange, banana, and avocado and put them in a bowl while not touching broccoli and carrot at all.
  2. Next, we need to peel the fruits in order to put them in a blender. In doing so, we alter these fruits into a simpler form and keep them in another bowl.
  3. As the last step, we need to blend all the fruits and reduce them into one single form which we serve in a final new bowl to enjoy.

To connect this process with the aforementioned functions, the first step is a “filter” operation, the second step is “map”, and the third step is “reduce”. The process of making a smoothie bowl consists of three separate steps. The output from the previous step serves as an input to the next one, just like an ethanol or beer production pipeline.

Image for post

functor javascript transducers performance functional-programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

The Difference Between Regular Functions and Arrow Functions in JavaScript

<p>Other then the syntactical differences. The main difference is the way the this keyword behaves? In an arrow function, the this keyword remains the same throughout the life-cycle of the function and is always bound to the value of this in the...

Functional Programming in Javascript 

The mystic term of Functional Programming (FP) must be familiar to any JS developer. The first impression when we say “JS supports functional programming paradigm”.

Functional Programming in JavaScript

Let’s talk about the raw way of writing functions. Functions perform certain set of actions according to our requirements which could include fetching data, updating State, changing a set of mutable values and updating the DOM and so on.

Functional Programming: Higher Order Functions

Functional Programming: Higher Order Functions. A Better Take on JavaScript’s Higher Order Functions. Functional Programming is awesome! It makes programming fun.

Principles of Functional Programming in JavaScript That Will Make Your Coding Life Easier

Who else loves to write side-effects-free functions? I think we, as programmers, all do. Today, in this story, I will walk you through the basic principles of functional programming that will make your coding life easier.