[JavaScript] 破壊的メソッドと非破壊的メソッド

JavaScriptの破壊的メソッドと非破壊的メソッドとはなにか、簡単にまとめようと思います。

破壊的メソッド（非破壊的メソッド）とは

破壊的メソッドとは レシーバであるオブジェクトそのものに変更を加えるメソッドのことです。
非破壊的メソッドは、その場の実行結果のみに影響しますが、破壊的メソッドは自分自身に変更を加えてしまいます。

以下具体例

破壊的メソッド①

push() の場合

以下の例は、配列に対し直接要素を追加しています。
結果変数の値がどうなったのかがわかりにくく、バグの温床となりかねないので注意が必要です

例１

const test = ["foo", "bar"];
const result = test.push("baz");

console.log(test); // ["foo", "bar", "baz"]

非破壊的メソッド①

concat()

上記のpush()で行ったことを、非破壊的メソッドを使って行います

例２

const test = ["foo", "bar"];
const result = [].concat(test, "baz");

console.log(test); // ["foo", "bar"]
console.log(result); // ["foo", "bar", "baz"]

非破壊的メソッドは元の配列 test を変更しないため、安全かつ直感的に理解がしやすいです
　　

破壊的メソッド②

sort() の場合

以下の例は、配列の並び順を直接変更しています。

例３

const test = [3, 2, 1];
const result = test.sort();

console.log(test); // [1, 2, 3]
console.log(result); // [1, 2, 3]

非破壊的メソッド②

上記のsort()で行ったことを、スプレッド構文を利用して非破壊的に実装できます

例４

const test = [3, 2, 1];
const result = [...test].sort();

console.log(test); // [3, 2, 1]
console.log(result); // [1, 2, 3]

スプレッド構文で新たな配列を生成し、それに対してsort()をしているため
元の配列は変更せず、非破壊的にsort()を使用できます。

まとめ

　
破壊的メソッドは元の変数を変更してしまうものであり、変数が今どうなっているのかをわかりにくくします。
結果的にバグの温床やコードの可読性を下げる恐れがあるため、
なるべく意識的に非破壊的メソッドを使用するのが良いでしょう。