# Referencing functions within object properties does not work

**URL:** <https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150>\
**Category:** Beginners\
**Created:** [June 25, 2020, 4:36am UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150 "2020-06-25T04:36:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![kdmb](https://avatars.discourse-cdn.com/v4/letter/k/ecc23a/32.png) [@kdmb](https://discourse.processing.org/u/kdmb)\
**Post date:** [June 25, 2020, 4:36am UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/1 "2020-06-25T04:36:41Z")

</div>

When I press a key, I have the following:

```auto
function action1 () {
    // Do some action.
}

keys = {
    ArrowUp: action1;
}

// Function from P5.js
function keyPressed () {
  console.log( `Key ${key} pressed!` );
  if ( keys[key] !== undefined ) {
    // This console.log() shows the referenced function...
    console.log( keys[key] );
    // However the function is not getting called.
    keys[key](); // It does not work.
  }
}

```

Why such thing is happening in the P5.js? It works perfect in vanilla JS to avoid lots of IFs.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 25, 2020, 5:30am UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/2 "2020-06-25T05:30:09Z")

</div>

> [@kdmb](#):
>
> Why such thing is happening in the P5.js?

Pasting the sketch below on [My Sketch - OpenProcessing](http://OpenProcessing.org/sketch/create) **action1()** is invoked normally: 🥳

```auto
'use strict';

const keys = {
  ArrowUp: action1
};

function setup() {
  background(100);
}

function action1() {
  console.info('ArrowUp detected!');
}

function keyPressed() {
  print(`Key ${ key } pressed!`);

  const funct = keys[key];

  if (funct) {
    print(funct);
    funct();
  }
}

```

---

<div class="post-metadata">

**Author:** ![kdmb](https://avatars.discourse-cdn.com/v4/letter/k/ecc23a/32.png) [@kdmb](https://discourse.processing.org/u/kdmb)\
**Post date:** [June 25, 2020, 5:46pm UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/3 "2020-06-25T17:46:58Z")

</div>

It does not work either. 😕  
I gave up to make it work, no worries.

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 26, 2020, 3:56pm UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/4 "2020-06-26T15:56:57Z")

</div>

> [@kdmb](#):
>
> ```auto
> keys = {
> ArrowUp: action1;
> }
> 
> ```

Your syntax error is one issue, but you should have gotten an err msg on that …

@GoToLoop’s example works just fine, also this fix below of your original works just fine …

```auto
const keys = {
  ArrowUp: action1
};

function setup() {
  background(100);
}

function action1() {
  console.log(keys[key]);
}

function keyPressed() {
  if (keys[key] !== undefined) {
    keys[key]();
  }
}

```

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 26, 2020, 4:32pm UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/5 "2020-06-26T16:32:58Z")

</div>

I don’t think action1 is a predefined function…  
you have to call it in the function draw()…  
just like this

```auto
function draw(){
    action1();
}

```

HOPE IT WORKS…

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [June 26, 2020, 5:29pm UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/6 "2020-06-26T17:29:22Z")

</div>

> [@ARNAV\_A\_GUPTA](#):
>
> I don’t think action1 is a predefined function…

@kdmb declared the function …

`draw()` will invoke that function every frame, original post only wants it to be invoked when the `ArrowUp` key is pressed.

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 27, 2020, 2:56pm UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/7 "2020-06-27T14:56:03Z")

</div>

oh, forgot that part 😂

---

<div class="post-metadata">

**Author:** ![kdmb](https://avatars.discourse-cdn.com/v4/letter/k/ecc23a/32.png) [@kdmb](https://discourse.processing.org/u/kdmb)\
**Post date:** [June 28, 2020, 6:06am UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/8 "2020-06-28T06:06:45Z")

</div>

I don’t want to be rude but, before commenting, read carefully the problem more than once!

---

<div class="post-metadata">

**Author:** ![kdmb](https://avatars.discourse-cdn.com/v4/letter/k/ecc23a/32.png) [@kdmb](https://discourse.processing.org/u/kdmb)\
**Post date:** [June 28, 2020, 6:16am UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/9 "2020-06-28T06:16:24Z")

</div>

Well, I got the time to dig in into the problem. The ‘action1’ is in an object, which is lost when I call the function, and the function also calls properties of that object with ‘this.’, that would pointing to that object, but ends transforming the ‘this.’ to the ‘keys’ object, which is not the intention.  
If you want to see the code, this is the link project:  
[https://editor.p5js.org/kdmb/sketches/vU2TNSuRy](https://editor.p5js.org/kdmb/sketches/vU2TNSuRy)  
The keys object is in ‘scripts/game/character.js’ that have the ‘action1’ which is the jump(), and the keyPressed function is in ‘scripts/scenes/game.js’

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 28, 2020, 6:57am UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/10 "2020-06-28T06:57:00Z")

</div>

really very sorry about that…

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 28, 2020, 11:14am UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/11 "2020-06-28T11:14:52Z")

</div>

> [@kdmb](#):
>
> The ‘action1’ is in an object,

The _action1_ on your 1st post is clearly a function:

> [@kdmb](#):
>
> ```auto
> function action1 () {
> // Do some action.
> }
> 
> ```

How are we supposed to help you if you mislead us and keep replying w/:

> [@kdmb](#):
>
> It does not work either. 😕  
> I gave up to make it work, no worries.

* * *

> [@kdmb](#):
>
> , and the function also calls properties of that object with ‘this.’,

A function which is a property of an object and has to deal w/ the JS keyword `this` is called an instance method:

> **[Method - MDN Web Docs Glossary: Definitions of Web-related terms | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Method)**
>
> A method is a function which is a property of an object. There are two kinds of methods: instance methods which are built-in tasks performed by an object instance, or static methods which are tasks that are called directly on an object constructor.

* * *

> [@kdmb](#):
>
> If you want to see the code, this is the link project:

If I had access to it from the very beginning I coulda given a better advice to you upfront.

Inside the **constructor()** of your class Character from your file “character.js” you’ve got this block of code commented out:

```auto
this.keys = {
  ArrowUp: this.jump,
}

```

You can use the Function::**bind()** method in order to clone any function w/ its `this` permanently bound to a specific object:

> **[Function.prototype.bind() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)**
>
> The bind() method of Function instances creates a new function that, when called, calls this function with its this keyword set to the provided value, and a given sequence of arguments preceding any provided when the new function is called.

You can apply it like this:

```auto
this.keys = {
  ArrowUp: this.jump.bind(this)
}

```

Or like this as well:

```auto
this.keys = {
  ArrowUp: Character.prototype.jump.bind(this)
}

```

From that on, whatever means you use to invoke that cloned method Character::**jump()** is gonna work, b/c its `this` can’t be changed anymore!

---

<div class="post-metadata">

**Author:** ![kdmb](https://avatars.discourse-cdn.com/v4/letter/k/ecc23a/32.png) [@kdmb](https://discourse.processing.org/u/kdmb)\
**Post date:** [July 2, 2020, 1:13pm UTC](https://discourse.processing.org/t/referencing-functions-within-object-properties-does-not-work/22150/12 "2020-07-02T13:13:56Z")

</div>

Sorry about the confusion. I started with the code on the post and I kept changing it to all possibilities but nothing worked for me, maybe I was placing it in the wrong places.

```auto
this.keys = {
      ArrowUp: this.jump.bind(this)
}

```

It worked, finally. Thank you for your help.