sorting by object property giving mixed results using .sort

Question

I've had some really odd results when experimenting with currying in Chromes live browser and am curious why my logs are not coming out as expected.

Why am I getting the same array order when running the code below in Chrome? The code runner injected here in stack overflow IS giving me the correct response, but I have also attached an image of me running this same code directly into the console and it giving incorrect logs back from Chrome?

const people = [
  {  age: 15, name: 'Bob' },
  {  age: 18, name: 'Adrian' },
]

function custom_sort(key){
  return function(a, b){
     if (a[key] < b[key]) return -1
     else if (a[key] > b[key]) return 1
     else return 0
  }
}

const sort_name = custom_sort('name')
const sort_age = custom_sort('age')

people.sort(sort_name);
console.log(people);
people.sort(sort_age);
console.log(people);

const people = [
  {  age: 15, name: 'Bob' },
  {  age: 18, name: 'Adrian' },
]

function custom_sort(key){
  return function(a, b){
     if (a[key] < b[key]) return -1
     else if (a[key] > b[key]) return 1
     else return 0
  }
}

const sort_name = custom_sort('name')
const sort_age = custom_sort('age')

people.sort(sort_name);
console.log(people);
people.sort(sort_age);
console.log(people);

Actual response when using Chrome:

Benjamin James Kippax · Answer 1 · 2021-12-09T16:53:19.590

-2

Chrome Console lazily evaluates arrays. So in terms of code execution, it works as you'd expect.

If you to see the data as it's changed you can do this ...

console.log([...people]);

Your code with the above change ...

people.sort(sort_name);
console.log([...people]);

people.sort(sort_age);
console.log([...people]);

Which yields ...

Note

If you add breakpoints on your console.log lines, you'll note that in terms of code execution, the values are correct. They're only incorrect in console.

Sort by Name

Sort by age

edited Dec 09 '21 at 16:53

answered Dec 09 '21 at 16:34

Benjamin James Kippax

634
5
16

This seems awful in that I can't view a sorted array without using spread syntax, or else I'd have mixed results when live debugging. I thank you for the work around but I don't think this is intended behavior in the slightest. Array.sort has been around far longer than es6 conventions. – simon Dec 09 '21 at 16:43
The code executes just fine, it's only Chrome console that lazily evaluates arrays. The Chrome javascript executes it just fine. If you use the "Sources" tab in Chrome dev tools and add a breakpoint on the console.log lines of your JS, you'll actually note that the values are correct, it's just that console is waiting for both of the .sort() calls to finish before printing the array to console. I am well aware of how long array.sort has been around. I'm a senior developer. – Benjamin James Kippax Dec 09 '21 at 16:51
@simon I've updated my answer to include examples. I'd never recommend debugging values via console.log, it's much more reliable using the actual chrome inspector/debugger built into chrome as it pauses code execution on breakpoints. – Benjamin James Kippax Dec 09 '21 at 16:55
What exactly would you recommend console.log to be utilized for, if not for debugging? – simon Dec 09 '21 at 17:02
@simon you _can_ use it for debugging in the same way you _can_ use a donkey to commute 20 miles to work instead of a car. I'd ALWAYS recommend using the built-in debugger to debug. So to answer your question, I not recommend that you use console.log at all. – Benjamin James Kippax Dec 09 '21 at 17:13

sorting by object property giving mixed results using .sort

1 Answers1

Note

Sort by Name

Sort by age