Compare Strings in JavaScript

Mar 16, 2020

What does it mean for two strings to be equal, or for one string to be greater than the other in JavaScript?

JavaScript's triple equals operator === returns true if two strings are exactly equal, and false otherwise:

'hello' === 'hello'; // true
'Hello' === 'hello'; // false

The < and > operators compare strings in lexicographical order. Lexicographical order essentially means "dictionary order". In simpler terms, a < b if the first character of a comes before the first character of b in the ASCII table, or if the first characters of a and b are equal and a.slice(1) < b.slice(1).

'alpha' < 'zeta'; // true, because 'a' comes before 'z'
'alpha' < 'Zeta'; // false, because 'Z' = 90 in ASCII, and 'a' = 97
'one' < '1'; // false, because '1' = 49 in ASCII, and 'o' = 111

'octo' < 'okto'; // true, because 'c' = 99, and 'k' = 107
'a' < 'alpha'; // true, because end of string = '0' in ASCII

Sorting an Array of Strings

JavaScript's Array#sort() function sorts by lexicographic order automatically.

['Zeta', '1', 'alpha', ''].sort(); // ['', '1', 'Zeta', 'alpha']

Lodash's sortBy() function also sorts by lexicographic order automatically, as long as you're sorting an array of strings.

_.sortBy(['Zeta', '1', 'alpha', '']); // ['', '1', 'Zeta', 'alpha']

What about sorting an array of objects based on a string property? The Array#sort() function takes a callback parameter that takes 2 values a and b, and should return:

Given an array of objects with a lastName property, below is one way to sort the array by lastName.

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

characters.sort((a, b) => {
  if (a === b) {
    return 0;
  }
  return a.lastName < b.lastName ? -1 : 1;
});

// La Forge, Picard, Riker
characters;

A more concise alternative is using JavaScript's built-in localeCompare() function. Calling a.localeCompare(b) returns -1 if a < b, 0 if a === b, and 1 if a > b.

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

characters.sort((a, b) => a.lastName.localeCompare(b.lastName));

// La Forge, Picard, Riker
characters;

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials