JavaScriptのslice()とsplice()メソッドの決定的な違いを徹底解説

JavaScriptには、配列から一部の要素を取り出すためのメソッドとして、slice()とsplice()の2つが用意されています。名前はよく似ていますが、その動作はまったく異なります。両者の根本的な違いは以下の点にあります。

• splice()：呼び出し元の元の配列そのものを変更（破壊的操作）し、削除された要素を新しい配列オブジェクトとして返します。
• slice()：元の配列を一切変更せず（非破壊的操作）、切り取った部分だけを新しい配列として返します。

slice()メソッドとは

slice(start, end)は、start番目の要素からend番目の直前までの要素を抜き出し、新しい配列として返します。元の配列には一切影響を与えないため、安全に配列の一部をコピーしたい場合に適しています。また、負の値を指定すると配列の末尾からの位置として扱われます。

splice()メソッドとは

splice(start, deleteCount, item1, ...)は、元の配列から要素を削除したり、任意の位置に新しい要素を挿入したりできるメソッドです。削除された要素は戻り値として配列で返されますが、あくまで元の配列自体が書き換えられるという点に注意が必要です。

コード例で確認する違い

// splice() は元の配列を変更する
let arr = [1, 2, 3, 4, 5];
console.log(arr.splice(2)); // [ 3, 4, 5 ] を返す

// slice() は元の配列を変更しない
let arr2 = [1, 2, 3, 4, 5];
console.log(arr2.slice(2)); // [ 3, 4, 5 ] を返す

console.log("--- 配列を操作した後 ---");
console.log(arr);   // splice後の元の配列
console.log(arr2);  // slice後の元の配列

実行結果

[ 3, 4, 5 ]
[ 3, 4, 5 ]

--- 配列を操作した後 ---
[ 1, 2 ]
[ 1, 2, 3, 4, 5 ]

結果の解説

どちらのメソッドも戻り値としては同じ[ 3, 4, 5 ]を返しますが、その後の元の配列の状態に大きな差が生じています。

• splice(2)を実行した配列arrは、インデックス2以降の要素が取り除かれ、[ 1, 2 ]になっています。
• slice(2)を実行した配列arr2は、コピーが作成されるだけで元のまま[ 1, 2, 3, 4, 5 ]が保持されています。

使い分けのポイント

元のデータを保持したい場面ではslice()を、配列を直接編集したい場面ではsplice()を使うと、意図しないバグを防ぐことができます。特にReactなどのモダンなフレームワークでは、状態の不変性（イミュータビリティ）が重視されるため、非破壊的なslice()の使用が推奨されるケースが多くなっています。