A Quick Introduction to pipe() and compose() in JavaScript

Functional programming is gaining popularity in JavaScript development. Two fundamental concepts in functional programming are function composition and piping, which are implemented using compose() and pipe() respectively. These concepts allow for the creation of complex operations by combining simple functions in a clear and readable manner. In this article, we will explore what compose() and pipe() are, how they work, and provide a working example to showcase their use.

Compose()

The compose() function is used to combine multiple functions into a single function. It takes a series of functions as arguments and returns a new function that, when executed, runs the original functions from right to left. This means the output of the rightmost function is passed as the input to the next function, and so on.

Syntax:

const compose = (...fns) => (arg) => 
  fns.reduceRight((acc, fn) => fn(acc), arg);

Features of compose()

• Combines functions from right to left.
• The output of each function is passed as the input to the function on its left.
• Allows for creating complex transformations by composing smaller functions.

Uses of Compose()

• When the sequence of transformations starts with the final result in mind.
• Common in middleware composition (e.g., Redux).
• Useful in functional programming to build complex operations from simple functions.

Example: To demonstrate the usage of the compose() method in JavaScript.

const compose = (...fns) => (arg) => 
  fns.reduceRight((acc, fn) => fn(acc), arg);

const composedFunction = compose(exclaim, toUpperCase, trim);

const result1 = composedFunction('  hello world  ');
console.log(result1); // "HELLO WORLD!"

Output:

"HELLO WORLD!"

Pipe()

The pipe() function is similar to compose(), but it combines functions from left to right. This means the output of the leftmost function is passed as the input to the next function, and so on. It’s essentially the same as compose(), but the order of function execution is reversed.

Syntax:

const pipe = (...fns) => (arg) => 
  fns.reduce((acc, fn) => fn(acc), arg);

Features of pipe()

• Combines functions from left to right.
• The output of each function is passed as the input to the function on its right.
• Creates a clear and intuitive flow of data transformation.

Uses of pipe()

• When the sequence of transformations starts from the initial input and flows to the final result.
• Common in data processing pipelines.
• Preferred in scenarios where readability and straightforward function chaining are important.

Example: To demonstrate the usage of the pipe() method in JavaScript.

const pipe = (...fns) => (arg) => 
  fns.reduce((acc, fn) => fn(acc), arg);

const pipedFunction = pipe(trim, toUpperCase, exclaim);

const result2 = pipedFunction('  hello world  ');
console.log(result2); // "HELLO WORLD!"

Output

"HELLO WORLD!"

In both examples, the functions are applied in a specific order to transform the input string. The compose() example processes the functions from right to left (trim → toUpperCase → exclaim), while the pipe() example processes them from left to right (trim → toUpperCase → exclaim).

Difference between pipe() snd compose()

Conclusion

The compose() and pipe() functions are powerful tools in functional programming, allowing for clear and concise function composition. They enable you to create more readable and maintainable code by chaining simple functions into complex operations. Whether you choose compose() or pipe() depends on your preference for the order of function execution. Both are valuable additions to your JavaScript toolbox.