DEV Community

Aviskar KC
Aviskar KC

Posted on

1 4

Array.sort gotcha: Case of the missing key

When you are working as a web developer, you will have to sort an array in ascending or descending order at some point in time.

To sort arrays based on some value, we can use the built-in Array.prototype.sort() function which works as follows:

// sort in ascending order
array.sort(function (a, b) {
  if (a < b) {
     return -1;
  }

  if (a > b) {
     return 1;
  }

  if (a === b) {
     return 0;
  }
});

// sort in descending order
array.sort(function (a, b) {
  if (a < b) {
     return 1;
  }

  if (a > b) {
     return -1;
  }

  if (a === b) {
     return 0;
  }
});

Since the array.prototype.sort() function depends on positive, negative and zero values to determine the order of elements, we can simplify the above logic if we are working with numbers:

// sort in ascending order
array.sort(function (a, b) {
  return a - b;
});

// sort in descending order
array.sort(function (a, b) {
  return b - a;
})

So if we are sorting an array of object, in ascending order, our code will look like this:

let array = [{ id: 1, value: 10 }, { id: 2, value: 2 }, { id: 3, value: 5 }];

// sort in ascending order:
array.sort(function(a, b) {
  return a.value - b.value;
});

// Output => [{ id: 2, value:  3 }, { id: 3, value: 5 }, { id: 1, value: 10 }];

But imagine I introduce a new element into the mix, which doesn't have the key value:

// New element { id: 4 } which doesn't have the key `value`
let array = [{ id: 1, value: 10 }, { id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }]; 

// sort in ascending order:
array.sort(function(a, b) {
  return a.value - b.value;
});

// Output => [{ id: 1, value: 10 }, { id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }];

Because our new element doesn't have the key value, accessing it will return undefined. Now, trying to subtract a number with undefined will result in NaN and cause our sort function to not work as intended.

I recently got stung by this gotcha and worked around it by assigning 0 to the missing values:

// New element { id: 4 } which doesn't have the key `value`
let array = [{ id: 1, value: 10 }, { id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }]; 

// sort in ascending order:
array.sort(function(a, b) {
  const valueA = a.value || 0;
  const valueB = b.value || 0;

  return valueA - valueB;
});

// Output => [{ id: 4 }, { id: 2, value: 2 }, { id: 3, value: 5 }, { id: 1, value: 10 }];

As I was ordering array of objects in descending order by likes, this worked perfectly for my use case.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (4)

Collapse
 
zenulabidin profile image
Ali Sherief

Do JS arrays have a comparison method that can be passed to array.prototype.sort() so we don't have to write one each time?

Collapse
 
aviskarkc10 profile image
Aviskar KC

are you talking about something like this?

function compare(a ,b) {
   return a - b;
}

array.sort(compare)

I didn't quite get your question but you can read more about the sort function here:
developer.mozilla.org/en-US/docs/W...

Collapse
 
zenulabidin profile image
Ali Sherief

I was thinking that arrays could be sorted using array.sort() without specifying a compare function as an argument, and then sort would internally use a compare function like the one above.

Thread Thread
 
aviskarkc10 profile image
Aviskar KC

Yes, arrays can be sorted by doing just array.sort for arrays that contains numbers/strings. But when you want to sort an array of objects, you will need to specify the condition for sorting elements.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay