JavaScriptの比較関数とは？sort()で正しく並び替える基本を解説

JavaScriptの比較関数とは、配列を並び替えるときに「どの要素を前に置くか」を決めるための関数です。

特に、配列のsort()メソッドで数値やオブジェクトを正しく並び替えるときに使われます。

JavaScriptの配列操作を基礎から確認したい場合は、先にJavaScriptの配列操作まとめ（map・filter・reduce）もあわせて読むと理解しやすくなります。

比較関数とは

比較関数とは、2つの値を比べて、並び順を決める関数です。

JavaScriptでは、主にsort()メソッドの中で使います。

const numbers = [3, 1, 5, 2, 4];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);

実行結果

[1, 2, 3, 4, 5]

このコードでは、a - bによって数値を小さい順に並び替えています。

sort()はそのままだと文字列として並び替える

sort()は、比較関数を指定しない場合、要素を文字列として扱って並び替えます。

const numbers = [10, 2, 1, 20];

numbers.sort();

console.log(numbers);

実行結果

[1, 10, 2, 20]

数値として見ると不自然ですが、文字列として見ると"10"は"2"より前に来ます。

そのため、数値を正しく並び替えるには比較関数が必要です。

比較関数の基本形

比較関数の基本形は次のとおりです。

配列.sort(function(a, b) {
  return 比較結果;
});

aとbには、比較される2つの要素が入ります。

戻り値がマイナスの場合

return a - b;

戻り値がマイナスになると、aがbより前に並びます。

戻り値がプラスの場合

戻り値がプラスになると、bがaより前に並びます。

戻り値が0の場合

戻り値が0の場合、並び順は変わりません。

数値を昇順に並び替える

昇順とは、小さい値から大きい値へ並べることです。

const scores = [80, 100, 60, 90];

scores.sort(function(a, b) {
  return a - b;
});

console.log(scores);

実行結果

[60, 80, 90, 100]

a - bにすると、数値は昇順になります。

数値を降順に並び替える

降順とは、大きい値から小さい値へ並べることです。

const scores = [80, 100, 60, 90];

scores.sort(function(a, b) {
  return b - a;
});

console.log(scores);

実行結果

[100, 90, 80, 60]

b - aにすると、数値は降順になります。

アロー関数で比較関数を書く

比較関数は、アロー関数でも書けます。

const numbers = [5, 1, 4, 2, 3];

numbers.sort((a, b) => a - b);

console.log(numbers);

実行結果

[1, 2, 3, 4, 5]

アロー関数の基本を確認したい場合は、JavaScriptのアロー関数とは？基本から使い方まで徹底解説も参考になります。

オブジェクト配列を数値で並び替える

比較関数は、オブジェクトの配列を並び替えるときにもよく使います。

const users = [
  { name: "佐藤", age: 28 },
  { name: "田中", age: 22 },
  { name: "鈴木", age: 35 }
];

users.sort(function(a, b) {
  return a.age - b.age;
});

console.log(users);

実行結果

[
  { name: '田中', age: 22 },
  { name: '佐藤', age: 28 },
  { name: '鈴木', age: 35 }
]

この例では、ageの値を基準にして、年齢が小さい順に並び替えています。

オブジェクト配列を文字列で並び替える

文字列を並び替える場合は、localeCompare()を使うと自然です。

const users = [
  { name: "Suzuki" },
  { name: "Tanaka" },
  { name: "Sato" }
];

users.sort(function(a, b) {
  return a.name.localeCompare(b.name);
});

console.log(users);

実行結果

[
  { name: 'Sato' },
  { name: 'Suzuki' },
  { name: 'Tanaka' }
]

localeCompare()は、文字列同士を比較して並び順を決めるメソッドです。

sort()は元の配列を変更する

sort()を使うと、元の配列そのものが変更されます。

const numbers = [3, 1, 2];

const sortedNumbers = numbers.sort((a, b) => a - b);

console.log(numbers);
console.log(sortedNumbers);

実行結果

[1, 2, 3]
[1, 2, 3]

sort()は新しい配列を作るのではなく、元の配列を並び替えます。

元の配列を残したい場合は、コピーしてからsort()を使います。

const numbers = [3, 1, 2];

const sortedNumbers = [...numbers].sort((a, b) => a - b);

console.log(numbers);
console.log(sortedNumbers);

実行結果

[3, 1, 2]
[1, 2, 3]

配列のコピーについて確認したい場合は、JavaScriptのスプレッド構文とは？配列やオブジェクトを展開する基本もあわせて読むと理解しやすくなります。

比較関数でよくある間違い

returnを書き忘れる

通常の関数で比較関数を書く場合、returnを書き忘れると正しく並び替えられません。

const numbers = [3, 1, 2];

numbers.sort(function(a, b) {
  a - b;
});

console.log(numbers);

このコードでは、a - bを計算しているだけで、結果を返していません。

正しくは次のように書きます。

const numbers = [3, 1, 2];

numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers);

実行結果

[1, 2, 3]

関数の戻り値について確認したい場合は、JavaScriptの関数とは？基本と使い方を徹底解説も参考になります。

sort()だけで数値を並び替えようとする

数値配列をsort()だけで並び替えると、文字列として扱われます。

const numbers = [100, 20, 3];

numbers.sort();

console.log(numbers);

実行結果

[100, 20, 3]

数値として並び替える場合は、比較関数を指定します。

const numbers = [100, 20, 3];

numbers.sort((a, b) => a - b);

console.log(numbers);

実行結果

[3, 20, 100]

比較関数を使う場面

比較関数は、次のような場面で使われます。

const products = [
  { name: "商品A", price: 3000 },
  { name: "商品B", price: 1500 },
  { name: "商品C", price: 5000 }
];

products.sort((a, b) => a.price - b.price);

console.log(products);

実行結果

[
  { name: '商品B', price: 1500 },
  { name: '商品A', price: 3000 },
  { name: '商品C', price: 5000 }
]

商品価格、点数、年齢、日付、名前など、何らかの基準で配列を並び替えたいときに比較関数が役立ちます。

比較関数の考え方

比較関数では、次の考え方を押さえると理解しやすくなります。

return a - b;

これは小さい順です。

return b - a;

これは大きい順です。

つまり、数値の並び替えでは次のように覚えると実用的です。

昇順：a - b
降順：b - a

まとめ

JavaScriptの比較関数とは、配列を並び替えるときに順番を決めるための関数です。

sort()は比較関数を指定しないと文字列として並び替えるため、数値を正しく並び替えるにはa - bやb - aを使います。

また、比較関数を使うことで、オブジェクト配列を価格順、年齢順、名前順などに並び替えることもできます。

比較関数は、配列操作の中でも実務で使う機会が多い基本知識です。sort()の仕組みとあわせて理解しておくと、JavaScriptでデータを扱う力が高まります。

関連記事

JavaScriptの配列操作まとめ（map・filter・reduce）

JavaScriptのsort()とは？配列の並び替えを基礎から徹底解説

JavaScriptの関数とは？基本と使い方を徹底解説

JavaScriptのアロー関数とは？基本から使い方まで徹底解説

JavaScriptのスプレッド構文とは？配列やオブジェクトを展開する基本