【JavaScript入門】配列の破壊的・非破壊的メソッド一覧と解説

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptで、配列の「破壊的メソッド/非破壊的メソッド」について解説して行きます。

1 配列の破壊的/非破壊的メソッドとは？
2 破壊的メソッドを安全に使う方法
3 破壊的なメソッドの一覧
4 非破壊的なメソッドを使用する際のポイント
5 まとめ
6 JavaScript書籍 Ver. 中級-上級者向け
7 JavaScript書籍 Ver. 初級者向け
8 参考・引用
9 最近の投稿

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

JavaScriptの配列メソッドには、破壊的メソッドと非破壊的メソッドの2種類があります。

破壊的メソッドは、操作する配列を破壊する(変更する)メソッドなので、注意して使う必要があります。

たとえば、pushメソッドは破壊的メソッドの1つです。これは、配列末尾に要素を追加します。

すなわち、元の配列を書き換える(update)するメソッドだと言えます。

// < 破壊的メソッド >

const numList = [ 1, 2, 3, 4 ];

numList.push('ロボ玉');

// 操作する配列が、書き変わる(updateされる)
console.log({numList});
// numList: (5) [1, 2, 3, 4, 'ロボ玉']

それに対して、非破壊的メソッドは、操作する配列を破壊しない(変更しない)メソッドです。

たとえば、concatメソッドは非破壊的なメソッドです。

これは複数の配列を結合するメソッドです。もとの配列は書き換えず、新しい配列を返します。

すなわち、元の配列は操作せず、新しい処理結果の作成すると言うことです。

// < 非破壊的メソッド Ver.concat() >

const protoTypeRobotama = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

const cats = ['ももちゃん', '白桃'];

const robotamaAndCats = protoTypeRobotama.concat(cats);

// 実行結果(返り値)は、処理した結果
console.log({robotamaAndCats});
// robotamaAndCats: (5) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機', 'ももちゃん', '白桃']

// 操作する配列を破壊しない！ => 新しい処理結果を作成する！
console.log({protoTypeRobotama});
// protoTypeRobotama: (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']

console.log({cats});
// cats: (2) ['ももちゃん', '白桃']

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

配列の破壊的メソッドを安全に使うには、破壊的操作を行う前に、配列を別の配列にCopyします。

配列のCopyには、スプレッド構文や、concat()、slice()などを使います。

Copyした配列に対してなら、破壊的メソッドを使っても思わぬ配列の変更(破壊)が行われずにすみます。

// < Arrayに対する破壊的メソッドを安全に使う方法 >

const robotamaArray = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// 1. 破壊的なメソッドを安全に使うためには、Copyする。
console.log([...robotamaArray].reverse());
// (3) ['ロボ玉試作3号機', 'ロボ玉試作2号機', 'ロボ玉試作1号機']

console.log(robotamaArray);
// (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']

破壊的なメソッドの一覧

破壊的メソッドの方が数は少ない&思わぬ配列操作をしないように、この一覧のメソッドには注意しましょう。

メソッド	操作
push	配列の末尾に要素を追加する
pop	配列から最後の要素を取り除き、その要素を返す
shift	配列から最初の要素を取り除き、その要素を返す
unshift	配列の最初に要素を追加する
splice	要素を取り除いたり、置き換えたり、新しい要素を追加する
sort	配列の要素をソートする
reverse	配列の要素を逆順に並び替える
fill	開始インデックスから終了インデックスまでのすべての要素を、静的な値に変更した配列を返す
copyWithin	サイズを変更せずに、配列の一部を同じ配列内の別の場所にシャローコピーして返す