# class method abstraction

**URL:** https://es.discourse.group/t/class-method-abstraction/1513
**Category:** 🦋 Proposals
**Created:** [November 9, 2022, 4:50pm UTC](https://es.discourse.group/t/class-method-abstraction/1513 "2022-11-09T16:50:50Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![joaopjt](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/joaopjt/32/1560_2.png) [@joaopjt](https://es.discourse.group/u/joaopjt)
#### Post date: [November 9, 2022, 4:50pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/1 "2022-11-09T16:50:50Z")

</div>

You would be able to call the code below,  
for example of a method in return instead of the simple this reference object.

```javascript
class Example {
  constructor(t) {
    this.text = (t) ? t : 'Hello world!';
  }

  c() {
    console.log(this.text);
  }

  methodOne() {
    this.text = "ONE";
    return this || this.c();
  }

 methodTwo() {
    this.text = "TWO";

    return this || this.c();  
  }
}

const example = new Example();
example.methodOne().methodTwo(); // "TWO";

```

#### Proposal: [https://github.com/tc39/proposal-`class-method-abstraction`](https://github.com/tc39/proposal-%60class-method-abstraction%60)

---

<div class="post-metadata">

### Author: ![aclaymore](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/aclaymore/32/501_2.png) [@aclaymore](https://es.discourse.group/u/aclaymore)
#### Post date: [November 9, 2022, 6:26pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/2 "2022-11-09T18:26:00Z")

</div>

Hi @joaopjt - welcome!

A few things:

- Your code example is already valid JavaScript, what it does can’t be changed.
- the `this` inside a `static` method called like that will be a reference to the class constructor itself. So it can’t be used to call instance methods such as `query`, there should be an instance of the class
- it is not clear what the problem is you are trying to solve, could you go into more detail?

---

<div class="post-metadata">

### Author: ![joaopjt](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/joaopjt/32/1560_2.png) [@joaopjt](https://es.discourse.group/u/joaopjt)
#### Post date: [November 9, 2022, 6:46pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/3 "2022-11-09T18:46:28Z")

</div>

Hi @aclaymore, thanks for the welcome. I've made some changes in the code to really show what the trouble we getting in without the proper abstraction of the class methods.

I guess now will be enought and quite clear to remember what we dealing at without the right abstraction of the methods.

Thanks for now :)

---

<div class="post-metadata">

### Author: ![theScottyJam](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/thescottyjam/32/616_2.png) [@theScottyJam](https://es.discourse.group/u/theScottyJam)
#### Post date: [November 9, 2022, 8:19pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/4 "2022-11-09T20:19:27Z")

</div>

btw - your proposal link seems to be broken (it gives me a 404 error).

Could you expound on why you're expecting the last line to log out "TWO"? The modified code example already runs without errors, and won't log anything out, because `this.c()` never gets called. (The `return this || this.c();` lines cause `this` to simply be returned, since `this` is truthy). Are you wanting the `return this || this.c();` lines to behave differently? If so, how and why?

---

<div class="post-metadata">

### Author: ![joaopjt](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/joaopjt/32/1560_2.png) [@joaopjt](https://es.discourse.group/u/joaopjt)
#### Post date: [November 9, 2022, 8:31pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/5 "2022-11-09T20:31:17Z")

</div>

I'm waiting the call of this.c() on the second call method, so it would be a abstracted method.

---

<div class="post-metadata">

### Author: ![senocular](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/senocular/32/642_2.png) [@senocular](https://es.discourse.group/u/senocular)
#### Post date: [November 9, 2022, 8:32pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/6 "2022-11-09T20:32:05Z")

</div>

Are you saying

```javascript
// v---- should return `this` 
// v---- should return `this.c()`
example.methodOne().methodTwo(); // "TWO";

```

based on, I'm guessing, where the method calls are in the chain?

Another possible example

```javascript
// v---- should return `this` 
// v---- should return `this` 
// v---- should return `this.c()`
example.methodOne().methodTwo().methodOne() // "ONE";

```

?

---

<div class="post-metadata">

### Author: ![joaopjt](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/joaopjt/32/1560_2.png) [@joaopjt](https://es.discourse.group/u/joaopjt)
#### Post date: [November 9, 2022, 8:44pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/7 "2022-11-09T20:44:34Z")

</div>

Yes. Imagine a Query Builder. So we have the following call:

DB.select('time').from('space');

