# TypeError: Cannot set property '0' of undefined

**URL:** <https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139>\
**Category:** Coding Questions\
**Created:** [April 5, 2021, 4:33pm UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139 "2021-04-05T16:33:11Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [April 5, 2021, 4:33pm UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139/1 "2021-04-05T16:33:11Z")

</div>

In my constructor I define my variable like this:

```auto
constructor(){
   this.myvar = [];
}

```

and then, inside a function, I init the array like this:

```auto
initSutff(){

     for (let i = 0; i < labels.length; i++) {
      this.myvar [i] = 1;
    }

```

and if I log the array I can see the values in the console. But if I try to access them inside a checkbox. changed function like this:

```auto
this.checkbox[y].changed(function () {
        console.log(this.labelDrawState);
        console.log(`checkbox ${x} is checked: ${this.checked()}`);

        if (this.checked() == true) {
          this.myvar [x] = 1;
        } else {
          this.myvar [x] = 0;
        }
 });

```

I get:

TypeError: Cannot set property ‘0’ of undefined

why can’t js see the variable?

Thanks!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 5, 2021, 5:15pm UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139/2 "2021-04-05T17:15:57Z")

</div>

Hi @xbix ,

The issue you are facing is caused by the concept of [scope](https://en.wikipedia.org/wiki/Scope_(computer_science)) and context in JavaScript.

By default when outside of any functions, we are in the global context which means that `this` refers to the `Window` object (in a browser, here in a new tab) :

```auto
console.log(this); // -> Window about:blank

```

This is the same when you call it inside a function :

```auto
function hello() {
  console.log(this); // -> Window about:blank
}

```

But you can use `call()` or `apply()` to pass a context to a function as an object :

```auto
function hello() {
  console.log("Hello " + this.name);
}

hello.call({name: "Alice"}); // -> Hello Alice

```

Now in your case, you are creating an anonymous function (a function without a name) that is passed to the `changed()` method of the checkbox. But when calling `this.myvar[x] = 1`, `this` refers to the `p5.Element` itself, not the current instance of your class.

What you can do is use the [`Function.prototype.bind()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) method to bind the current object to the function you pass. It works like this :

```auto
let test;

class Test {
  
  constructor() {
    this.myvar = [];
    
    this.checkbox = createCheckbox('checkbox');
    
    this.checkbox.changed(function() {
      // This is now the current object
      console.log(this); // -> Test {myvar: Array[0], checkbox: , constructor: Object}
      console.log(this.checkbox.checked()); // -> get checkbox status
      this.myvar[0] = 5;
      
      console.log(this.myvar); // -> [5]
    }.bind(this));
  }
}

function setup() {
  test = new Test();
}

```

The method bind returns a new function with `this` set to the first argument, in our case the instance of the object. From that we can get the checkbox object.

Hope it helps 🙂

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [April 5, 2021, 5:40pm UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139/3 "2021-04-05T17:40:57Z")

</div>

Thank you Jospehh for the detailed and good explanation! Your solution seems to work, but now I get another error with the checkbox.checked() function:

this.checkbox.checked() is not a function

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [April 5, 2021, 5:57pm UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139/4 "2021-04-05T17:57:23Z")

</div>

instead of `bind`, it’s a bit hacky but you can do something like this too, so that `self` becomes the “parent” object and still you have access to checkbox’s `this`:

```javascript
let test;

class Test {
  
  constructor() {
    this.myvar = [];
    
    this.checkbox = createCheckbox('checkbox');

    const self = this;
    this.checkbox.changed(function() {
      console.log(this.checked()); // -> get checkbox status
      self.myvar[0] = 5;
    });
  }
}

function setup() {
  test = new Test();
}

```

(the code is not tested)

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [April 6, 2021, 7:03am UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139/5 "2021-04-06T07:03:56Z")

</div>

> [@xbix](#):
>
> this.checkbox.checked() is not a function

Yes this is because the code I posted is an example and in your code you used `this.checkbox[y]` so the checkboxes are stored in an array 😉

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [April 6, 2021, 7:29am UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139/6 "2021-04-06T07:29:45Z")

</div>

Thanks, Micuat for your contribution, I tested it and it works!

---

<div class="post-metadata">

**Author:** ![xbix](https://avatars.discourse-cdn.com/v4/letter/x/ec9cab/32.png) [@xbix](https://discourse.processing.org/u/xbix)\
**Post date:** [April 6, 2021, 7:30am UTC](https://discourse.processing.org/t/typeerror-cannot-set-property-0-of-undefined/29139/7 "2021-04-06T07:30:13Z")

</div>

That makes sense, I’ll test it right away. Thank you very much!