Sort an Array of strings ignoring the Case in JavaScript

avatar
Borislav Hadzhiev

Last updated: Mar 6, 2024
3 min

banner

# 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']

sort array of strings ignoring the case

The code for this article is available on GitHub

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']
The code for this article is available on GitHub

# Sort an Array of strings ignoring the Case without mutation

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']

sort array of strings ignoring the case without mutation

The code for this article is available on GitHub

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 the 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']
The code for this article is available on GitHub

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.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2024 Borislav Hadzhiev