Forms of Composition in JavaScript and React

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.

Multiple legos can be joined and yield another lego that can continue to be built on and attached to others. In functional programming, the basic unit for composition is functions and larger functions are built by connecting and combining smaller ones.

When asked how to handle a particular scenario, edge case, or requirement, a functional programmer will nearly always answer: 'with a function'.

Object-oriented concepts like factories, strategy mangers, or polymorphism don't have an equivalent in the functional paradigm. Functional programming has its own key concepts, composition is one.

A (quick) Aside

One distinction between functional and object oriented programming is best seen in the difference between 

circle.area()andarea(circle). In the first version - a more object oriented style -areais a method that exists on theCircleclass and can only be called onCircleinstances. In the second,areais a function that accepts an object. Unlike the object oriented version, it can act on any object that conforms to the type expected byarea.

This illustrates a core difference between the two paradigms. In an object oriented world, data and functionality are coupled - 

areais a function on instances ofCircleobjects limited to objects created by that class. In functional programming, data and functionality are decoupled -areais a function that can act on any object that has the required properties.

While object oriented patterns have interfaces, inheritance and other mechanisms for sharing behavior like calculating the area of various shapes, it can often feel like you're standing in an abandoned abstract factory churning out reverse proxies* 🙃

*I've never written an abstract factory and this is just a cheeky line to maintain engagement. Like all things, OO is another tool to leverage when needed.

Forms of Composition

Functions are not the sole unit of composition and the principle extends beyond the domain of functional programming. ReactJS uses components as a unit of composition. Hooks too like 

useStateare another unit. If you're really focusing, you may notice that hooks are just regular functions which is why they are great for composition.

Its possible to build larger components from smaller components, and write custom hooks that extend the capability of existing hooks.

Composition relies on recursion to build larger abstractions from smaller abstractions but with each abstraction layer as the same type as all the others. Once a compositional unit like functions or components exist, you immediately get a compositional model that allows for building high level abstractions very quickly for free. Each layer of abstraction is fundamentally the same type of thing as all the other layers.

An Example of (Functional) Composition

Let's begin with three functions.

const toUpperCase = str => str.toUpperCase();
const appendExclamationPoints = str => str + '!';
const split = str => str.split('');

Often code takes the output of one function and uses it as the input to another. This is the idea of a pipeline. Data in, data out.

split(appendExclamationPoints(toUpperCase('hello world'))) 
// ["HELLO", "WORLD!"]

While the above works, it isn't the easiest to read. A simpler abstraction is a single function that can be invoked with some string passed as the parameter.

function appendExclamationPointAndSplitOnSpace(someString) {
    return (someString.toUpperCase() + '!').split();
}

appendExclamationPointAndSplitOnSpaceagic('hello world') 
// ["Hello", "World!"]

The above function, while meeting the requirements perfectly, isn't necessarily clean code. It uses an imperative style, specifying each operation to perform to get the desired result. While it may be simple enough to read and understand, a more declarative style would be even easier.

Functional programming can help simplify the above through a helper function called 

compose. Compose accepts an arbitrary number of functions, and returns a new function that runs each of the functions passed in such that the output of the previous functions is used as the input to the next

t appendExclamationPointAndSplitOnSpace = compose(
    split, 
    appendExclamationPoints, 
    toUpperCase
);

appendExclamationPointAndSplitOnSpace('hello world') 
// ["Hello", "World!"]

Note that the functions execute in a right to left wrapping manner similar to the original example. That is, 

splitinvokes the result ofappendExclamationPointswhich invokes the result oftoUpperCase. This results in a declarative style, with no direct function calls or references to the data and methods that exist on the data type. A new function is created that accepts the data and computes the result. Most importantly, we're able to build the new function from existing smaller functions that we already have or are trivial to write.

Composing functions requires adherence to the following intuitive rule. The output type of function A must match the input type of function B given that B runs with the output from function A. In a practical example, if a function that returns a number is composed with a function that expects a string, some unexpected errors might creep in.

Various implementations of 

composecan be found in Lodash, Redux, and other JavaScript libraries. Its certainly not magical, and can be written in under 10 lines.

functional-programming javascript reactjs composition pure-functions compositions-in-javascript compositions-in-react javascript-top-story

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

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

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”.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

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.

Top Startups and Enterprises Using ReactJS

React is a framework released by Facebook for creating Single Page Applications (SPA). What is a Single Page Application? Most web applications are traditionally server-side applications. The server holds the business logic, stores data, and renders the website to the client. When a client clicks on a link, it sends a request to the server, and the server will handle this request and send back a response with HTML code which the browser will render and be viewed by the user.