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\', \'Kht         


        

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

Answer 2

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.

Answer 3

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

Answer 4

 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.