Just wanted to list a handful of rather unusual yet interesting uses for Array#reduce. Most of the examples of Array.prototype.reduce out there involve adding numbers together, something along the lines of:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, current) => {
return acc + current;
}, 0);

But there’s much more to Array#reduce than summing numbers in a list.

Note that this post is not JavaScript specific as these concepts apply to any language supporting reducing arrays.

Functional pipelines (aka: function composition)

We can use Array#reduce to compose functions. Just to recap, here’s what composing functions means in Maths:


Let’s go back to the basics and briefly review two important JavaScript concepts: the DOM and the BOM.


The Document Object Model (DOM) is a set of utilities for manipulating XML documents (and, by extension, also HTML documents, which is what we are most likely interested in).

Before being able to make use of these utilities and helpers, DOM transforms XML files into a tree structure, that is, a hierarchy of nodes. This tree represents both the content of the document and the relationship between the nodes.

Let’s write our own Observable interface implementation to understand what’s going on under the hood when we work with RxJS.

An observable is just a function. This function takes in an observer as an argument, and returns a subscription object.

  • An observer is just an object with three methods: next which takes in a value, error which takes in an error message and complete with has no arguments. This is what a standard (logging) observer looks like:
next(value) {
error(err) {
complete() {
  • A subscription object represents a disposable resource, such as…

Here are some thoughts on how to avoid mutations when working with arrays and objects in JavaScript by treating them as if they were immutable data structures.

What’s a mutation?

An immutable value is one that, once created, can never be changed. In JavaScript, primitive values such as numbers, strings and booleans are always immutable. However, data structures like objects and arrays are not.

By mutation I mean changing or affecting a source element. The goal is to keep the original element unchanged at all times.

A mutation is a side effect: the fewer things that change in a program, the less there…

This article is not about explaining how to bring Redux into your own React application, there are heaps of tutorials touching on that already. Let’s rather try to understand what’s really going on under the hood when we use Redux by implementing a simplified version of it from scratch.



Don’t feel like reading the whole thing? You can find the code for this article here. The src/lib folder holds a rough re-implementation of both the redux and react-redux libraries.

The need for Redux

Have you ever needed to display a loading spinner in your application, and found yourself passing in a callback two or…

The this keyword is probably one of the most misunderstood aspects of JavaScript. At the root of it for me, it allows us to reuse functions within different contexts, or in other words, it allows us to decide which objects should be focal when invoking a function.

Whenever you’re trying to figure out what the value of this is, you need to look at where the function is being invoked. Not when it was defined, but specifically when it was called.

Let’s say we have a function called sayHi which takes in a name and logs to the console Hi…

Being able to easily transform the values in observables is what makes functional reactive programming such a powerful tool. At the same time, one of the main goals of libraries such as Bacon.js and RxJS is to provide a unified programming model to handle any type of data, whether it’s synchronous (an array) or asynchronous (an event stream).

These libraries make use of a simple, familiar API based on the functional programming extensions added to JavaScript arrays (known as the Array#extras). You are probably already familiar with the Array.prototype.map, Array.prototype.filter and Array.prototype.reduce methods JavaScript provides.

In Baconland we operate with two different types of observable data types: Event Streams and Properties. Here’s a brief explanation of what these concepts are along with some concrete examples to illustrate when to choose one over the other.

Event streams represent discrete values over time

You can think of event streams as lists of events happening over time.

[(t1, v1), (t2, v2), ..., (tn, vn), ...]

And by wrapping things in Bacon I mean creating observables by wrapping values as reactive datatypes. I reckon this is a good starting point if you are interested in functional reactive programming.

A little bit of context

Functional Reactive Programming (FRP) is functional programming with first class representation for values that change over time. We can represent sequences of any event occurring asynchronously at unknown points in time as a stream.

There are many implementations of the core concepts of FRP, but today I’ll be using Bacon.js.

In Baconland we have two different abstractions for reactive data: Properties and EventStreams. Properties are continuous values whereas…

Federico Knüssel

Front End Developer 👨‍💻

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