Explanation of "in" in JavaScript

Question

Please, consider the code sample below, and focus on variable assignments. Since I have never seen such form in C++, what does the following mean: "upload" in new XMLHttpRequest`.

I would need a good explanation of what does the following statement mean: progress: "upload" in new XMLHttpRequest. Especially, the in is not in C++ present. What is that in supposed to do?

tests = {
  filereader: typeof FileReader != 'undefined',
  dnd: 'draggable' in document.createElement('span'),
  formdata: !!window.FormData,
  progress: "upload" in new XMLHttpRequest
};

thank you.

Answer 1

Chapter 11.8.7 - The in operator says

Return the result of calling the [[HasProperty]] internal method of rval with argument ToString(lval).

which means that

(lval in rval)

is true when rval is an object and it has a property named String(lval).

in is also used in for (... in ...) loops but that is just similar syntax, not a use of this operator.

---

"upload" in new XMLHttpRequest

This is asking "does an XMLHttpRequest instance have a property named 'upload'?" It's effectively checking whether this browser has a particular feature which might not be present on all browsers.

upload in particular is specified in XMLHttpRequest Level 2 as an object that supports certain event handler to let you monitor the progress of an upload:

interface XMLHttpRequestEventTarget : EventTarget {
  // event handlers
  [TreatNonCallableAsNull] attribute Function? onloadstart;
  [TreatNonCallableAsNull] attribute Function? onprogress;
  [TreatNonCallableAsNull] attribute Function? onabort;
  [TreatNonCallableAsNull] attribute Function? onerror;
  [TreatNonCallableAsNull] attribute Function? onload;
  [TreatNonCallableAsNull] attribute Function? ontimeout;
  [TreatNonCallableAsNull] attribute Function? onloadend;
};

Answer 2

The statement 'draggable' in document.createElement('span') returns a boolean. It checks to weather or not the element (in this case a span) has the draggable property, if it does true is returned, if it doesn't the return value will be false. There's nothing more to it.

If you see code like this:

for (varName in obj)
{
    //some stuff
}

All you really are seeing is a loop over the enumerable properties of the object (obj). Assume an object that looks like this:

var obj = {foo:'bar',non:'sense'};

Then varName will be equal to foo, then non etc... in other words: the "x in y statement"s main goal is to check the existence of enumerable (public) properties of an object