I have an array object that I display in the console, but with changed keys. When opening this object in the console, the array that comes second in the object is shown first (It is sorted alphabetically), and then the first, how can I fix this and make them appear in the correct order? It is important to preserve the ability to expand arrays inside the object, so the implementation of output through a string will not work.
const resultMain = {
mad: [1, 2, 3],
led: [62, 73, 85, 96, 10],
};
const customConsoleOutput = {
top: resultMain.mad,
rest: resultMain.led,
};
console.log(customConsoleOutput);
Console output:
{top: Array(3), rest: Array(5)}
But, when object opened:
{top: Array(3), rest: Array(5)}
>rest: (5) [62, 73, 85, 96, 10]
>top: (3) [1, 2, 3]
>[[Prototype]]: Object
I need top to be the first output and rest to be the second output, I read about alphabetical sorting in browsers, and I didn’t understand how to change it, the only thing I found is output via console.table, but that doesn’t work for me.
2
Answers
The keys of JavaScript objects have a certain order internally, but this order is defined by the ECMAScript specification. According to this specification, an object’s keys are stored in the order they were created, and their output to the console follows that order.
However, the important thing to note here is that most browser developer tools automatically sort the keys of objects alphabetically. This has nothing to do with the ECMAScript specification and is just a UI feature of the browser developer tools.
Therefore, it is difficult to fix this problem in the code itself. However, when printing to the console, you can get the desired result by separating the arrays and printing them.
You cannot do this by design. The values are sorted so you can find the one you need in objects with tens of properties
You’ll need a Devtools Custom Formatter to format an object an another way