How to pass an object's method as a parameter to another function in Javascript

Question

First take a look at my simple codes below:

function mySecondFunction(objArray,setFunc)
{
    for (let i = 0; i < objArray.length; i++)
    {
        objArray[i].info.setTop(72);
    }
}

function myFunction()
{
    let myObjArray = [];
    for (let i = 0; i < 10; i++)
    {
    myObjArray.push({
        info:{topVar:0,
          bottomVar:0,
          get top() {return this.topVar;},
          get bottom() {return this.bottomVar;},
          setTop: function(input) {this.topVar = input;},
          setBottom: function(input) {this.bottomVar = input; }
         }
    });
    }
    mySecondFunction(myObjArray); // This works Fine
    mySecondFunction(myObjArray,setTop); // I want something like this!!!
}

As you can see, I want to pass a method of an object to another function. I know a lot of possible solutions to avoid this, but I want to know whether it is possible or not.

I can think of several ways to do this. How do you want to be able to call the method? objArray[i].info[setFunc](72)? setFunc.call(objArray[i].info, 72)? setFunc(objArray[i].info, 72)? — melpomene
– melpomene, Commented Mar 11, 2018 at 23:10
@melpomene I got an answer for one of them. Can you give other possible solutions? — Reza
– Reza, Commented Mar 12, 2018 at 0:08

Kevin Qian · Accepted Answer · 2018-03-11 23:27:24Z

4

Detach it and pass as an argument. Remember to use call to set the intended this value.

function mySecondFunction(objArray, setFunc)
{
    for (let i = 0; i < objArray.length; i++)
    {
        setFunc.call(objArray[i].info, 72); 
        /* explicitly telling that: 
        please set 'this' value in this function to be 'objArray[i].info' when running, 
        allowing, e.g. `this.topVar` in 
        `setTop: function(input) {this.topVar = input;}` 
        to be operating on `objArray[i].info.topVar` */
    }
}

function myFunction()
{
    let myObjArray = [];
    for (let i = 0; i < 10; i++)
    {
    myObjArray.push({
        info:{topVar:0,
          bottomVar:0,
          get top() {return this.topVar;},
          get bottom() {return this.bottomVar;},
          setTop: function(input) {this.topVar = input;},
          setBottom: function(input) {this.bottomVar = input; }
         }
    });
    }
    mySecondFunction(myObjArray, myObjArray[0].info.setTop); 
    /* once detaching the method from the object, 
    (if we are not using arrow functions), 
    we lose 'this' value, meaning we are losing 
    the target of object that we want to operate on */
    
    console.log(myObjArray)
}

myFunction();

edited Mar 11, 2018 at 23:27

answered Mar 11, 2018 at 23:18

Kevin Qian

2,7201 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Reza Over a year ago

That's a great solution. but can we somehow avoid passing 0 index?

Kevin Qian Over a year ago

@Reza you can declare a function independent of objects, for example just var setTop = function(input) {this.topVar = input;}, and use setTop.call(thisValue) to bind thisValue to this and make references to this.topVar work correctly.

wmash · Accepted Answer · 2018-03-11 23:15:16Z

0

You can target item number in the array list. You can do statically (i.e. 1-???) or dynamically with an iteration and a variable. You can then the object property within that. For example:

myObjArray[0].info.setTop

That will target the 1st item in the array. Be sure to omit parentheses (()) when passing the method as you want to pass the function reference not the result

edited Mar 11, 2018 at 23:15

answered Mar 11, 2018 at 23:12

wmash

4,1924 gold badges38 silver badges74 bronze badges

3 Comments

RobG Over a year ago

You mean "…pass the function reference" but you also need to deal with how to get this in the method to reference the correct object.

wmash Over a year ago

@RobG thank you for the correction. Ah yes I did not see the use of this. it is dependent on what OP wanted the scope of this to be

Reza Over a year ago

@wmash although your answer is correct but I don't want to pass the index statically. Anyway, thank you.

Collectives™ on Stack Overflow

How to pass an object's method as a parameter to another function in Javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related