Instead of:

DB.select('time').from('space').query();

What your thoughts on the subject?

---

<div class="post-metadata">

### Author: ![aclaymore](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/aclaymore/32/501_2.png) [@aclaymore](https://es.discourse.group/u/aclaymore)
#### Post date: [November 9, 2022, 9:51pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/8 "2022-11-09T21:51:45Z")

</div>

A challenge here is that while it may look clear what should happen when we look at the code. There needs to be clear semantics for how this would work, and right now there is no mechanism for functions to change their behavior based on the 'position' of where they were called. The operation is `apply` and that does not pass any information other than the receiver and arguments. So:

```javascript
example.methodOne().methodTwo();

```

Is the same as doing:

```javascript
const $1 = example;
const $2 = Reflect.get($1, "methodOne");
const $3 = Reflect.apply($2, $1, []);
const $4 = Reflect.get($3, "methodTwo");
const $5 = Reflect.apply($4, $3, []); 

```

---

<div class="post-metadata">

### Author: ![joaopjt](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/joaopjt/32/1560_2.png) [@joaopjt](https://es.discourse.group/u/joaopjt)
#### Post date: [November 9, 2022, 10:04pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/9 "2022-11-09T22:04:11Z")

</div>

At a first moment, it should return the this reference, else way it call the method. Is matter of abstraction in game here.

We shouldn't let it fall easily like that, I really recommend the pull request of the feature as soon as possible.

---

<div class="post-metadata">

### Author: ![joaopjt](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/joaopjt/32/1560_2.png) [@joaopjt](https://es.discourse.group/u/joaopjt)
#### Post date: [November 9, 2022, 10:04pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/10 "2022-11-09T22:04:42Z")

</div>

Is too a matter of applying arithmethics to the code, not just the abstraction

---

<div class="post-metadata">

### Author: ![ljharb](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/ljharb/32/8_2.png) [@ljharb](https://es.discourse.group/u/ljharb)
#### Post date: [November 9, 2022, 11:11pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/11 "2022-11-09T23:11:28Z")

</div>

Functions can’t, by design, behave differently based on where they’re called, except for the receiver. Making a function that works differently in a chain then not is imo a nonstarter.

---

<div class="post-metadata">

### Author: ![theScottyJam](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/thescottyjam/32/616_2.png) [@theScottyJam](https://es.discourse.group/u/theScottyJam)
#### Post date: [November 10, 2022, 12:46am UTC](https://es.discourse.group/t/class-method-abstraction/1513/13 "2022-11-10T00:46:33Z")

</div>

This is an interesting problem space. I don't know if we'll be able to find any great solutions for it, but I'll at least like to take a step in, what I presume to be, a more acceptable direction.

For a syntax like this to be work-able, I think we'd need some sort of syntactic token to state that a chain is starting.

e.g. something along the lines of

```javascript

class MyThing {
  data = [];
  f() {
    this.data.push('F');
    return this;
  }
  g() {
    this.data.push('G');
    return this;
  }
  [Symbol.chainEnd]() {
    console.log(this.data);
  }
}

const thing = new MyThing();
(chain thing).f().g(); // ['F', 'G']

```

Where `chain` will cause the `Symbol.chainEnd()` function to be called on its argument after the dot-chain ends.

This still feels like a messy solution, but at least it's a plausible solution.

---

<div class="post-metadata">

### Author: ![joaopjt](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/joaopjt/32/1560_2.png) [@joaopjt](https://es.discourse.group/u/joaopjt)
#### Post date: [November 10, 2022, 12:58am UTC](https://es.discourse.group/t/class-method-abstraction/1513/14 "2022-11-10T00:58:10Z")

</div>

Amazing. Thanks for the answer, it will help a lot!

---

<div class="post-metadata">

### Author: ![DiriectorDoc](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/diriectordoc/32/987_2.png) [@DiriectorDoc](https://es.discourse.group/u/DiriectorDoc)
#### Post date: [November 10, 2022, 4:58pm UTC](https://es.discourse.group/t/class-method-abstraction/1513/15 "2022-11-10T16:58:52Z")

</div>

I would like to link Dart's [cascade notation](https://dart.dev/guides/language/language-tour#cascade-notation). Essentially, Dart allows for this:

```nohighlight
example
    ..methodOne()
    ..methodTwo()
    ..methodOne()

```

And the previous method never needs to return `this`.
