Is there a way achieve method chaining with arrow functions?

Question

I was messing around with trying to chain methods and realized things weren't working in my example.

var object = {
  method1: () => {
    console.log('method1');
  },
  method2: () => {
    console.log('method2');
  }
};

object.method1(); // works fine
object.method2(); // works fine

object.method1().method2(); // merp

I know arrow functions do not have its own this context so the situation that is happening above is the window context by default is being set and when the second method tries to trigger, it fails because it tries to find method2 on the window object (please correct me if this is the wrong interpretation of what is happening) and in order to achieve method chaining you have to return this so naturally, this is a problem.

I know the simple solution is simple to use function() instead of arrow functions in the case above, but I was wondering if there was a way to achieve method chaining with arrow functions or is this simply not possible?

Related questions I've read: Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?

In this case and only in this case, you can return `object` as it is already declared (to serve as `this`) — ibrahim mahrir, Oct 23 '17 at 09:08
If you need to chain functions, you will have to return `this`. Also *I know arrow functions do not have a this*??? Arrow function binds parent context to the function. — Rajesh, Oct 23 '17 at 09:11
@ibrahimmahrir hmm interesting I actually didn't think of doing that. You should post that as an answer :P but yes it does seem that is a very specific answer to my scenario. I imagine there are reasons you would want to avoid that. Is the consensus then that if you want method chaining, you have to use `function()`? — aug, Oct 23 '17 at 09:15
@Rajesh English fail yeah sorry what I meant to say is I know arrow functions do have their own this context hence my explanation of how it was set to the window context Updated my question. — aug, Oct 23 '17 at 09:17
@aug In this case it works but not all object get stored in a variable first: `return { /* like for example this object */ };` — ibrahim mahrir, Oct 23 '17 at 09:17
@aug The natural way that works for all cases is to return `this` and you can only do that using `function`s not arrow-`function`s. — ibrahim mahrir, Oct 23 '17 at 09:19
you know you can still use function() {}.. it's still perfectly valid js. — andygoestohollywood, Oct 23 '17 at 09:20
@andygoestohollywood yeah I'm aware I was just curious if arrow functions had a way of intuitively handling this — aug, Oct 23 '17 at 09:23
I would appreciate a comment on why I got a downvote -- users don't improve their questions if you don't comment why. — aug, Oct 23 '17 at 09:24
only chance would be objects.call(method1).call(method1) to re-establish `this` context... otherwise, _not_ using an error function but the `function` keyword is the way to go. — Frank N, Feb 06 '23 at 21:03

score 0 · Accepted Answer · answered Oct 23 '17 at 09:20

May be you can pass the object as the first argument to method1 which works nicely. But its not so nice.

var object = {
  method1: (a: object) => {
    console.log('method1');
    return a;
  },
  method2: () => {
    console.log('method2');
  }
};


object.method1(object).method2(); // merp

Is there a way achieve method chaining with arrow functions?

1 Answers1