Why to return arrow function from a function

Question

Can someone please guide/refer the JS concept that I need to go through to undertand below.

I have below code snippet in my Application. It looks like it is returning a function dAFCreate, but I see no where else we are calling the function dAFCreate ( I am expecting some funtion call like DAF.foo.dAFCreate(); but there is not such call happening)

I tried googling why return arrow functions in functions but did not get any relevant info

export class DomainAction implements Action {
    constructor(public type: string = "", public payload: string) {}
}

export class DAF {
    public static foo(type: string, defaultPayloadValue: any) {
        const dAFCreate = (payload: T): Action => {
             //do something, intialize _payload
            return new DomainAction(type, _payload);
        };
        return dAFCreate;
    }
}

the method `foo()` **returns** that function. So something will call `foo()` and then use the return value later as a function. It probably won't use it by the name as declared in `foo()`, it will use the function via some variable in the calling context. Find the code that uses `DAF.foo()` and you'll find how the returned function is used. — Pointy, Jan 13 '23 at 14:02
You should search for `DAF.foo("...", { something })({ something_else })` or possibly `const f = DAF.foo(...)` and somewhere else `f(...)` — Adriano Repetti, Jan 13 '23 at 14:02
"I tried googling why return arrow functions in functions but did not get any relevant info" yeah, this concept is bizarrely hard to search for if you don't know what it's called, and once you do you don't need to ask about it on SO. Catch-22. — Jared Smith, Jan 13 '23 at 14:27
To find the usage, I would personally search for `DAF.foo`. You'll probably find that `DAF.foo` is invoked by your project. However chances are high that the arrow function that is returned will never be called by you. Instead the arrow function is probably passed to a library (like Angular). The concept of returning a partially applied function is called *currying*. — 3limin4t0r, Jan 13 '23 at 14:56

koalabruder · Answer 1 · 2023-01-13T14:51:51.397

The returned function has access to the closure variables type and defaultPayloadValue. It has additionally access to the properties of the class because of the arrow function operator. That means this is bound to the class.

Search for something like

DAF.foo(...)(...);

or

let fn = DAF.foo(...); 
fn(...);

UPDATE

See the following code:

class DAF {
    iAmNotStatic = 'iAmNotStatic';
    static iAmStatic = 'iAmStatic';
    static foo(type, defaultPayloadValue) {
        const dAFCreate = (payload) => {
             console.log('payload:', payload);
             console.log('type:', type);
             console.log('defaultPayloadValue:', defaultPayloadValue);
             console.log('this.iAmNotStatic:', this.iAmNotStatic);
             console.log('this.iAmStatic:', this.iAmStatic);
             console.log('this:', this);
        };
        return dAFCreate;
    }
};

DAF.foo('type', 'defaultPayloadValue')('payload');

/*
OUTPUT:
payload: payload
type: type
defaultPayloadValue: defaultPayloadValue
this.iAmNotStatic: undefined
this.iAmStatic: iAmStatic
this: [class DAF] { iAmStatic: 'iAmStatic' }
*/

Why to return arrow function from a function

1 Answers1