How to Iterate through an Array of Class Objects and use functions in JavaScripts

Question

i want to iterate throug an Array of Objects and use a function from the Objects in the array. I'm coming from JAVA and there it's pretty normal to do that. For that reason i guess it works in JS as well but i'm not sure how.

My Code looks like this:

class Whateever {

constructor(ctx){
   this.ctx
   this.shotsFired = [];
}

onButtonPush(){
        let shot = new Shot(this.position.x, this.position.y);
        this.shotsFired.push(shot);
}

//called every frame
update(){
       for (let shot in this.shotsFired) {
                shot.update();  <-- I want to call this function
                shot.draw(this.ctx); <-- and that function
            }
}

--

class shoot{
    constructor(x,y){
       this.position = {
            x : x,
            y : y
        };
  }

update(){
// Do nothing 
}

draw(ctx){
// do nothing
}

}

But with this construct i get always the error message:

Whateever.js:40 Uncaught TypeError: shot.draw is not a function
    at Whateever.update (ship.js:40) 
    at gameLoop (index.js:23)

The shot.update() function works by itself.

I just want to know how to call object functions through an loop in an array?

This is an simplyfied snippit from a big class. If i would post the whole class it would be confusion. Question is absolute clear!

Array of Objects -> Iteration -> during Iteration call of functions from the Objects.

If u need an example i can post JAVA Code the make clear what i mean.

You need to make sure `onButtonPush` method is executed first. To populate the Array with `new Shot` instances — Akinjide, Jul 03 '19 at 21:44
Your Shot class really has a function draw()? No matter what - a working example of your code that clearly shows the problem would be more helpful. — obscure, Jul 03 '19 at 21:45
@akinjide - If onButtonPush() wasn't called, shotsFired is just an empty array so it wouldn't ever try to call draw() or update() on an instance of Shot. — obscure, Jul 03 '19 at 21:54
I guess the error message says it all, `shot.update` executes because it is a registered method and `shot.draw` doesn't because it is either not defined or not a registered method. — Akinjide, Jul 03 '19 at 21:57
@RedDeadRabbit `If u need an example i can post JAVA Code ` No, we need to see your JavaScript definition for the Shot class. Looks like it's missing the draw function. — obscure, Jul 03 '19 at 21:58

falinsky · Accepted Answer · 2019-07-03T21:53:36.127

4

In order to iterate through the array of something you can use for...of:

let array = [{a:1}, {b:2}, {c:3}];

for (let item of array) {
  console.log(item);
}

So for your particular example, it would be:

update() {
  for (let shot of this.shotsFired) {
    shot.update();
    shot.draw(this.ctx);
  }
}

or even more simple:

update() {
  this.shotsFired.forEach(shot => {
    shot.update();
    shot.draw(this.ctx);
  });
}

edited Jul 03 '19 at 21:53

answered Jul 03 '19 at 21:46

falinsky

7,229
3
32
56

1

@RedDeadRabbit `The Problem is not to go throug the array.` It kinda is though, because `for (a in b)` puts the *keys* in `a`, not the values. Use `of` instead, and it will work right away. – Jul 03 '19 at 22:00
1

THANKS! What a big different between "in" and "of" – Ingo K. Jul 03 '19 at 22:02

score 0 · Answer 2 · answered Jul 03 '19 at 22:01

When using

for (let shot in this.shotsFired) { 
   shot.update(); <-- I want to call this function 
   shot.draw(this.ctx); <-- and that function 
}

The for loop is actually iterating keys so you should do the following

for (let shot in this.shotsFired) { 
   this.shotsFired[shot].update(); <-- I want to call this function 
   this.shotsFired[shot].draw(this.ctx); <-- and that function 
}

However ultimately you should not iterate over arrays using this technique

Alternatively you can use many other iteration options available to you like forEach or for of

How to Iterate through an Array of Class Objects and use functions in JavaScripts

2 Answers2