Is it possible to compose two functions of the same signature, but with differeing inputs/outputs?

Question

Basically, my problem comes down to composing the functionality of several functions of this signature:

(a: A, b: B) => c: C

To simplify, I need to do something like this, where each of a, b, and c are different types:

const upper = (a, b) => {
  const c = a.toString().toUpperCase();
  return c;
}

const pad = (a, b) => {
  const c = a.toString().padStart(2, '0');
  return c;
}

const repeat = (a, b) => {
  const c = a.toString().repeat(2);
  return c;
}

const format = compose(repeat, pad, upper);

For the record b is used, I'm just omitting it here for simplicity, but assume it must be provided to each function, and each will receive the same value as an argument.

So far, I've been able to solve for the issue of (a, b) => c not being composable due to the number of arguments by currying the functions, flipping the params, and partially applying b to each before I compose them:

I'm using standard compose and flip utilities like so: https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983

const compose = (...fns) => x => fns.reduceRight((y, f) => f(y), x);

const flip = fn => a => b => fn(b)(a);

const fnArr = [
  repeat,
  pad,
  upper
];

const makeFormatter = functionArray => (a, b) => {
  const flippedAndPartiallyApplied = functionArray.map(fn =>
    flip(curry(fn))(b)
  );
  return compose(...flippedAndPartiallyApplied)(a);
};

const formatter = makeFormatter(fnArr);

So with this, I've gotten the whole b issue out of the way, and I can compose several unary functions. But my issue remains that each of my functions are a => c.

Notice how each of my functions must call .toString(). I need this step before I can modify and return my value. Unfortunately, I need to keep true to each function keeping that same signature.

Is there any way I can further modify each function programatically in a way that I don't need to modify the function source codes, but can mutate them in a way that fits my composition pipeline, or is this just not possible?

---

I'm working with a API that runs calendar days through a function you provide to the API that can be used to render a day cell to a datepicker UI. This is the API for reference, and this is an example.

I have a use case where I could have multiple renderDay functions provided through various sources in my app. I'd like to combine these functions somehow because the API only accepts one, and I'd like to do it in an elegant way.

Answer 1

If you have a list of (a, b) -> c and need to bring that back to just one function of (a, b) -> c, I think you can rephrase the problem to defining [c] -> c.

For example:

const formatter1 = (a, b) => a.toUpperCase();
const formatter2 = (a, b) => `${a}-${a}`;
const formatters = [formatter1, formatter2];

// Generic combiner of formatters
const applyAll = fs => (a, b) => fs.map(f => f(a, b));

// Reducer logic
const takeFirst = cs => cs[0];
const concat = cs => cs.reduce(
  (acc, c) => acc + c + "\n", "");
const takeLongest = cs => cs.reduce(
  (acc, c) => acc.length > c.length ? acc : c, "" );
  
// Construct a formatter by composing applyAll and a reducer
const compose = (f, g) => (...args) => f(g(...args));

const formatterA = compose(takeFirst, applyAll(formatters));
const formatterB = compose(concat, applyAll(formatters));
const formatterC = compose(takeLongest, applyAll(formatters));

console.log("Take first:\n", formatterA("a", "b"));
console.log("Concat:\n", formatterB("a", "b"));
console.log("Take longest:\n", formatterC("a", "b"));

What you essentially have to define is how to combine the Elements that are produced by the different formatters.

There is not one right answer to this question. The most straight forward answer would be to concatenate the elements:

const dayFormatter = (date, opts) => (
  <>
     {allFormatters.map(f => f(date, opts))}
  </>
)

Answer 2

How about equipping the different renderDay-functions with an additional predicate that tells whether it isApplicable to a given day or not, and then going through the list of such DayRenderers, and selecting the first that is applicable?

type DayRenderer = (d: Date, mod: DayModifiers) => React.ReactNode

type DayRendererSelector = {
  isApplicable: (d: Date, modifiers: DayModifiers) => boolean,
  renderDay: DayRenderer
};

function combineDayRenderers(
  cases: DayRendererSelector[],
  defaultRenderer: DayRenderer
): DayRenderer {
  return (d: Date, mod: DayModifiers) => {
    for (const { isApplicable, renderDay } of cases) {
      if (isApplicable(d, mod)) {
        return renderDay(d, mod);
      }
    }
    return defaultRenderer(d, mod);
  }
}

If I had to name that "pattern", it would be "vertical composition of partial functions" (something like what's being discussed here). It's basically the same as a switch { case ... case ... case ... default: ... }, but with a list of cases.