Javascript lends itself to functional programming (FP)

JS is a flexible language that can be used in just about any way you like, but it has first class functions and prototypal inheritance that lend themselves to functional programming and object composition.

I found my code re-use Jumped using FP

Using FP constructs avoids setting/passing variables every time there is a function call, encouraging use of simple, re-usable functions. I know that everyone talks about DRY (Dont Repeat Yourself), but I always found there was a balance between function simplicity and the number of function calls when using a more conventional style.

My data visual projects are the product of FP at many levels

The data visual maps in my projects use function components in React, libraries I built heavily using FP, and data processing that used a lot of these same constructs. Check them out if you are interested: Projects Page.

The setup; first you need a flow() or compose() fcn

This function is needed to string together other function calls. Each function gets the output of the last and passes along its result such that the functions composed/flowed together act as a single fcn call.

Writing one yourself -

I think it is useful to see to get an idea of how it works. The only difference between these two is the order functions are used in.

const flow = (...fns) => x => fns.reduce((v, f) => f(v), x);  
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);  

Flow goes right>left or top>bottom, compose the reverse.
How they work x is the initial argument; Reduce uses it as the argument to the first function. After that the current result of the reducer (v, output of last fcn) gets passed to the next function (f).
Using the flow/compose function
Here is how to use it at a basic level.

let addone = n => n + 1
let timestwo = n => n * 2
var plustimes = flow(  
  addone,  
  timestwo,  
)
plustimes(2)
// result is 6

An async flow

I found this to be a not infrequent use case, so here is my async version of flow. This is not the only way to do this, but it was one I could understand and not need to add a library for.
The whole thing returns a promise
The result is a promise because the reduce function is async, but thats the only trick to using it.

const flowSync = (...fns) => x => fns.reduce(async (state, fn) => fn(await state),   

Using async flow

var pplus1 = n => Promise.resolve(n + 1);   
var ptimes2 = n => Promise.resolve(n * 2);   
var plustimes = flowSync(  
  pplus1,  
  ptimes2,  
)
plustimes(2)
// Yields a promise that will yield 6

Translating functions into a form that works in composition

Some functions cannot be used directly; you have to be able to pass a single argument. dot fcns need to be converted, and functions that take more than one argument need to be curried or nested.

let toLowerCase = str => str.toLowerCase();  

The function must be able to take one input, give one output
Even if the fcn will take multiple arguments overall, it needs to be able to take a single argument to call it once the other args are passed. This means using higher order functions or curried functions.

// The arrow function is used to quickly make a higher order fcn
let suber = base => input =>  input - base  
// Curry allows arguments to be given in any combination
// Here using the ramda implementation.
let multer = R.curry((base, input) => input * base);  
let converter = R.curry((conv, input) => conv(input));   

Curry/ higher order arrow functions

I use these constucts a lot because they allow easily making higher order functions (functions that return functions).
What curry is best for
Curried functions can take their arguments in any calling pattern.

let addfour = R.curry((a,b,c,d) => a+b+c+d)
// All of these ways to call it yield the same result
// If you don't give all four args, it returns a function that will  
// take the remaining ones
addfour(1,2)(3,4)
addfour(1,2,3)(4)
addfour(1)(2,3,4)
addfour(1)(2)(3)(4)
// passing the first three so I could use it in a flow() setup
let addlast = addfour(1,2,3)
addlast(4)

What higher order arrow functions are best for

They allow making a higher order function that takes the arguments in the exact pattern specified. It is just a fast way to write higher order fcns.

let addfour = a => b => c => d => a+b+c+d
// Have to pass the args separately
addfour(1)(2)(3)(4)
// and if you don't pass all, it returns fcn with closure on what you did pass
let twoleft = addfour(1)(2)
twoleft(3)(4)

Putting it together; composed functions using flow()

var adder = base => input => input + base;  
var suber = base => input =>  input - base);  
var multer = curry((base, input) => input * base);  
var converter = curry((conv, input) => conv(input));   
const map = curry((fn, arr) => arr.map(fn));  

Compose the functions

var mathish = flow(  
  toLowerCase,  
  converter(Number),  
  adder(15),  
  suber(20),  
  multer(3),  
)

Call it

mathys(8)  
// should yield 9, if you can follow that.  

Functional programming boosted my code re-use

The main reason I use functional programming is that I end up reusing things and not repeating myself more effectively than with any other coding pattern. I end up relying on a relatively small set of basic functions and perform more complex operations by stringing them together. In addition to that, it made it easier to read through code and see what it does as long as the function names represent what they do.