slice() と splice() は名前が似ていて、初心者が一番混乱しやすいペアです。
でも、実際に比べてみると「考え方の根本」が真逆なんです。
まずひとことで違いを言うと
| メソッド | 元の配列を変更する？ | 戻り値（返り値） | 主な目的 |
|---|---|---|---|
| slice() | ❌しない（非破壊） | 取り出した部分の新しい配列 | 部分コピー・抽出 |
| splice() | ✅する（破壊） | 取り出した要素の配列 | 要素の削除・挿入・置き換え |
1. slice() の例：切り取るけど、元はそのまま
const fruits = ['🍎','🍊','🍇','🍌'];
const part = fruits.slice(1, 3);
console.log(part); // ['🍊','🍇']
console.log(fruits); // ['🍎','🍊','🍇','🍌'] ← 元は変わらない！
🟢 イメージ：コピーして取り出すだけ。元のケーキはそのまま。
2. splice() の例：切り取ったら、元が変わる
const fruits = ['🍎','🍊','🍇','🍌'];
const part = fruits.splice(1, 2);
console.log(part); // ['🍊','🍇']
console.log(fruits); // ['🍎','🍌'] ← 元の配列から消えてる！
⚠️ イメージ：ケーキを本当に切って持っていく。元のケーキが減る。
3. 並べて体感：見た目で違いを感じよう
// slice() の場合
const a = ['a', 'b', 'c', 'd'];
const result1 = a.slice(1, 3);
console.log('slice 結果:', result1); // ['b', 'c']
console.log('slice 後の a:', a); // ['a', 'b', 'c', 'd']
// splice() の場合
const b = ['a', 'b', 'c', 'd'];
const result2 = b.splice(1, 3);
console.log('splice 結果:', result2); // ['b', 'c', 'd']
console.log('splice 後の b:', b); // ['a']
👉 違いポイント
- slice：新しい配列を作るだけ（元そのまま）
- splice：元の配列を「直接」書き換える
4. 応用比較 — 削除・挿入をやってみよう
slice() は「見るだけ」
const arr = [1, 2, 3, 4];
const sub = arr.slice(1, 3);
console.log(sub); // [2, 3]
console.log(arr); // [1, 2, 3, 4] ← 変わらず
splice() は「削除・挿入もできる」
const arr = [1, 2, 3, 4];
arr.splice(1, 2, 99, 100); // index1 から2個削除 → 代わりに 99,100 を挿入
console.log(arr); // [1, 99, 100, 4] ← 元が変化！
覚え方のコツ
| 連想ワード | 覚え方 |
|---|---|
| slice（スライス） | ケーキを切って、新しい皿に取り分ける（元は残る） |
| splice（スプライス） | ロープをつないだり切ったりして、元を加工する |
5. 練習で体感しよう！
以下のコードを CodePen やブラウザのコンソールで試してみてください👇
let arr1 = [1,2,3,4,5];
let arr2 = [1,2,3,4,5];
console.log('--- slice ---');
console.log(arr1.slice(1, 4)); // ?
console.log(arr1); // ?
console.log('--- splice ---');
console.log(arr2.splice(1, 4)); // ?
console.log(arr2); // ?
実行してみると「slice は元が変わらず」「splice は元が短くなる」の違いが体感できます。
まとめ
| 特徴 | slice() | splice() |
|---|---|---|
| 元の配列を変える？ | ❌ 変えない | ✅ 変える |
| 返り値 | 抽出した部分の新配列 | 取り除いた要素の配列 |
| 使いどころ | 部分コピー、ページ分割、非破壊処理 | 要素の削除・挿入・置換など |