Doing a javascript (ES6) callback on an object method

Question

I have some trouble in making a callback on an object method. Here is a very simplified example. I create a class Point2D with three methods (constructor, translate, dump). I create an array with two such elements inside. Now I want to create an "iterate" function which takes as parameters the address of a callback method and two parameters. I don't know if this is possible and, if yes, what is the syntax to write my "iterate" function. If somebody can help...

<!DOCTYPE html>
<html lang="fr" >
<head><meta charset="utf-8"></head>
<body>
<script>
class Point2D {
    constructor (x, y) {this.x = x ; this.y = y ; }
    translate (dx, dy) {this.x += dx ; this.y += dy ; }
    dump () {alert ("point : " + this.x + ", " + this.y) ; }
}
    
function iterate (callBack, p1, p2) {
    // Do something (callBack) on all elements, with parameters
    for (var i = 0 ; i <= 1 ; i++) points[i].callBack (p1, p2) ;
}

var points = new Array () ;
points.push (new Point2D (10, 10)) ;
points.push (new Point2D (20, 20)) ;
// Here is what I would like to do
iterate (dump) ;  // dump points before translate
iterate (translate, 5, 5) ; 
iterate (dump) ;  // dumps points after translate
</script>
</body>
</html>

It's just an Array, so you can use map and forEach etc. — bel3atar
– bel3atar, Commented May 31, 2021 at 14:14
It might not be worth introducing this indirection because you can iterate and call those methods easily inline: points.forEach(p => p.dump()), points.forEach(point => p.translate(5, 5)), etc I'd argue that this is also easier to understand. — Felix Kling
– Felix Kling, Commented Jun 1, 2021 at 10:51
It's just an array in my example. In the real program, it's list of list structures (to be explored recursively). I know it can be confusing to simplify too much the code shown, but my real program wheights now 3100 lines ! — JiPe38
– JiPe38, Commented Jun 1, 2021 at 20:44

mdeamp · Accepted Answer · 2021-05-31 14:16:27Z

1

In your iterate function, your passing dump, for example, but that isn't defined anywhere. Therefore, you're passing an undefined value.

To achieve what you want, you can pass a string containing the name of the function, and call that via bracket notation.

function iterate (callBack, p1, p2) {
    for (var i = 0 ; i <= 1 ; i++) {
        points[i][callBack](p1, p2);
    }
}

iterate('dump');

Note that the callBack parameter is now a string that we call via bracket notation. This will cause the engine to look for a dump method inside points[i].

answered May 31, 2021 at 14:16

mdeamp

1183 bronze badges

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

3 Comments

JiPe38 Over a year ago

OK nice, it works. I didn't know this bracket notation. Surprised that no "." dot is necessary before the name of the callback to indicate that it is a method on an object instance.

Bergi Over a year ago

You'll want to add that this is no longer a callback. Just call it methodName or something.

JiPe38 Over a year ago

I hope that this will not slow down significantly the program, as there are about 20 different methods to call in this way and the search of the link string -> method can take some time.

Collectives™ on Stack Overflow

Doing a javascript (ES6) callback on an object method

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related