sliceしたら切り取れる？spliceとの返り値と元配列の変化を比べよう

配列の一部を取り出したいとき、名前が似たsliceとspliceで迷うことがあるよね。二つは、引数の意味も元の配列への影響も違うよ。

今回は['A', 'B', 'C', 'D']からBとCを対象にする。同じ初期配列を毎回作り直すブラウザ作例で、返り値と処理後の配列を並べて確認しよう。

sliceの二つ目は終了位置

const items = ['A', 'B', 'C', 'D'];
const result = items.slice(1, 3);
console.log(result); // ['B', 'C']
console.log(items);  // ['A', 'B', 'C', 'D']

位置は0から数えるので、1はB。slice(1, 3)は位置1から位置3の直前までを、新しい配列として取り出す。終了位置3のDは含まれないよ。

元のitemsからBとCが消えるわけではない。範囲をコピーして返す処理なので、元の配列も引き続き同じ順序のまま使える。

spliceの二つ目は削除する数

const items = ['A', 'B', 'C', 'D'];
const removed = items.splice(1, 2);
console.log(removed); // ['B', 'C']
console.log(items);   // ['A', 'D']

splice(1, 2)は位置1から2個を削除し、削除した要素を配列で返す。今回はsliceの返り値と同じB・Cが出るけれど、元のitemsはA・Dへ変わるんだ。

元を変えるかどうかを見ずに返り値だけ確認すると、違いを見逃しやすいね。

置き換えも元の配列へ反映される

const items = ['A', 'B', 'C', 'D'];
const removed = items.splice(1, 2, 'X');
console.log(removed); // ['B', 'C']
console.log(items);   // ['A', 'X', 'D']

三つ目以降の引数は、そこへ挿入する要素。この例ではB・Cを削除した場所へXを入れる。返り値は置き換え後の配列ではなく、削除した要素の配列である点も見ておこう。

ページ内で三つを試す

1. slice(1, 3)を選び、元の四項目が残ることを見る。
2. splice(1, 2)へ切り替え、元がA・Dへ変わることを見る。
3. Xを挿入するモードで、元がA・X・Dになることを見る。
4. 「最初から試す」でsliceへ戻す。

どのモードも、実行する前に初期配列を作り直す。前の操作の削除結果へ、次の操作を重ねていないので、同じ条件で比較できるよ。

コピー先の中身まで独立するとは限らない

sliceが返すのは浅いコピー。要素がオブジェクトなら、そのオブジェクトへの参照は共有される。この例の文字列だけの配列では目立たないけれど、「新しい配列だから中のオブジェクトも別物」とは考えないでね。

共有している状態へ変更を加えたくないなら、元を変更するメソッドかを先に確認し、必要ならコピーや別の方法を選ぶ。今回の基本例と、オブジェクトを含む実際のデータは分けて検証しよう。

2026年10月29日にMDNと照合し、三つの結果をNodeとブラウザで検証した。スプレッドと浅いコピー、sortとtoSortedも、元への影響を見分ける参考になるよ。