Execute function inside object

Question

I'm using an array of objects to randomly print items in a canvas. Each object should have a different random color, but the way I wrote the code every object gets the same one.

var arrayOfObjects = [
    {x: 1, y: 5, r: 10, color: pickColor}, //gets random color
    {x: 2, y: 6, r: 10, color: pickColor}  // should get a different color
    //and so on...
];

I tried to replace the pickColor variable with a function to be executed inside each object so that they all get a different color, but I can't seem to use this value to pick a color inside my color's array.

This obviously doesn't work :

{x: 1, y: 5, r: 10, color: colorList[parseInt(Math.random() * colorList.length)]},

EDIT : this code works, the problem came from an apparently unrelated line with no hints in debugging tool. Thanks for your answers

Regarding your fiddle, [don't use `for…in` enumerations on arrays](https://stackoverflow.com/q/500504/1048572)! — Bergi, Sep 15 '16 at 00:11
a solution like `color: pickMeAColor()` would be better, but yeah, it should work... — Karoly Horvath, Sep 15 '16 at 00:11
`pickColor` could be a function call. Why not? Use `color: pickColor()` — evolutionxbox, Sep 15 '16 at 00:12

score 0 · Accepted Answer · answered Sep 15 '16 at 00:13

Make pickColor a function and call it multiple times:

var colorList = ["#E57373", "#F06292", "#BA68C8", "#9575CD", "#7986CB", "#64B5F6", "#DCE775", "#AED581", "#81C784", "#FFD54F"];

function pickColor() {
    var randIndex = parseInt(Math.random() * colorList.length);
    return colorList[randIndex];
}

var arrayOfObjects = [
    {x: 1, y: 5, r: 10, color: pickColor()},
    {x: 2, y: 6, r: 10, color: pickColor()},
    //and so on...
];

The effect is just the same as in your second snippet, except you don't have to repeat yourself for every object.

Thanks for your answer, this method is way more cleaner. – Lau Sep 15 '16 at 01:10 — Lau, Sep 15 '16 at 01:10

Execute function inside object

1 Answers1