JavaScriptの案件に配属された当初、比較関数を用いた配列のソートの記述がすぐ理解できなかったので、備忘録としてメモ。

sort()とは

並び替えをしてくれる便利なメソッド
元の配列データを変更してしまう点には注意

単純な文字列のソート

文字列が格納された配列に対してsort()を実行すると、アルファベット順にソートされる。

const strs = ['c', 'b', 'a', 'd'];
strs.sort();
console.log(strs); // 出力結果:['a', 'b', 'c', 'd']

比較関数を用いたソート

ソートしたい対象が数値やオブジェクトなどの場合は、sort()メソッドと比較関数を使用。

例：文字数でソートしてみる

今回は['abc', '', 'aaa', 'zz']という配列を
文字数を比較する比較関数を用いて
['', 'zz', 'abc', 'aaa']の少→多の順になるようにソートしてみます。

const strs = ['abc', '', 'aaa', 'zz'];

strs.sort((a, b) => a.length - b.length);
console.log(strs); // 出力結果:['', 'zz', 'abc', 'aaa']

慣れないうちは、下記の方がわかりやすいかもです。

const strs = ['abc', '', 'aaa', 'zz'];

// 比較関数
const compare = (a, b) => {
 return a.length - b.length;
}

strs.sort(compare);
console.log(strs); // 出力結果:['', 'zz', 'abc', 'aaa']

理解に苦しんだ箇所

案件の中でstrs.sort((a, b) => a.length - b.length);が出てきた時の私の心情は
下記の通りです。

いきなり引数２つ出てきた...
a,bってなに...
もはやここで何が起きてるか謎...

どんな処理がされているのか

strs.sort((a, b) => a.length - b.length);
ここで何が起きているのか、私なりに理解した内容をまとめます。

上記のコードでは、配列strsの値を2ずつ取り出して文字数で比較し、
1つずつ順番を入れ替えています。具体的な処理を書くと

1. 'abc' と ''    を比較 -> 'abc'の方が文字数が多いため入れ替え ['', 'abc', 'aaa', 'zz']
2. 'abc' と 'aaa' を比較 -> 文字数が同じためそのまま          　['', 'abc', 'aaa', 'zz']
3. 'aaa' と 'zz'  を比較 -> 'aaa'の方が文字数が多いため入れ替え ['', 'abc', 'zz', 'aaa']
4. 'abc' と 'zz'  を比較 -> 'abc'の方が文字数が多いため入れ替え ['', 'zz', 'abc', 'aaa']
5. ''    と 'zz'  を比較 -> ''の方が文字数が少ないためそのまま　 ['', 'zz', 'abc', 'aaa']

つまり、
引数a、bの正体は、['abc', '', 'aaa', 'zz']の中の比較する２つの値であり、
比較関数ではa.length - b.lengthでどちらの文字列が大きいかを比較し、
a.length - b.length > 0ならa bの順を入れ替える
という処理がされている。と理解。

引数の名って大事

sort()が何をしてくれるかを理解し、ありがたみを感じられるようになった時に、改めて思ったこと。
今回理解に苦しんだ最大の理由は引数a、ｂが何かわからなかったから。
引数でどんな値が渡されるのか、少しでもわかりやすく命名するように心がけようと思います...!

const strs = ['abc', '', 'aaa', 'zz'];

strs.sort((str１, str2) => str１.length - str2.length);
console.log(strs); // 出力結果:['', 'zz', 'abc', 'aaa']

JavaScript sort()って何してるの？備忘録