では「同じ処理を slice と splice の両方で書いてみる」練習問題を出します。これで違いを体感できますよ。
練習問題（slice と splice の両方で）
問題1：配列の先頭を除いた部分を取り出す
次の配列から 先頭を除いた残りを取り出してください。
- 1つは slice を使って「元を壊さず」
- もう1つは splice を使って「元を壊して」
const arr = ['a', 'b', 'c', 'd'];
問題2：配列の最後の2つを取り出す
次の配列から 最後の2つを取り出してください。
- slice で「コピー」
- splice で「削除して取り出す」
const arr = [10, 20, 30, 40, 50];
解答と解説
問題1
slice 版（非破壊）
const arr = ['a', 'b', 'c', 'd'];
const result = arr.slice(1);
console.log(result); // ['b', 'c', 'd']
console.log(arr); // ['a', 'b', 'c', 'd'] ← 元はそのまま
splice 版（破壊）
const arr = ['a', 'b', 'c', 'd'];
const result = arr.splice(1);
console.log(result); // ['b', 'c', 'd']
console.log(arr); // ['a'] ← 元が変わる
問題2
slice 版（非破壊）
const arr = [10, 20, 30, 40, 50];
const result = arr.slice(-2);
console.log(result); // [40, 50]
console.log(arr); // [10, 20, 30, 40, 50] ← 元はそのまま
splice 版（破壊）
const arr = [10, 20, 30, 40, 50];
const result = arr.splice(-2);
console.log(result); // [40, 50]
console.log(arr); // [10, 20, 30] ← 元が変わる
ポイント
- slice は「コピー」なので元の配列は無傷。
- splice は「編集」なので元の配列が変わる。
👉 ここまでで「同じ結果を得られるけど、元が変わるかどうか」が一番の違いだと体感できたと思います。