for (var o in this) inside an object

Question

I’ve made a little sandbox using the p5.js library : http://gosuness.free.fr/balls/

I’m trying to implement a way to deal with the options on the side, which are toggled using keyboard shortcuts.

This is what I tried to do :

var options = 
{
    Option: function(name, value, shortcut)
    {
        this.name = name;
        this.shortcut = shortcut;
        this.value = value;
        this.show = function ()
        {
             var texte = createElement("span",this.name + " : " + this.shortcut + "<br />");
            texte.parent("options");
            texte.id(this.name);
        }
    },

    toggle: function(shortcut)
    {
        for (var o in this)
        {
            console.log(o);
            if (o.shortcut == shortcut)
            {
                o.value = !o.value;
                changeSideText("#gravity",gravity);
                addText("Toggled gravity");
            }
        }
    }
};

I instantiate each option inside the object options thus :

var gravity = new options.Option("gravity", false,"G");
var paintBackground = new options.Option("paintBackground",false,"P");

When I call the function options.toggle, console.log(o) gives me "Option" "toggle". but what I want is to get for (var o in this) to give me the list of properties of the object options, which are in this case gravity and paintBackground

How do I do that ?

Thanks !

`gravity` and `paintBackground` are plain variables, not properties of the `options` object. Why did you think they were? — Bergi, Dec 22 '16 at 19:09

score 0 · Accepted Answer · answered Dec 22 '16 at 18:54

When You create a instance of Option, its not kept within the variable options, but in the provided variable.

var gravity = new options.Option("gravity", false,"G");

Creates an instance of Option located under gravity variable.

Your iterator for (var o in this) iterates over options properties, with the correct output of the object's methods.

If You want your code to store the new instances of Option within options variable, you can modify code like

var options = 
{
    instances: [],
    Option: function(name, value, shortcut)
    {
        this.name = name;
        this.shortcut = shortcut;
        this.value = value;
        this.show = function ()
        {
            var texte = createElement("span",this.name + " : " + this.shortcut + "<br />");
            texte.parent("options");
            texte.id(this.name);
        }
        options.instances.push(this);
    },

    toggle: function(shortcut)
    {
        for (var i in this.instances)
        {
            console.log(this.instances[i]);
            if (this.instances[i].shortcut == shortcut)
            {
                this.instances[i].value = !this.instances[i].value;
                changeSideText("#gravity",gravity);
                addText("Toggled gravity");
            }
        }
    }
};

this is your example working as You intend it to, but i wouldnt consider this as a reliable design pattern.

Yes, except [you must not use `for…in` enumerations on arrays!](https://stackoverflow.com/q/500504/1048572) — Bergi, Dec 22 '16 at 19:08
I understand what was wrong now… and, yeah, I’m not happy with this design either, I think it’s is flawed from the very beginning since it forces to resort to this kind of trick. — Albizia, Dec 22 '16 at 19:26
would you have a suggestion to help me improve that design ? — Albizia, Dec 22 '16 at 19:28

for (var o in this) inside an object

1 Answers1