配列の破壊的メソッドと非破壊的メソッドとは

非破壊的

元の配列を変更する

メリット

一つの配列を操作するためメモリの消費を抑えれる

デメリット

元の配列を変化させるため使いすぎたり、複雑な場合はバグの温床になりやすい

破壊的

元の配列を変更しない

メリット

元の配列を操作しないため安全なコードを書ける

デメリット

配列を新たに作り出してしまうため、大規模な配列操作に対してはメモリを大量に使う

実際のCodeを使った例

1.破壊的メソッド push

const arrayA = ['あ', 'い', 'う', 'え', 'お']
//破壊的メソッド arr.push([element1[, ...[, elementN]]])
arrayA.push('か')
console.log(arrayA)

// [LOG]: ["あ", "い", "う", "え", "お", "か"]

2.非破壊的メソッド concat

const arrayB = ['あ', 'い', 'う', 'え', 'お']

//非破壊的メソッド const new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])
const newArrayB = arrayB.concat('か')
console.log(arrayB)
console.log(newArrayB)

//元の配列B [LOG]: ["あ", "い", "う", "え", "お"] 
//新しい配列B [LOG]: ["あ", "い", "う", "え", "お", "か"]

その他の破壊的・非破壊的メソッド一覧

使い分け

大規模な配列(1000件とか1万件とかを超えるような配列操作以外は基本的には元の配列を使用する場合以外は破壊的メソッドはバグの温床になりやすいため避ける

破壊的メソッドを非破壊的に使う方法

spred構文を使用してcopyを作る

const arrayC = ["あ", "い", "う", "え", "お"] 
// Copyを作る(注意: 代入するは意味がない)
const copyC = [...arrayC]
copyC.push('か')

console.log(arrayC)
console.log(copyC)

//元の配列C [LOG]: ["あ", "い", "う", "え", "お"] 
//copy配列C [LOG]: ["あ", "い", "う", "え", "お", "か"]

結論

大規模な配列(1000件とか1万件とかを超えるような配列操作以外は基本的には元の配列を使用する場合以外は破壊的メソッドはバグの温床になりやすいため避ける
しかし、破壊的メソッドには便利なものが用意されていることが多い(sort, reverse)ので、非破壊的メソッドで代用が難しい場合はspred構文を利用しcopyを作り破壊的メソッドを利用するのが良さそう