JavaScript - sort()を非破壊的に使う

JavaScript


はじめに

今回はJavaScriptのsort()の副作用についてメモしていきます。


sort()の副作用

sort()は元の配列の順番を直接ソートします。破壊的メソッドというやつですね。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // => ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1); // => [1, 100000, 21, 30, 4]


なので、使用するときには注意が必要です。

元の配列をそのままにソートしたい場合は、ソートしたい配列のコピーを作り、そのコピーをソートするのが良さそうです。


sort()を非破壊的に使う

sort()を非破壊的に実装するにはObject.assign()を使います。Object.assign()は、第２引数に渡すオブジェクトを第1引数のオブジェクトにコピーして新しい配列を返します。

const months = ['March', 'Jan', 'Feb', 'Dec'];

console.log(Object.assign([], months).sort()); // => ["Dec", "Feb", "Jan", "March"]
console.log(months); // => [ 'March', 'Jan', 'Feb', 'Dec' ] ソートされていない

const array1 = [1, 30, 4, 21, 100000];
console.log(Object.assign([], array1).sort()); // => [1, 100000, 21, 30, 4]
console.log(array1); // => [ 1, 30, 4, 21, 100000 ] ソートされていない


その他の破壊的メソッド

JavaScriptの配列を扱う破壊的メソッドは他にもあるので、使用する時は留意です。

用途破壊的メソッドメソッド
配列の基本的なメソッドpush, pop, shift, unshift, fill, copyWithin
配列の並び替えsort, reverse
配列の切り出しsplice

こちらの記事が配列を非破壊的に操作する方法が詳細にまとまっているので、参考にしてみてください。