JavaScript sort の使い方 #1

株式会社リュディアです。JavaScript でサポートしている高階関数の1つである sort メソッド（以下、sort ） についてまとめてみます。掲載するソースコードはすべて GAS の開発環境で動作確認をしています。

sort という名前からわかるように配列の要素を並べ替えます。さっそく以下の例をみてみましょう。他の高階関数のまとめで使った元配列を使います。既に数字として小さいものから並んでいますが。。。

function myFunction() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 inputArray.sort();
 
 console.log( inputArray );
}

// 実行結果
// [ 1, 10, 17, 20, 3, 31 ]

実行結果を見てどう思われましたか？思ってた結果と違う、という方が多いのではないでしょうか。元配列に対して sort() を呼ぶだけでは、元配列の要素を文字列として sort することに注意してください。では元配列の要素を数字の大小で sort したい場合はどうすればよいでしょうか。

配列に対して数字の大小で sort をしたい場合、大小関係の定義をコールバック関数を用いて自分で行う必要があります。文字列として昇順に sort する場合のみ例外的に指示が不要となります。ここで「昇順」とは「小さなものから大きなもの」の順で並べることを言います。文字列の場合は文字コードが小さいものから大きなものになるよう sort されます。

では先の例を使って数として昇順に sort する例を以下に示します。

function myFunction2() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 inputArray.sort( function( a, b ) {
                   if ( a < b ) return -1;
                   if ( a === b) return 0;
                   if ( a > b ) return 1;
                  } );
 
 console.log( inputArray );
}

// 実行結果
//  [ 1, 3, 10, 17, 20, 31 ]

実行結果を見ると、数として昇順に sort されていることがわかりますね。ここで sort の中で定義されている function について説明します。他の高階関数と同様コールバック関数であり、ここでは数字の大小を定義しています。sort のコールバック関数を定義する場合に以下の規則を守ってください。

1. 引数 a, b のうち、a < b としたい場合には負の数を返す、ここでは -1 を返しています
2. 引数 a, b のうち、a = b としたい場合には 0 を返す。このとき sort は何も処理をしない
3. 引数 a, b のうち、a > b としたい場合には正の数を返す、ここでは 1 を返しています

このような sort の規則をプログラマが定義可能とすることによって、柔軟性を持たせることができます。参考までに GAS で実行する際には、function の部分を sortFunction や aaa といった名前で定義するとエラーがでました（2020, 8/23現在）。必ず名前を function にする必要があるのかもしれません。

先の例は function をどのように定義するかまとめるために 3 つの if 文を記載しましたが、実際に数字を昇順に sort するためのコールバック関数は以下のように定義します。これは非常によく使うので身に付けておいてください。

function myFunction3() {
 const inputArray = [ 1, 3, 10, 17, 20, 31 ] ;
 
 inputArray.sort( function ( a, b ) {
                   return a - b;
                  } );
 
 console.log( inputArray );
}

// 実行結果
//  [ 1, 3, 10, 17, 20, 31 ]

今まで sort を高階関数と意識せずに使っておられた方も多いのではないでしょうか？ sort も高階関数の1つです。今回は数字を昇順に sort する例をまとめました。

では、ごきげんよう。