foo in bar - 'in' operator javascript?

Question

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.

I wouldn't suggest using `foo in bar` to check for the presence of a value in arrays - you should use `indexOf` ( http://stackoverflow.com/questions/237104/array-containsobj-in-javascript ). In your case, `test_style` is an object literal, in which case `foo in bar` is correct for checking for a key's presence. Using `foo in bar` checks for the presence of an index being filled in an array (where the index is like the same as an object's key) — Ian, Oct 31 '12 at 00:20

nnnnnn · Answer 1 · 2012-10-31T00:25:00.647

3

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.

edited Oct 31 '12 at 00:25

answered Oct 31 '12 at 00:15

nnnnnn

147,572
30
200
241

I think `hasOwnProperty` applies to this too. If you only want to check if an index exists, you could use `if ("1" in array && array.hasOwnProperty("1"))` - in the case that the thing being checked is dynamic and not hardcoded as `"1"`. This way, it ignores any native methods. Right? Just wondering – Ian Oct 31 '12 at 00:27
@ianpgall - If you're using `.hasOwnProperty()` (which I probably should've mentioned in my answer) you don't need the `in` operator as well. – nnnnnn Oct 31 '12 at 00:40
Oh yeah, good point, that was silly to keep. Well, there's a lot that could be discussed on these things, the difference between arrays/objects and how to access them, etc. – Ian Oct 31 '12 at 00:44

score 2 · Accepted Answer · answered Oct 31 '12 at 00:15

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).

Thanks for the examples. makes much more sense now. – Terry Oct 31 '12 at 00:25 — Terry, Oct 31 '12 at 00:25

score 1 · Answer 3 · edited Oct 31 '12 at 00:16

1

 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.

edited Oct 31 '12 at 00:16

bfavaretto

71,580
16
111
150

answered Oct 31 '12 at 00:15

Anoop

23,044
10
62
76

score 1 · Answer 4 · answered Oct 31 '12 at 00:16

1

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.

answered Oct 31 '12 at 00:16

Elliot Bonneville

51,872
23
96
123

_"you are correct in assuming that it can be used to check for a value in an array."_ - it doesn't check for a _value,_ it checks for a property _name_ (or, in an array, whether a specific _index_ has a value). – nnnnnn Oct 31 '12 at 00:21
Using `foo in bar` with an array will not work. You're right that it's like an object, but in an array, it's "keys" will be the indices. So using `foo in bar` will check for an index existing. – Ian Oct 31 '12 at 00:22

foo in bar - 'in' operator javascript?

4 Answers4

Linked

Related