Creating and naming 'n' JQuery objects in a for-loop (OOP)

Question

I'm trying to make a very very simple billiard game to practice JQuery OOP. I'm starting; and I have this code:

//Main ball "class"
function createBall(number, color){
  this.number = number;
  this.color = color;
}
$color = ["noColor", "yellow","blue","red","purple","orange","green"...];
$ball1 = new createBall(1, $color[1]);
$ball2 = new...

But, I don't want to create an object ball by ball, so I tried to use a for; something that works like this:

for(var $i = 1; $i <= 15; $i++){
  ball+$i = new createBall($i, $color[i]);
}

Obviously, I can't name the new object using "ball+$i". I'm trying to achieve this 'cause I want to use later "ball1.color = 'red'..." and change the object property and so. The way that worked by now is this code:

$ballArray[] = new Array;
for(var $i = 1; $i <= 15; $i++){
  $ballArray[$i] = new createBall($i, $color[i]);
}

If I call $ballArray[1].color, it returns "yellow", as should be; but I'm not sure if "$ballArray[1]" is actually the object name, or if this calls the createBall() function each time I 'call' this object properties and generate a new one. This probably could create tons of objects, and that's a NOPE. Am I doing it right? Or is there another way to correctly do this?

In the end, I just want to create and name all the balls objects without doing it one by one, in case I need to create 100 objects later.

Hope I have explained correctly. All suggestions are welcome :)

new is called once per array object in your code. new returns an instance of createBall, which is stored in the array. When you want to store a number of items of the same kind, an array is usually the right call. By the way, to follow OOP, your class should probably be called Ball, not createBall. The creation is happening in new and the object is a Ball. — Jeff B
– Jeff B, Commented Mar 21, 2017 at 22:14
Well, you're on the right track, but your for loop starts at 1 and arrays start indexing at 0. I would say for (var $i = 0; $i < 15; $i++) and then say $ballArray[$i] = new createBall($i + 1, $color[$i]);. As for your question about it being the object name, i'm not sure what you're asking, but I can say that any time you use the new keyword, it will return you an object. So in this case, each element of $ballArray will actually be a ball object with the properties specified upon creation. — mhodges
– mhodges, Commented Mar 21, 2017 at 22:18
Also, +1 to @JeffB for mentioning the class name should be Ball and not createBall. createBall can be a function that returns new Ball(number, color), but the class itself should be called Ball. I ran out of characters to mention that xD — mhodges
– mhodges, Commented Mar 21, 2017 at 22:20
You also have the [] as a part of your variable name for $ballArray, in Javascript you would simply say $ballArray = new Array, or alternatively $ballArray = []; Side note - none of this is jQuery code, this is all plain JavaScript — mhodges
– mhodges, Commented Mar 21, 2017 at 22:22
Thanks a lot! I made an quickly array, thats why it started with 1 and so. About JQuery thing, wrote that cause I'm using $(...).stuff later on the code, but you are right. I'll keep trying to make this program, and clearing my code. Perhaps I don't need a name for each object (like @Rory-McCrossan said on the answer) as I was thought; just the array. — Riuaux
– Riuaux, Commented Mar 21, 2017 at 22:26

Rory McCrossan · Accepted Answer · 2017-03-21 22:20:30Z

4

I'm not sure if $ballArray[1] is actually the object name, or if this calls the createBall() function each time I 'call' this object properties and generatea new one.

The $ballArray variable holds an array containing the values that the createBall() constructor returns. Therefore your code is fine as you only create one instance of the object per iteration of the loop.

However there are several amendments I'd suggest to improve the quality of your code.

$ is used as a prefix on variables that hold jQuery objects, so is not applicable in your example as you don't use any jQuery logic at all
call the class Ball as it describes what the object is. createBall would be more like a method name as it's a verb which describes what the logic does.
array names don't need to be followed by []
use push() to add a new item to an array in the last position.
array indexes start at 0, so presumably your for loop should too

function Ball(number, color) {
  this.number = number;
  this.color = color;
}

var ballArray = [];
var colors = ["noColor", "yellow", "blue", "red", "purple", "orange", "green"];

for (var i = 0; i <= 15; i++) {
  ballArray.push(new Ball(i, colors[i % colors.length]));
}

console.log(ballArray);

edited Mar 21, 2017 at 22:20

answered Mar 21, 2017 at 22:14

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

1 Comment

Riuaux Over a year ago

Thanks for all the advices! Didn't knew that isn't neccesary to have a name for each object- just a place to store it. I'll work with this. Finally, Should I change the question title to be on rule?

Collectives™ on Stack Overflow

Creating and naming 'n' JQuery objects in a for-loop (OOP)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related