Recursively calling a curried function in Javascript

Question

As a toy example lets say we have this function and its usage:

const map = (f = n => n + 1) => (lst = [1,2,3]) => {
    if(lst.length === 0)
        return [];
    else
        return [f(...lst.splice(0,1)), ...map(f)(lst)];
}
const inc = n => n + 1;
const map_inc = map(inc);
map_inc([1,2,3]) // => (produces) [2,3,4]

Inside of the curried function map I am using "recursion" by calling map(f)(lst).

The example above rebuilds the function before it can be called.

Is it possible to do this recursion without rebuilding the function?

I know of this way:

y = (f = (f, ...args) => [...args],
     ...args) => f(f, ...args);

const map = (mapper = n => n + 1) => (self = mapper, lst = [1,2,3]) => {
    if(lst.length === 0)
        return [];
    else
        return [mapper(...lst.splice(0,1)), ...self(self, lst)];
}
const inc = n => n + 1;
const map_inc = (...args) => y(map(inc), ...args);
map_inc([1,2,3]) // => (produces) [2,3,4]

I do not really like how this requires the passing of the function to itself.

Can this be done without the y function and without passing the function to itself? Can this be done in a more point-free style?

Answer 1

If I'm understanding your question correctly, you can't return named arrow functions, but you can return a named regular function and call it recursively like this:

const reducer = k => function recurse(a, item) {
//...
    const s_res = _.split(item, k, 1);
    return recurse(a.withMutations(a => {
        a.push(s_res[0]);
        let a_element = document.createElement('a');
        a_element.setAttribute('href', '#');
        a_element.addEventListener('click', () => display_gen_element(k, obj));
        a.push(a_element);
    }), s_res[1]);
};

_{P.S. For the sake of readability please don't use one-letter variable names unless it's blindingly obvious what they're for, e.g. a counter in a for loop, etc.}