Knowledge Bank
  • My GitBook
  • Miscellaneous
  • Project
    • Rider and Intellij
    • Code
    • Frontend
      • Condition
      • AddConditionModalDialog
    • Backend
    • e2e
      • fragments
  • JAVASCRIPT
    • Promise
    • Destructuring
    • Spread Syntax and Rest Parameters
    • Typescript
      • Examples of Types
      • React Typescript
    • This
    • Dot Notation vs Bracket Notation
    • Shallow vs Deep Clone
    • New ES Edition
  • C#
    • Project Note
    • Basic
    • Shortcut and Debugging
  • Programming Paradigms
    • SOLID Principles
    • Object Oriented Programming (OOP)
      • Evolution of OOP (Procedural to OOP)
      • Instantiation
      • 4 Pillars of OOP
      • Extra
    • Functional Programming (FP)
      • Idempotent
      • Imperative vs Declarative
      • Immutability
      • High Order Function and Closure
      • Currying
      • Partial Application
      • Memoization and Caching
      • Compose and Pipe
      • Extra
      • Example of FP
    • OOP vs FP
      • Composition vs Inheritance
  • DATA STRUCTURE
    • Big O
    • Data Structure
    • Array
    • Hash Table
    • Linked List
    • Queue and Stack
    • Tree
      • Binary Heap
      • Trie
    • Graph
      • Example of Graph
  • React-Redux
    • MobX
    • Best Practices
  • Algorithms
    • Recursion
      • Examples of Recursion
    • Sorting
    • Searching and Traversal
    • Dynamic Programming
  • REFACTORING
    • Clean Code
      • Formatting
      • Error Handling
      • Concurrency
      • Testing
      • SOLID Principles
      • Classes
      • Objects and Data Structures
      • Variables
      • Functions
    • Code Smells
      • Long Function
      • Duplicate Code
      • Loops
      • Double Negative
      • Christmas Tree Code
      • Complex Condition
      • Primitive Obsession
      • Speculative Generality
      • God Class
      • Long Parameter List
  • Junior to Senior
    • AWS
      • Lambda
    • Session + Authentication
    • Redis
    • Kubernetes
      • Networking
      • Services
      • Deployment
      • Replica Set
      • YAML
      • pod-definition.yml
      • Kubectl
      • Pods
      • Fundamentals
    • Docker
      • Operating System - Extra
      • Dockerfile - Docker Image
      • Docker Storage
      • Docker Network
      • Docker Registry
      • Docker Command
      • Docker Compose
      • Docker Compose - Postgres
    • Security
      • Logging
      • HTTPS, Cross-Site-Scripting (XSS) and Cross-Site-Request-Forgery (CSRF)
      • 3rd Party Library
      • Injection
      • Code Secret, Secure Header, Access Control, Data Management, Authentication
    • CI/CD
    • SPA vs Server-Side Rendering
    • Performance
      • Optimized Code
      • Critical Render Path
      • Backend Optimization
      • Minimized Files and Images
      • Minimized Delivery
  • SECURITY
    • Encryption
    • SSH
  • Command
  • Cheatsheet
    • NPM
    • GIT
  • Writing Template
    • Guide
    • API
    • ChangeLog
    • FAQ
  • Linux
Powered by GitBook
On this page

Was this helpful?

  1. Programming Paradigms
  2. Functional Programming (FP)

Compose and Pipe

Composition is the idea that any sort of data transformation that we do should be obvious. Compose does not exist in JS, so we have to use outside library like Ramda.

It's kind of like a conveyor belt right in a factory. It's easy to move pieces around to get the desired output based on the user's specific requirements.

// Compose function that do two things: 
// multiply by three and make abosulte value.

const compose = (f, g) => data => f(g(data)); // our own created compose function

const multiplyBy3 = num => num * 3;
const returnAbsoluteNumber = num => Math.abs(num);
const multiplyBy3AndAbsolute = compose(
  multiplyBy3,
  returnAbsoluteNumber 
);

console.log(multiplyBy3AndAbsolute(-50));

Pipe is similar to compose, but different flow.

fn1(fn2(fn3(50))); 
//Create compose and pipe:

compose(fn1, fn2, fn3)(50); //Right to left
//same as
pipe(fn3, fn2, fn1)(50); //left to right

const compose = (f, g) => data => f(g(data));
const pipe = (f, g) => data => g(f(data)); 

Compose and pipe function that can take many arguments

const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));

const pipe = (...fns) => fns.reduceRight((f, g) => (...args) => f(g(...args)));

//Example
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));

const multiplyBy3 = num => num * 3;
const returnAbsoluteNumber = num => Math.abs(num);
const showTwoDecimalPlace = num =>
  parseFloat(Math.round(num * 100) / 100).toFixed(2);
const myFunction = compose(
  showTwoDecimalPlace,
  returnAbsoluteNumber ,
  multiplyBy3
);

console.log(myFunction(-50)); // 150.00

With compose and pipe, we've created our little assembly line where we can compose different functions together and they can be assembled in various combinations, these tiny little functions can be easily tested, they are pure functions and at the same time, we're able to compose them together to do something more complex.

PreviousMemoization and CachingNextExtra

Last updated 5 years ago

Was this helpful?