JavaScriptの変更系 vs 非変更系配列メソッド
変更系と非変更系の配列メソッドの重要な違いを理解。どのメソッドがその場で変更し、どれが新しい配列を返すかを学びます。ReactとReduxに必須。無料リファレンス。
Concepts
詳細な説明
変更系 vs 非変更系 配列メソッド
どの配列メソッドが元の配列を変更（ミューテーション）し、どれが新しい値を返すかを理解することは、バグのないJavaScriptを書くために不可欠です。
変更系メソッド
push()、pop()、shift()、unshift()、splice()、sort()、reverse()、fill()、copyWithin()
非変更系メソッド
map()、filter()、slice()、concat()、flat()/flatMap()、toSorted()、toReversed()、toSpliced()、with()、reduce()、find()/findIndex()、some()/every()など
Reactでの重要性
// バグ：状態を直接変更
const [items, setItems] = useState(["a", "b", "c"]);
items.push("d"); // 間違い — 現在の状態を変更
setItems(items); // Reactは再レンダリングしない
// 正しい：新しい配列を返す
setItems([...items, "d"]);
setItems(items.toSorted()); // ES2023
経験則
関数型コードやReactでは：
- 非変更系メソッドを優先
- 変更系メソッドを使う必要がある場合は先にコピー：
[...arr].sort() - 可能な場合はES2023メソッドを使用
ユースケース
ミューテーションの理解は、React状態、Reduxリデューサー、共有データ構造、またはアプリケーションの複数の部分が同じ配列を参照するあらゆるコードで作業する際に重要です。不変メソッドを優先することでバグの一クラス全体を防げます。