JavaScript for/in loop with unexpected output

Question

I'm not sure why this outputs undefined for the property names of the document object. I think it has something to do with the variable expression myArray[i++]. I could make this a simple primitive variable and I'll get all the property names, but I would like all the property names saved into an array. Thank you for your help in advance!!

var myArray = [];
var i = 0;
for (myArray[i++] in document) {
document.write(myArray[i] + "</br>");
}

Wow, I would have expected for this to throw a syntax error. I really don't encourage to use code like this, but the problem is that at the moment you are accessing myArray[i], the index does not exist yet (i was incremented in myArray[i++]). document.write(myArray[i-1] + "</br>"); works though. — Felix Kling
– Felix Kling, Commented Apr 26, 2013 at 0:06
This is the syntax for a for/in loop, not a for loop. This should enumerate the properties of the object. If it is invalid, where am I going wrong? — Dusty
– Dusty, Commented Apr 26, 2013 at 0:10
@Dusty, it's just unusual; you usually see an unqualified identifier on the left side of in (just a variable, no brackets or dots). — Dagg Nabbit
– Dagg Nabbit, Commented Apr 26, 2013 at 0:17

Paul · Accepted Answer · 2013-04-26 00:32:35Z

4

That is happening because you are always look one element further in the array than you've defined, since you post-increment i. You could pre-increment instead:

var myArray = [];
var i = -1;
for (myArray[++i] in document) {
    document.write(myArray[i] + "</br>");
}

JSFiddle

edited Apr 26, 2013 at 0:32

answered Apr 26, 2013 at 0:09

Paul

142k28 gold badges285 silver badges272 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Paul Over a year ago

Nice haha, I was adding the hyphens in post and pre-increment during those 4 seconds lol. I upvoted your answer.

Paul Over a year ago

You're welcome @Dusty! I posted a JSFiddle for your convenience, however, it would be awesome to get into the habit of using console.log. It will make writing Javascript a lot easier.

Paul Over a year ago

@Dusty The way you had it originally, on the first iteration you are assigning the first property to myArray[0] and then calling document.write(myArray[1]) since i has been incremeneted. If you post-increment in the document.write like Dagg Nabbit did in his answer, you'll also get the correct result.

Paul Over a year ago

@Dusty Post increment means that it increments after it's value is returned. i++ increments i and then evaluates to the original value of i.

Paul Over a year ago

After the expression x is always incremented, so in any expressions which come afterwards, it doesn't make a difference whether you used preincrement or postincrement, i has been incremented already either way.

|

Dagg Nabbit · Accepted Answer · 2013-04-26 00:08:59Z

4

It doesn't work because you increment i after setting myArray[i] by doing myArray[i++] (post increment).

This would work, although I'm not sure why you'd need to do it.

var myArray = [];
var i = 0;
for (myArray[i] in document) {
    console.log(myArray[i++] + "</br>");
}

answered Apr 26, 2013 at 0:08

Dagg Nabbit

77k19 gold badges115 silver badges142 bronze badges

7 Comments

yowza Over a year ago

This won't give all property names.

Dagg Nabbit Over a year ago

@yowza I have no idea what you're talking about.

Dusty Over a year ago

Thanks for the great post! Am I able to see that this code works in jsfiddle... sorry, not to familiar with console.log.

Dagg Nabbit Over a year ago

@Dusty most browsers have a console that you can open, usually with the F12 key. console.log just dumps stuff to the console.

nnnnnn Over a year ago

F12 in Chrome or IE (I think), or Ctrl-shift-K in FF will open the console for jsfiddle the same as for any other site.

|

Aossey · Accepted Answer · 2013-04-26 00:08:28Z

1

I think that you may want to use a loop like the one below:

for(int i = 0; i < myArray.length; i++){
  document.write(myArray[i] + "</br>");
}

answered Apr 26, 2013 at 0:08

Aossey

9654 silver badges13 bronze badges

2 Comments

nnnnnn Over a year ago

OP isn't trying to get values from myArray. The goal is to get the names of all the properties of document and store them in the initially empty myArray.

Aossey Over a year ago

Yup, i gathered that after reading some of the other responses.

yowza · Accepted Answer · 2013-04-26 00:11:45Z

1

"I would like all the property names saved into an array. "

You could do:

var names = Object.getOwnPropertyNames(document);

The reason for Object.getOwnPropertyNames() is that it includes non-enumerable properties, whereas for-in will skip them.

But some properties are inherited, so you'd need to do the same on all objects in the prototype chain if that's what you want.

var obj = document;
var names = [];

do {
    names.push.apply(names, Object.getOwnPropertyNames(obj));
} while(obj = Object.getPrototypeOf(obj));

Result in Firefox:

["jQuery17104169501299363202", "location", "addEventListener", "removeEventListener", "dispatchEvent", "getElementsByName", "getItems", "open", "close", "write", "writeln", "execCommand", "queryCommandEnabled", "queryCommandIndeterm", "queryCommandState", "queryCommandSupported", "queryCommandValue", "clear", "getSelection", "captureEvents", "releaseEvents", "routeEvent", "domain", "cookie", "body", "head", "images", "embeds", "plugins", "links", "forms", "scripts", "designMode", "fgColor", "linkColor", "vlinkColor", "alinkColor", "bgColor", "anchors", "applets", "onreadystatechange", "onmouseenter", "onmouseleave", "getElementsByTagName", "getElementsByTagNameNS", "getElementsByClassName", "getElementById", "createElement", "createElementNS", "createDocumentFragment", "createTextNode", "createComment", "createProcessingInstruction", "importNode", "adoptNode", "createEvent", "createRange", "createNodeIterator", "createTreeWalker", "createCDATASection", "createAttribute", "createAttributeNS", "hasFocus", "releaseCapture", "mozSetImageElement", "mozCancelFullScreen", "mozExitPointerLock", "enableStyleSheetsForSet", "elementFromPoint", "querySelector", "querySelectorAll", "getAnonymousNodes", "getAnonymousElementByAttribute", "addBinding", "removeBinding", "getBindingParent", "loadBindingDocument", "createExpression", "createNSResolver", "evaluate", "implementation", "URL", "documentURI", "compatMode", "characterSet", "contentType", "doctype", "documentElement", "inputEncoding", "referrer", "lastModified", "readyState", "title", "dir", "defaultView", "activeElement", "currentScript", "mozFullScreenEnabled", "mozFullScreenElement", "mozFullScreen", "mozPointerLockElement", "hidden", "mozHidden", "visibilityState", "mozVisibilityState", "styleSheets", "selectedStyleSheetSet", "lastStyleSheetSet", "preferredStyleSheetSet", "styleSheetSets", "hasChildNodes", "insertBefore", "appendChild", "replaceChild", "removeChild", "normalize", "cloneNode", "isEqualNode", "compareDocumentPosition", "contains", "lookupPrefix", "lookupNamespaceURI", "isDefaultNamespace", "isSupported", "hasAttributes", "setUserData", "getUserData", "nodeType", "nodeName", "baseURI", "ownerDocument", "parentNode", "parentElement", "childNodes", "firstChild", "lastChild", "previousSibling", "nextSibling", "nodeValue", "textContent", "attributes", "namespaceURI", "prefix", "localName", "lookupGetter", "lookupSetter", "defineGetter", "defineSetter", "QueryInterface", "mozSyntheticDocument", "caretPositionFromPoint", "ELEMENT_NODE", "ATTRIBUTE_NODE", "TEXT_NODE", "CDATA_SECTION_NODE", "ENTITY_REFERENCE_NODE", "ENTITY_NODE", "PROCESSING_INSTRUCTION_NODE", "COMMENT_NODE", "DOCUMENT_NODE", "DOCUMENT_TYPE_NODE", "DOCUMENT_FRAGMENT_NODE", "NOTATION_NODE", "DOCUMENT_POSITION_DISCONNECTED", "DOCUMENT_POSITION_PRECEDING", "DOCUMENT_POSITION_FOLLOWING", "DOCUMENT_POSITION_CONTAINS", "DOCUMENT_POSITION_CONTAINED_BY", "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC", "location", "onabort", "onblur", "oncanplay", "oncanplaythrough", "onchange", "onclick", "oncontextmenu", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmozfullscreenchange", "onmozfullscreenerror", "onmozpointerlockchange", "onmozpointerlockerror", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onscroll", "onseeked", "onseeking", "onselect", "onshow", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "onvolumechange", "onwaiting", "onwheel", "oncopy", "oncut", "onpaste", "onbeforescriptexecute", "onafterscriptexecute", "getElementsByTagName", "getElementsByTagNameNS", "getElementsByClassName", "getElementById", "createElement", "createElementNS", "createDocumentFragment", "createTextNode", "createComment", "createProcessingInstruction", "importNode", "adoptNode", "createEvent", "createRange", "createNodeIterator", "createTreeWalker", "createCDATASection", "createAttribute", "createAttributeNS", "hasFocus", "releaseCapture", "mozSetImageElement", "mozCancelFullScreen", "mozExitPointerLock", "enableStyleSheetsForSet", "elementFromPoint", "querySelector", "querySelectorAll", "getAnonymousNodes", "getAnonymousElementByAttribute", "addBinding", "removeBinding", "getBindingParent", "loadBindingDocument", "createExpression", "createNSResolver", "evaluate", "implementation", "URL", "documentURI", "compatMode", "characterSet", "contentType", "doctype", "documentElement", "inputEncoding", "referrer", "lastModified", "readyState", "title", "dir", "defaultView", "activeElement", "onabort", "onblur", "oncanplay", "oncanplaythrough", "onchange", "onclick", "oncontextmenu", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreset", "onscroll", "onseeked", "onseeking", "onselect", "onshow", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "onvolumechange", "onwaiting", "onreadystatechange", "onmouseenter", "onmouseleave", "onmozfullscreenchange", "onmozfullscreenerror", "onmozpointerlockchange", "onmozpointerlockerror", "onwheel", "oncopy", "oncut", "onpaste", "onbeforescriptexecute", "onafterscriptexecute", "currentScript", "mozFullScreenEnabled", "mozFullScreenElement", "mozFullScreen", "mozPointerLockElement", "hidden", "mozHidden", "visibilityState", "mozVisibilityState", "styleSheets", "selectedStyleSheetSet", "lastStyleSheetSet", "preferredStyleSheetSet", "styleSheetSets", "constructor", "hasChildNodes", "insertBefore", "appendChild", "replaceChild", "removeChild", "normalize", "cloneNode", "isEqualNode", "compareDocumentPosition", "contains", "lookupPrefix", "lookupNamespaceURI", "isDefaultNamespace", "isSupported", "hasAttributes", "setUserData", "getUserData", "nodeType", "nodeName", "baseURI", "ownerDocument", "parentNode", "parentElement", "childNodes", "firstChild", "lastChild", "previousSibling", "nextSibling", "nodeValue", "textContent", "attributes", "namespaceURI", "prefix", "localName", "ELEMENT_NODE", "ATTRIBUTE_NODE", "TEXT_NODE", "CDATA_SECTION_NODE", "ENTITY_REFERENCE_NODE", "ENTITY_NODE", "PROCESSING_INSTRUCTION_NODE", "COMMENT_NODE", "DOCUMENT_NODE", "DOCUMENT_TYPE_NODE", "DOCUMENT_FRAGMENT_NODE", "NOTATION_NODE", "DOCUMENT_POSITION_DISCONNECTED", "DOCUMENT_POSITION_PRECEDING", "DOCUMENT_POSITION_FOLLOWING", "DOCUMENT_POSITION_CONTAINS", "DOCUMENT_POSITION_CONTAINED_BY", "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC", "constructor", "addEventListener", "removeEventListener", "dispatchEvent", "constructor", "constructor", "toSource", "toString", "toLocaleString", "valueOf", "watch", "unwatch", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", "defineGetter", "defineSetter", "lookupGetter", "lookupSetter"]

edited Apr 26, 2013 at 0:11

answered Apr 26, 2013 at 0:06

yowza

2591 silver badge4 bronze badges

12 Comments

Paul Over a year ago

Wow... That is a bit unnecessary to show don't you think? Maybe you could post the first few properties of document, followed by a ....

Dusty Over a year ago

Can you explain this syntax? I trying to output the properties using this code in jsfiddle and I couldn't get it to work.

Paul Over a year ago

@yowza How do you know that the OP wants to enumerate non-enumerable properties? Seems counter-intuitive to me.

nnnnnn Over a year ago

I can't really speak for the OP, but it seems to me they're asking more about why their for..in loop didn't work as written. (OP states that they can get "all the property names" using other syntax, so even if that isn't "all inheritied and non-enumerable properties" it would seem to be what they want.)

yowza Over a year ago

@Dusty: Your loop head was correct, but your loop body was trying to use the same i variable, which had been incremented past the point where the assignment happened. To use it in the body, you'd need to subtract it back out. document.write(myArray[i - 1] + "</br>");

|

Collectives™ on Stack Overflow

JavaScript for/in loop with unexpected output

4 Answers 4

10 Comments

7 Comments

2 Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

7 Comments

2 Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related