Sort an Array of strings ignoring the Case in JavaScript

avatar

Borislav Hadzhiev

Tue Feb 22 20223 min read

banner

Photo by Igor Starkov

Sort an Array of strings ignoring the Case in JavaScript #

To sort an array of strings ignoring the case:

  1. Call the sort() method on the array, passing it a function.
  2. Use the localeCompare() method to compare the strings ignoring the case.
  3. The sort() method will return the sorted array.
index.js
const arr = ['Z', 'f', 'a', 'C']; const sorted = arr.sort((a, b) => { return a.localeCompare(b, undefined, {sensitivity: 'base'}); }); console.log(sorted); // 👉️ ['a', 'C', 'f', 'Z']

We used the Array.sort method to sort an array of strings ignoring the case.

Note that the sort() method sorts the elements of the array in place and returns the sorted array. In other words, it mutates the original array.
index.js
const arr = ['Z', 'f', 'a', 'C']; const sorted = arr.sort((a, b) => { return a.localeCompare(b, undefined, {sensitivity: 'base'}); }); console.log(sorted); // 👉️ ['a', 'C', 'f', 'Z'] // 👇️ original also changed console.log(arr); //👉️ ['a', 'C', 'f', 'Z']

If you want to sort the array without mutating it, use the spread syntax (...) to create a shallow copy before calling the sort() method.

index.js
const arr = ['Z', 'f', 'a', 'C']; // 👇️ create shallow copy before calling sort const sorted = [...arr].sort((a, b) => { return a.localeCompare(b, undefined, {sensitivity: 'base'}); }); console.log(sorted); // 👉️ ['a', 'C', 'f', 'Z']

We used the spread syntax (...) to unpack the values of the array into a new array before calling the sort method.

This is probably what you want to be doing since mutations can be confusing and difficult to track throughout a codebase.

The parameter we passed to the sort method in the second example is a function that defines the sort order, where a and b are 2 elements in the array.

The localeCompare method returns a number that indicates whether one string comes before, after or is the same as the given string in sort order.

We passed the following 3 parameters to the localeCompare method:

  1. compareString - the string against which the reference string is compared
  2. locales - doesn't apply to us
  3. options - an object where we set the sensitivity property to base.

Setting the sensitivity property to base allows us to only consider strings that differ in base letters to be unequal. For example, a != b, a = á and a = A, b = B, etc.

The localeCompare method returns:

  • a negative number if the reference string occurs before the compare string
  • a positive number if the reference string occurs after compare string
  • 0 if they are equivalent

This is convenient for us because the sort method determines the order of the elements in the array in the following way:

  • If the return value of the compare function is greater than 0, then sort b before a.

  • If the return value of the compare function is less than 0, then sort a before b.

  • If the return value of the compare function is equal to 0, keep the original order of a and b.

index.js
const arr = ['Z', 'f', 'a', 'C']; // 👇️ create shallow copy before calling sort const sorted = [...arr].sort((a, b) => { return a.localeCompare(b, undefined, {sensitivity: 'base'}); }); console.log(sorted); // 👉️ ['a', 'C', 'f', 'Z']

Since there is a perfect match between the return values of the localeCompare method and the sort method, we are able to sort the array of strings ignoring the case just by setting the sensitivity property to base.

When the sensitivity is set to base, the localeCompare method considers a = A, b = B, etc.

Use the search field on my Home Page to filter through my more than 1,000 articles.