[Very odd] Browser seems to perform all "sort" methods before "console.log"

[blackpug]

In my JavaScript code, I start with an array of numbers and then do the following:

1. Sort it in ascending order;
2. Ask the browser to display the array;
3. Sort it in descending order;
4. Ask the browser to display the array.

What the browser seems to do is sort the array in ascending order, then sort in descending order, then display the array (x2) – which doesn’t follow the order of the code. I would be most grateful is anyone can help explain the issue, thanks.

Here’s the code:

var numbersArray = [60, 50, 62, 58, 54, 54];

// For sorting in ascending order
function compareNumbers(num1, num2) {
  if (num1 > num2) {
    return 1;
  } else if (num1 === num2) {
    return 0;
  } else {
    return -1;
  }
}

// For sorting in descending order
function compareNumbersDesc(num1, num2) {
  if (num2 > num1) { 
    return 1;
  } else if (num1 === num2) {
    return 0;
  } else {
    return -1;
  }
}

numbersArray.sort(compareNumbers); 
console.log(numbersArray);

numbersArray.sort(compareNumbersDesc);
console.log(numbersArray);

The console displays:
[ 62, 60, 58, 54, 54, 50 ]
[ 62, 60, 58, 54, 54, 50 ]

But even stranger is if I simply refresh the page, the console now displays:
[ 50, 54, 54, 58, 60, 62 ]
[ 62, 60, 58, 54, 54, 50 ]

Does anyone know what’s going on? Thanks in advance!

[bbsmooth]

This is from the MDN page for console.log:

Logging objects

Don’t use console.log(obj), use console.log(JSON.parse(JSON.stringify(obj))).

This way you are sure you are seeing the value of obj at the moment you log it. Otherwise, many browsers provide a live view that constantly updates as values change. This may not be what you want.

[blackpug]

@bbsmooth – thank you! Really appreciate your help. I had no idea console.log(obj) was not recommended.

Sorry just wanted to clarify, you said “Otherwise, many browsers provide a live view that constantly updates as values change.” – I don’t quite understand what you mean by this, especially in the current context, since I sort the array twice, both of which seem like one-off events.

If you have another moment, you could elaborate a little bit more on this? If not, I guess I shouldn’t get too hung up on this especially since Mozilla doesn’t recommend this. Thanks again.

[bbsmooth]

A “live view” means that the console log output will reflect the current value of the object (an array in this case). The last sort you do is in descending order, so a live view of the array will be the array in descending order, even if you logged it to the console right after the first sort. So any console logs you do of the array will show the descending order because that’s the most current order of the array.

Computers are very fast. When you do the first console log after the ascending sort, the console log of the array will show the ascending order. But before you have time to look at it in the console, the second sort will run and so the value of the array in the console will be in descending order.

[blackpug]

@bbsmooth – wow that makes perfect sense, thank you, really appreciate it!!!

[Rossvold]

This was annoying me also, thanks