JQUERY + Return an Array from a Function

Question

I'm struggling to return an array from a function call - code below:

///////////// Generic Functions
function spotJoinPosition() {
    var pos = {  
                offset: $('div#spotJoinSite').offset(),                                
                width: $('div#spotJoinSite').width(),
                height: $('div#spotJoinSite').height()
    }
    return(pos);
}


        var positionData = spotJoinPosition();
        alert(positionData);
        alert(positionData[width]);

When I alert positionData I get [object][object] and then undefined.

Advice?

Answer 1

alert(positionData[width]);

This is alerting a key in positionData, and using the variable width as the key. You haven't defined a variable called width, so it's essentially looking up positionData[undefined]. What you want is positionData.width, or positionData['width'], but there is no reason for quotes here.

Quotes would only be required if you had a key with non alphanumeric characters. positionData['some-key'] works, but positionData.some-key is a syntax error, because variables cannot have - in them.

Also, your code SHOULD be erroring, because width isn't defined anywhere. I'm worried that you have a globally defined width variable somewhere in your code.

Answer 2

That's because positionData is an object (the object you return from spotJoinPosition) and the variable width is undefined the variable width contains a value that is not present on the object.

You want positionData.width or positionData['width'].

See the MDN docs on member operators.