# Help with javascript \`this\` keyword and \`bind\`
**URL:** https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897
**Category:** Coding Questions
**Created:** [September 21, 2022, 4:49am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897 "2022-09-21T04:49:56Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [September 21, 2022, 4:49am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/1 "2022-09-21T04:49:56Z")
It’s a bit of a follow up of [this](https://discourse.processing.org/t/javascript-classes-but-more-a-design-question/38848) question but no need to read back. As that one is marked solved, I’m starting a new topic.
Not pasting the whole code, but making a pseudo example here to isolate the issue.
I cooked up something like this:
I have 2 classes. `Grid` and `Gpoint`. `Gpoint` is only instantiated by `Grid`’s `make_Gpoint()` method. Grid is instantiated once in the main sketch.
Ok. Now I need `Gpoint` to have an update func, that needs some data (changeable data. Should I say: a state?) from the `Grid` instance. No problem, as `Grid` is making the instances I just added the instance to the constructor, I tried:
(main sketch)
```auto
//in setup
grid = new Grid(/*blah*/)
gp = grid.make_Gpoint(x, y)
//in draw
gp.update(x,y);
```
(in Grid)
```auto
make_Gpoint(){
//blah
const gp = new Gpoint(x, y, this);
points.push(gp);
return gp;
}
```
(in Gpoint)
```javascript
constructor(/*blah*/, grid){
//blah
this.grid = grid
}
//other stuff//
update(x, y){
//some math involving
this.grid.someProp
// I get here "can't access propety xyz of undefined."
}
```
So I read about `this` key word in js. But got confused about how to use `bind()`, `call()` or `apply()` in this case. To solve that. How?
For now I’m passing the instance as a parameter in draw:
```auto
//in draw
gp.update(x,y, grid);
```
And thats ok. It’s working fine. But… as I’m passing the caller (`grid.make()`) i thing it should not be necessary to pass it.
So how could I make the right bind. The literature is mostly based in functions as a class syntax (prior es6), and I’m not quite sure how I should use the binding functions in this scenario.
Or, perhaps, after all I should make `Gpoint` extends `Grid`?
thanks for reading : )
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 21, 2022, 5:12am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/2 "2022-09-21T05:12:07Z")
> [@vkbr](#):
>
> Not pasting the whole code, but making a pseudo example here to isolate the issue.
It’s hard to analyze it w/o seeing the whole context, but I’ll try.
> [@vkbr](#):
>
> ```auto
> make_Gpoint(){
> //blah
> gp = newGpoint(x, y, this);
> }
>
> ```
I believe you’ve meant `new Gpoint` instead of `newGpoint`, right?
Anyways, isn’t your Grid::**make\_Gpoint()** method supposed to `return` a Gpoint instance?
Why do you instead assign it to some global variable inside that method?
That’s bad OOP coding practice!
> [@vkbr](#):
>
> ```auto
> constructor(/*blah*/, grid){
> //blah
> this.grid = grid
> }
> //other stuff//
>
> update(x, y){
> //some math involving
> this.grid.someProp
> // I get here "can't access propety xyz of undefined."
> }
>
> ```
What you describe above shouldn’t happen!
Property Gpoint::_grid_ seems to be properly initialized w/ a Grid object.
So `this.grid.someProp` should work as long as _someProp_ is a member of Grid.
---
### Author:  [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [September 21, 2022, 5:15am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/3 "2022-09-21T05:15:53Z")
The code is a mess, very much WIP, not even really sure where I’m going, so again is a mess… no comments at all, a lot of not used stuff that i might need or not. So it’s temporarily running [here](https://nodulos.kubrusly.com/) you can have a look there.
resize the browser window to see.
---
### Author:  [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [September 21, 2022, 5:22am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/4 "2022-09-21T05:22:45Z")
> [@GoToLoop](#):
>
> I believe you’ve meant `new Gpoint` instead of `newGpoint`, right?
yes sure, sorry.
> [@GoToLoop](#):
>
> Anyways, isn’t your Grid::**make\_Gpoint()** method supposed to `return` a Gpoint instance?
Sorry again it’s not a global var, I’m pushing it inside an array in the Grid class. It’s a temp var:
```auto
make_Gpoint(){
//blah
const gp = new Gpoint(x, y, this);
points.push(gp);
return gp;
}
```
> [@GoToLoop](#):
>
> That’s bad OOP coding practice!
That’s exactly my point, what would be a better approach for this scenario? 🙏
Anyways the code is all posted now at the browser, would you like me to paste it here?
ps I will amend the original post
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 21, 2022, 5:33am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/5 "2022-09-21T05:33:04Z")
> [@vkbr](#):
>
> , would you like me to paste it here?
If you wish, sure!
But if it’s too big, some hosting site where we can see the source code would be more appropriate.
But anwayz, I did a quick look at the source files and found this:
`const gp = new Gpoint(x, y, rx, ry, this);`
On the line above you’re passing 5 arguments to Gpoint constructor.
However Gpoint constructor got 6 parameters:
`constructor(x, y, ratio_x, ratio_y, label, grid) {`
---
### Author:  [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [September 21, 2022, 5:39am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/6 "2022-09-21T05:39:55Z")
Man!! Thanks!!
The f\*\*\*\*\*ng label, that I’m not using, at least not yet.
Thanks a lot
I’ll fix this tomorrow to see if _this_ makes `this` works as expected.
👊 🤛 🤘 🤟 ⭐ ⭐
I’ll clean up and comment the code, then provide a link. As it is… it does not deserve to be shared : )
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 21, 2022, 5:45am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/7 "2022-09-21T05:45:21Z")
> [@vkbr](#):
>
> I’ll fix this tomorrow to see if _this_ makes `this` works as expected.
> [@vkbr](#):
>
> So I read about `this` key word in js. But got confused about how to use `bind()`, `call()` or `apply()` in this case. To solve that. How?
That whole stuff should be put aside for edge cases only.
In general, if we’re using JS classes, we needn’t worry about `this` and **bind()** stuff.
---
### Author:  [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [September 21, 2022, 5:51am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/8 "2022-09-21T05:51:00Z")
That’s a bless. Still very hard for me to think _functional_. I was just starting to grasp Java and the oop stuff… Moving to a bunch of callbacks and self-invoking anonymous functions is not so easy… 🙂
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [September 21, 2022, 6:02am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/9 "2022-09-21T06:02:04Z")
> [@vkbr](#):
>
> Still very hard for me to think _functional_.
JS is a multi-paradigm language. And OOP is fully 1 of them.
> [@vkbr](#):
>
> I was just starting to grasp Java and the oop stuff…
Differences among Java, JS and even Python classes aren’t that large.
We can easily apply most of the OOP knowledge from 1 to the other.
I’ve got lotsa sketches written in both languages if you wish to take a look:
> [@Convert p5.js to Processing](https://discourse.processing.org/t/convert-p5-js-to-processing/944/8):
>
> Haven’t you taken a look at my Reddit link from my 1st reply for this topic btW? see_no_evil Anyways, I’ve got quite some more Java + p5js sketches for you to compare both syntax flavors: icecream
> [@vkbr](#):
>
> Moving to a bunch of callbacks and self-invoking anonymous functions is not so easy…
Java also got those starting at version 8. Again, same stuff. Java & JS are close cousins!
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [September 21, 2022, 8:21am UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/10 "2022-09-21T08:21:52Z")
> [@vkbr](#):
>
> Still very hard for me to think _functional_.
Just for fun if you want to dive into functional programming using JavaScript, this video explains very well lambda calculus:
[ ](https://www.youtube.com/watch?v=3VQ382QG-y4)
---
### Author:  [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [September 21, 2022, 2:22pm UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/11 "2022-09-21T14:22:40Z")
Thanks @josephh will watch. I love a good class (as in school class:)
---
### Author:  [@vkbr](https://discourse.processing.org/u/vkbr)
#### Post date: [September 21, 2022, 2:34pm UTC](https://discourse.processing.org/t/help-with-javascript-this-keyword-and-bind/38897/12 "2022-09-21T14:34:59Z")
Hello, just passing to confirm that after the fix it is working as expected. Great catch @GoToLoop. Valeu!