JSで配列を扱っていると、どうしても破壊・非破壊メソッドにぶち当たるからまとめてみた
そもそも破壊・非破壊メソッドって何よ
配列の操作をした時に、元の配列の中身を変えてしまうのが破壊的メソッド
const array1 = [ 1, 2, 3, 4, 5 ]
// 配列を反転する
const array2 = array1.reverse()
console.log(array1)
// [ 5, 4, 3, 2, 1 ]
console.log(array2)
// [ 5, 4, 3, 2, 1 ]
// array1自体が書き換えられる
元の配列のコピーを作ることで、元の配列の中身を変えないのが非破壊的メソッド
const array1 = [ 1, 2, 3, 4, 5 ]
// 配列を反転する
// スプレッド構文を使用して新しい配列を作成する
const array2 = [...array1].reverse()
console.log(array1)
// [ 1, 2, 3, 4, 5 ]
console.log(array2)
// [ 5, 4, 3, 2, 1 ]
// array1自体はそのまま!
破壊的メソッドの何が問題なの？？
const array1 = [ 1, 2, 3, 4, 5 ]
// とても長い処理
array1.push(6)
// とても長い処理
console.log(array1)
こんな処理があったときに、[ 1, 2, 3, 4, 5 ]を期待していると、[ 1, 2, 3, 4, 5, 6 ]が出力される。
破壊的メソッドを読み飛ばしてしまって、コードの可読性やトレーサビリティがめっちゃ低くなる。
さらにはarray1にコードジャンプした時にもなかなか追跡できずストレスフル。（個人の感想です）
非破壊で書き直す
const array1 = [ 1, 2, 3, 4, 5 ]
// とても長い処理
const array2 = [ ...array1, 6 ]
// とても長い処理
console.log(array2)
こんな感じ。
出力に使っている配列がどこで定義されているか、中身が何かが追跡しやすい。
「とても長い処理」の中でarray1を参照したい時にも、array1の中身に影響がないから使いやすい。
最後に
もちろん非破壊的メソッドでできないこともあるはず。
どうしても破壊的メソッドが使いたいときは、スプレッド構文でコピーしてから使うこと！
約束だぞ！
参考
[JavaScript] Arrayメソッド破壊・非破壊チートシート