6

It used to be that, when I used console.log(obj) to display an object's properties in Javascript, the properties would display alphabetically. Recently, this seems to have changed. I assume that the new order is closer to how the properties are actually stored in the code, (though I was under the impression that object properties didn't have a "real" fixed order to begin with).

However, for large, complex classes, the alphabetical display was very useful for finding the property that I was looking for. Is there an option for making the properties display alphabetically, as before?

(I would also like to know what exactly the current order of properties "represents" and how it is determined in the first place.)

IndigoFenix
  • 291
  • 2
  • 20
  • For the sub-question, [it's already been answered here](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order). – Kaiido Jan 02 '20 at 08:29
  • Maybe now that property order is guaranteed for all property iteration methods, Chrome changed it so that the properties displayed are in that guaranteed order. It's definitely a recent change – CertainPerformance Jan 02 '20 at 08:32
  • Now that I've had a chance to do some studying, yeah, it's ES2015 now that the engine is following the standard in that respect, object properties are enumerated like so: Numeric keys/props are grouped & listed in ascending order, string & symbol keys are listed in the order added. This is to guarantee loops run the same across browsers. 8/ – Chaos7703 Mar 16 '20 at 00:59
  • My Chrome 81 update has changed/fixed the properties to sort alphabetically in the console again. I do not know if the engine parses in the order of added to an object, but displays in alphabetic order, or if it rearranges to alphabetic order when the console is open, etc. I just wanted to share that. – Chaos7703 Apr 23 '20 at 21:07

1 Answers1

3

though I was under the impression that object properties didn't have a "real" fixed order to begin with

They do, as of ES2015 (and even operations that previously were exempt are being brought in line now), but you probably want to continue to act as though they don't. For own properties, it's the order they were added to the object (except for integer index properties which are listed in numeric order before other properties); details in the answers to this question. (There is no defined order for inherited properties, although engines are fairly consistent about what they do with them: They list them after own properties, following the same order rules. But again, that's not specified.)

Recently, this seems to have changed.

Looking at it experimentally, it looks like it's following property order now.

You could give yourself a utility function that creates a new object with the properties added to it in alphabetical order:

function logAlpha(obj) {
    const x = {};
    for (const key of Object.keys(obj).sort()) {
        x[key] = obj[key];
    }
    console.log(x);
}

Of course, unlike console.log(obj), that will be a snapshot, not a live link to the original object.

You can do a lot to tweak that (including the prototype properties, including the prototype itself, including sorted versions of the full prototype chain, etc.), but that's the gist.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I believe the question/hope/desire, is that when Chrome added this change in the most recent version(s), they provided a setting to turn it back on -- which is/was my hope. Having looked through all the console settings, I see no option to toggle property sorting. 8/ – Chaos7703 Jan 13 '20 at 15:21
  • @Chaos7703 - That's too bad, it would probably make a good option. – T.J. Crowder Jan 13 '20 at 15:26
  • Sadly as it seems this is in the ES2015 standard; I don't think it will become an option. – Chaos7703 Mar 16 '20 at 01:01
  • @Chaos7703 - I don't see why not. The standard doesn't say how to display things in the console. :-) – T.J. Crowder Mar 16 '20 at 07:15