CODEWITHSUNDEEP
javascriptarrays
Terry
Terry

Reputation: 675

foo in bar - 'in' operator javascript?

I recently read a tutorial on CSS browser feature detection... The end product was something like this...

var prefix = ['Moz', 'webkit', 'O', 'ms', 'Khtml'],
    test_style = document.createElement('div').style;

var css_check = function(prop) {
    if (prop in test_style) {
        return true;
    }
    for (var i = 0; i < prefix.length; i++) {
        if (prefix[i] + prop in test_style) {
            return true;
        }
    }
    return false;
};

css_check('whatev_css_property');

The part I dont understand is this...

if (prop in test_style) or if (foo in bar).

From what I've read if (foo in bar) is used to check if a value is in an array but I might be wrong here, I haven't found much documentation on this. Also, if this is used to check values in an array HOW is test_style = document.createElement('div').style an array? Doesn't make sense...

I am terrible confused. Any clarification would be greatly appreciated.

Upvotes: 2

Views: 1279

Answers (4)

nnnnnn
nnnnnn

Reputation: 150030

The statement if (foo in bar) tests whether the object bar has a property named foo. It doesn't test for a property with the value foo.

That is:

var bar = {"a" : "x", "b" : "y"};
alert("a" in bar); // true
alert("x" in bar); // false

You can use this syntax on arrays because they are a type of object. If bar is an array then foo in bar will be true if foo is either a numeric index of the array that has a value or if foo is some other property or method name.

Also, if this is used to check values in an array HOW is test_style = document.createElement('div').style an array?

test_style is an object, not an array.

Upvotes: 3

Anoop
Anoop

Reputation: 23208

 document.createElement('div').style

will return a object which have CSS properties. you can use key in to check if particular property exist in a object.

Upvotes: 1

Elliot Bonneville
Elliot Bonneville

Reputation: 53301

if (foo in bar) is used to check whether the value named foo is a property of the object bar. Since arrays are just specially treated objects, you are correct in assuming that it can be used to check for a value in an array.

test_style = document.createElement('div').style returns an object with properties; since this is the case, you can use the foo in bar syntax to check it.

Upvotes: 1

dfreeman
dfreeman

Reputation: 2834

The in operator is used to check for the presence of a key in an array or object, e.g.

3 in [1, 2, 3] // false, since the array indices only go up to 2
2 in [1, 2, 3] // true
'x' in { x: 5 } // true
'toString' in Object.prototype // true

The style property there is an instance of CSSStyleDeclaration, which contains properties for each supported style attribute in the active browser.

The code snippet you gave in your post checks whether the viewing browser supports some version of that style (either the official one or with one of a number of common vendor prefixes).

Upvotes: 2

Related Questions