CODEWITHSUNDEEP
javascriptarraysobject
Thailandian
Thailandian

Reputation: 585

Using an array of objects as an argument in Javascript

I have various elements that I want to show or hide depending on which activity the user is engaging in. Previously, my setDisplays function had a long list of parameters which needed to be set every time the function was called: e.g.

setDisplays("none","inline","inline","none","none","none","block","none","none","none","none","table","block","block");

Apart from being difficult to read and set, it was also inflexible. So I changed the function to take an array of objects: e.g.

setDisplays([{bingoDisplay:"none"},{bingoScore:"none"},{bingoWords:"none"},{book_overlay:"none"},{choiceDiv:"none"},{errDiv:"none"},{imageDiv:"block"},{livesDispTop:"none"},{phonDisplay:"none"},{score:"none"},{timer:"none"},{phonUSelect:"none"},{numUSelect:"none"},{vocSelect:"table"}]);

The modified function is:

function setDisplays(display) {
    var display_name;
    var display_setting;

    for (var i=0; i<display.length; i++){
        display_name=Object.keys(display[i]);
        display_setting=display[i][display_name];
        document.getElementById(display_name).style.display=display_setting;
    }
}

I've done some initial testing, and it seems to work, but I'm new to objects, so before I commit and move everything over to the new function, could anyone tell me if there are unforeseen problems with this strategy?

I've searched around and could not find an example of an argument like this.

PS: I realise that Object.keys is not supported by older browsers, but I'm using HTML5 audio extensively, so need to create a redirect page for them anyway.

Upvotes: 1

Views: 87

Answers (3)

Timur Osadchiy
Timur Osadchiy

Reputation: 6209

I would suggest using object as an argument instead of an array. Example:

function setDisplays(obj) {
    var display_name;
    var display_setting;

    for (var i in obj){
        if (!obj.hasOwnProperty(i)) { continue; }
        display_name=i;
        display_setting=obj[i];
        document.getElementById(display_name).style.display=display_setting;
    }
}

setDisplays({bingoDisplay:"none", bingoScore:"none", bingoWords:"none"});

Another version of setDisplays function with Object.keys

function setDisplays(obj) {
    var display_name;
    var display_setting;
    var keys = Object.keys(obj);

    for (var i=0, l=keys.length; i<l; i++){
        key = keys[i];
        display_name=key;
        display_setting=obj[key];
        document.getElementById(display_name).style.display=display_setting;
    }
}

Upvotes: 0

sumeet batheja
sumeet batheja

Reputation: 329

Using an object will be more intuitive, as compared to array notation, since you can refer to keys directly instead of keeping track of which parameter is at what index, if performance is a priority for your task, look at What is the performance of Objects/Arrays in JavaScript? (specifically for Google V8) ,but I think performance should not be an issue.

Upvotes: 0

Mackan
Mackan

Reputation: 6271

Using an object would be a much simpler solution.

var setDisplays = {
    bingoDisplay: "none", 
    bingoScore: "none", 
    bingoWords: "none"
};

You can then access each property, read or set, by:

setDisplays.bingoScore = "something";
setDisplays.bingoScore; //returns "something"

Upvotes: 1

Related Questions