13

I decided to post this issue following this one (which is not a real Javascript issue in the end).

After a bit of searching, I found out that string-key/value pairs of an array are not showed in the snippet feature's console.

Here's a simple example:

const arr = [1, 5, 42, 'helloworld'];

arr['stringKey'] = 'This key/value pair is not displayed in the code snippet\'s console.';

console.log(arr);

The expected output can be seen in the browser's console:

Expected output

Why doesn't the code snippet's console display the same output?

I guess that arrays use length-based iterations in order to be displayed, but because string-key properties doesn't increase the length one, their values are not shown.

So the real question may be: does the snippet's console need to be updated?

3
  • 6
    Yes, the snippet's console needs to be updated. It has been requested many times. See this answer, where the author has noted a number of features added. May 31, 2019 at 12:57
  • 1
    I personally find Chrome's notation very confusing. Having this key-value pair in those square brackets makes for a bastard notation that looks really unclear (do I have an object at index 4 but curly-brackets didn't print?) canon's updated console looks better: ▸ Array […] and when you expand it it shows all the keys (even though I'd like it even more if it did show some special value for empty slots instead of current undefined, but I can live with that...)
    – Kaiido
    May 31, 2019 at 14:47
  • 4
    [1, 5, 42, 'helloworld'] is the contents of the array. That's arguably what a console should display when given an array. arr.stringKey is a property of the array, not its contents.
    – ArtOfCode
    May 31, 2019 at 22:55

1 Answer 1

11

You call Chrome's console view the "expected output". I think that's wrong.

First of all, the console will always only show some of the information that actually exist under the hood. If the console would show everything that it could possibly access, it would be quite slow and the information shown wouldn't be useful at all, as you can't see the wood for the trees.

Secondly, the Stack Snippet console and the Chrome console serve a different purpose: While the Chrome console is a tool for debugging, the Stack console is usually just used to show that a certain snippet works / doesn't work as intended. And in your case it fulfills that purpose: You can show that the array has additional, non numeric properties:

console.log(Object.keys(Object.assign([], { key: "value" })));
7
  • 1
    In this case, I agree - having array["stringKey"] = someValue is valid but not what you should expect to get when you print out the array's contents. However, as a more general case, the console does seem to have problems, for example printing the contents of a Map or Set via console.log(map) or console.log(set) does not show any of the entries in them.
    – VLAZ
    Jun 3, 2019 at 7:14
  • Isnt the console open source? If so, how about a PR? Jun 3, 2019 at 7:56
  • Well, there is one. Not sure what exactly SO staff think about it priority-wise, though - none have commented. EDIT: I just realised I misread PR as FR... yeah, dunno where the project for the console is.
    – VLAZ
    Jun 3, 2019 at 8:00
  • Oh, I thought I somewhen saw it somewhere, but I can't find it so ... Jun 3, 2019 at 8:13
  • Looking for "stacksnippets source" in google yields nothing. Or more precisely, yields everything - there are tons of questions about various aspects of pieces of code on Stack Overflow, some are about the actual runnable snippets, others merely about any code. I even found some paper on how copy/pasting from SO affects the security in Android apps. But there is so much noise, I can't find if it's open source or where the code would be...
    – VLAZ
    Jun 3, 2019 at 8:20
  • 1
    @VLAZ If you pull up the non-minified JS source for the console here, it attributes https://github.com/gh-canon/stack-snippet-console as the source, which is MIT licensed.
    – Joshua T
    Jun 3, 2019 at 9:15
  • @JoshuaT Not that it matters, since Stack Overflow isn't using that version of the console (diff the JS source with the source from github). You probably know that, and Jonas & VLAZ likely know that, but I'm going to keep repeating it in the vain hope that someone at Stack Overflow central hears it... Aug 25, 2019 at 21:47

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .