JavaScript - compare strings (e. g. for sorting / ordering)

In this article, we're going to have a look at how to compare two strings when we want to sort them in JavaScript.

There are two approaches to do it:

• String localeCompare method - that returns information which one should be first according to alphabet letters priority.
• comparators like: <, >, == or === - that return only true or false for commpared strings,

Second one approach requires minumum two tests to know about compared strings priority.

In below example you can see practical usage:

1. Compare with one method example

String localeCompare method returns -1, 0 or +1 value to inform which one should be first according to alphabet letters priority.

// ONLINE-RUNNER:browser;

console.log( 'a'.localeCompare('a') ); //  0   // aab is equal to aab
console.log( 'a'.localeCompare('b') ); // -1   // a is before b
console.log( 'b'.localeCompare('a') ); // +1   // b is after a

console.log( 'aab'.localeCompare('aab') ); //  0   // aab is equal to aab
console.log( 'aac'.localeCompare('aaa') ); // +1   // aac is after aaa
console.log( '123'.localeCompare('321') ); // -1   // 123 is before 321

2. Compare with comparators example

This with this approach we need to make few tests to know which one should be first.

// ONLINE-RUNNER:browser;

console.log( 'a' == 'a' ); // true
console.log( 'a' < 'b'  ); // true
console.log( 'b' > 'a'  ); // true

console.log( 'aab' == 'aab' ); // true
console.log( 'aac' > 'aaa'  ); // true
console.log( '123' < '321'  ); // true

console.log( 'a' < 'a' ); // false
console.log( 'a' < 'b' ); // true
console.log( 'b' < 'a' ); // false

console.log( 'aab' > 'aab' ); // false
console.log( 'aac' > 'aaa' ); // true
console.log( '123' > '321' ); // false

3. Custom compare method example

In this section we want to show how to write own compare method using operators.

Note: with this approach we are able to compare numbers, strings, dates and booleans without writing additional functions - so it can be easly used to sort data by any column, e.g. in last section with sorting array of objects.

// ONLINE-RUNNER:browser;

function compareStrings(a, b) {
    if (a < b) return -1;
    if (a > b) return +1;

    return 0;
}

// Using example:

console.log( compareStrings('a', 'a') ); //  0   // aab is equal to aab
console.log( compareStrings('a', 'b') ); // -1   // a is before b
console.log( compareStrings('b', 'a') ); // +1   // b is after a

console.log( compareStrings('aab', 'aab') ); //  0   // aab is equal to aab
console.log( compareStrings('aac', 'aaa') ); // +1   // aac is after aaa
console.log( compareStrings('123', '321') ); // -1   // 123 is before 321

4. Sorting array of objects example

Approach presented in this section is universal - can be used to sort columns with different types. Check previous section (3. Custom compare method example) too see simplest example.

// ONLINE-RUNNER:browser;

function compareValues(a, b) {
    if (a < b) return -1;
    if (a > b) return +1;

    return 0;
}

function sortArray(array, columnName) {
	return array.sort(function(a, b) { 
    	return compareValues(a[columnName], b[columnName]);
	});
}

// Using example:

var array = [
    {name: 'Chris', age: 30, joinedAt: new Date(2019, 1,  1)},
    {name: 'Adel',  age: 26, joinedAt: new Date(2010, 7, 23)},
    {name: 'Kate',  age: 21, joinedAt: new Date(2020, 5, 15)},
];
var columnName = 'joinedAt';

sortArray(array, columnName);

for (var i = 0; i < array.length; ++i) {
    var entry = array[i];
    console.log(entry.name + '\t' + entry.age + '\t' + entry.joinedAt);
}