0

As the MDN website says "for...in is most practically used for debugging purposes", which I also am doing. Is there any other way to get the same results instead of using for ... in to get an array of the keys?

Every other thread on stackoverflow I read about it gave alternatives like in the code below, that are not a solution for getting the same functionality.

var myp= document.createElement('p');
var a = new Array();
for (var each in myp) {  a.push(each);}
var b = Object.keys(myp);
var c = Object.getOwnPropertyNames(myp);

console.log(a,b,c);

Edit: The "duplicate" given as closing reason has a totally other question's purpose, and unsurprisingly their isn't an answer to my question on that duplicate thread either. :/

John
  • 605
  • 9
  • 28
  • There's nothing wrong with using `for..in`. I think the article is just saying that it's useful for that. Not that it shouldn't be used for other things. – Eli Richardson Nov 21 '22 at 04:49
  • "*`for...in` is most practically used for debugging purposes*" is just wrong. It's used all the time to enumerate object keys, one just shouldn't use it when the object has enumerable inherited properties. – Bergi Nov 21 '22 at 04:50
  • 1
    Duplicate includes answers with pretty much all possibilities to get the object keys – icecub Nov 21 '22 at 04:52
  • @icecube: The duplicate only gives an answer for my question, if one reads therethe answer containing `Object.getPrototypeOf`, and does know already in advance that he needs that function, and does know about `Object.getOwnPropertyNames, Object.getOwnPropertySymbols, Reflect.ownKeys`. And then open one of the collapsed snippets, and does know in advance what to remove of that snippet, and then also seeing that that snippet does not loop through the prototypes. Beside that who would read for my purpose a question, that totally has another intention?- In short, it doesn't give a working answer. – John Nov 21 '22 at 05:43
  • @John See the alternative duplicates I dug up. – Bergi Nov 21 '22 at 05:58
  • @Bergi Two of the linked duplicates indeed contain the answer to my question, but only people find those, who know it beforehand, and would never ask here. The originally given closing duplicate is not helpful. --- This was where I wondered why stackoverflow is choosing the style of presenting information as they currently do, but unlike in former years, I won't go this road of wondering aloud. (Also I have seen your good answers over the years, so I at least know you act in good faith.) --- Thankfully Captain Performance code fits exactly. (And I like his coding style, and yours. Unlike... – John Nov 21 '22 at 06:44
  • ... unlike most of the coding desasters in the linked duplicates. – John Nov 21 '22 at 06:45

1 Answers1

2

To emulate for..in, you would have to loop through the object's internal prototypes until you reached the top of the prototype chain.

const emulateForIn = (obj) => {
  const properties = new Set();
  while (obj) {
    for (const key of Object.keys(obj)) {
      properties.add(key);
    }
    obj = Object.getPrototypeOf(obj);
  }
  return [...properties];
}

console.log(emulateForIn(document.createElement('p')));

This probably isn't 100% spec-compliant, but it'll be close enough the vast majority of the time.

That said, both this and your original code is quite odd, as is the recommendation you're quoting in your link - if you're debugging, usually just doing console.log(obj) or console.dir(obj) would be easier so as not to pollute the console with lots and lots of properties (you can expand the object on demand by clicking on it in any modern browser's devtools).

CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • `properties` should be a `Set` to avoid duplicates :-) Otherwise I totally agree with your conclusion – Bergi Nov 21 '22 at 04:53
  • This works! Sadly it's slower than the `for ... in` version, at least at the jsbench.me test I done. --- Why the question got closed, I don't understand, as the "duplicate" given as closing reason has a totally other question's purpose, and unsurprisingly their isn't an answer to my question on that duplicate's thread. :/ – John Nov 21 '22 at 05:34
  • The console.log I added only here in my question to make it easier to see the count of the resulting properties. And I'm using it on a canvas object and it's ctx-context: In the question I used the paragraph object for simplicity. – John Nov 21 '22 at 05:56
  • @John You may need to clarify your actual use case then. All we have is "*for debugging purposes, which I also am doing*" - if that's not what you are doing, what is it that you need? If you really need exactly what `for … in` does, then the answer is obviously to use `for … in`. – Bergi Nov 21 '22 at 05:59
  • @Bergi I have some helper-javascript functions to monitor values incorporated on the website I work on, while working on it. - The console.log is just the easiest way to compare the results here. – John Nov 21 '22 at 06:47