TL;DR
JavaScriptのsortは戻り値を持たず、自分自身を並べ替える。TypeScriptのsortは戻り値を持ち、並べ替え後の配列を返却する。
JavaScriptからTypeScriptへのmigration時にハマったので、記載しておきます。
(追記)
正しくは以下でした。
- JavaScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。
- TypeScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。
mobx利用に関するハマりだったようなので、別途検証記事を記載します。
JavaScriptからTypeScriptへのmigration
配列のsortに関する処理を、JavaScriptからTypeScriptへ単純に変換(「.js」を「.ts」へ変換)してみると、期待通りに動作しませんでした。
SortSample.js
const array = [1,5,2,4,3];
array.sort();
console.log(array);
/*
* 結果
* 「1,2,3,4,5」
* (期待通りに並べ替えが発生する)
*/
SortSample.ts
const array = [1,5,2,4,3];
array.sort();
console.log(array);
/*
* 結果
* [1,5,2,4,3]
* (並べ替えが発生しないようにみえる。なぜ。。。)
*/
JavaScriptのsort
MDNのsortを確認すると、以下のようになっています。
戻り値
ソートされた結果の配列。ソートは対象配列上で直接行われることに注意して下さい。コピーされた別の配列が準備されることはありません。
うん。私の知っているsort処理のとおりです。
TypeScriptのsort
TypeScriptのsortはドキュメントを見つけられなかったので、定義ファイルを確認します。
lib.es5.d.ts
/**
* Sorts an array.
* @param compareFn The name of the function used to determine the order of the elements. If omitted, the elements are sorted in ascending, ASCII character order.
*/
sort(compareFn?: (a: T, b: T) => number): this;
「sort(compareFn?: (a: T, b: T) => number): this;」
→「this;」
ん？戻り値が「void」ではなく「this」となっている??
つまり、sortされた結果を戻り値として返却している!!
なので、TypeScriptのsort処理を利用するならば以下の通りに変更する必要があります。
SortSample.ts
let array = [1,5,2,4,3];
array = array.sort();
console.log(array);
/*
* 結果
* 「1,2,3,4,5」
* (期待通りに並べ替えが発生する)
*/
#まとめ
JavaScriptのsortは戻り値を持たず、自分自身を並べ替える。TypeScriptのsortは戻り値を持ち、並べ替え後の配列を返却する。
(追記)
正しくは以下でした。
- JavaScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。
- TypeScriptのsortは戻り値を持ち、自分自身を並べ替えた結果を返却する。