spliceは「切り取るだけ」じゃなかった話（sliceとの違いを整理）

spliceは「切り取るだけ」じゃなかった話（sliceとの違いを整理）

現在、オリジナルアプリ開発の中で「買い物リストの並び替え機能」を実装しています。

その中で、今まで何気なく使っていた slice に似た名前の splice というメソッドに出会いました。

正直な第一印象はこれです。

あれ？これsliceじゃないの？

でも調べていくと、全然違う役割を持っていることに気づきました。

今回はその違いを、自分の理解整理も兼ねてまとめます。

sliceとは？（今まで使っていたやつ）

まずは slice から。

構文：

slice(開始位置, 終了位置)

※終了位置は「その手前まで」（含まれない）

例：

const arr = ['りんご', 'みかん', 'バナナ'];
const newArr = arr.slice(1);

結果：

newArr = ['みかん', 'バナナ']
arr = ['りんご', 'みかん', 'バナナ'] // 元は変わらない

ポイント

• 配列を「コピー」する

• 元の配列は変更されない

• 指定した範囲を取り出す

　→ 「切り出す（コピーする）」イメージ

spliceとは？

次に splice

構文：

splice(開始位置, 削除数, 追加要素)

例：

const arr = ['りんご', 'みかん', 'バナナ'];
arr.splice(1, 1);

結果：

arr = ['りんご', 'バナナ']

ポイント

• 元の配列を「直接変更する」

• 削除・追加・置き換えができる

• 削除した要素を返す

　→「配列そのものをいじる」イメージ

spliceは削除だけじゃない

ここが今回一番の気づきでした。

例：

const arr = ['りんご', 'バナナ'];
arr.splice(1, 0, 'みかん');

結果：

['りんご', 'みかん', 'バナナ']

何が起きているか

splice(開始位置, 削除数, 追加要素)

• 削除数が0 → 削除しない

• 代わりにその位置に追加される

　→ 削除も追加もできる万能メソッドだった

sliceとspliceの違いまとめ

ハマったポイント

今回自分が混乱した原因はここでした。

• 名前が似ている

• どちらも配列を扱う

• どちらも「切るっぽい」動きをする

でも実際は

• slice = コピー

• splice = 変更

と覚えるとかなりスッキリしました。

まとめ

これまで「配列を扱うならslice」という感覚で使っていましたが、
今回の並び替え実装を通して、spliceの役割をしっかり理解することができました。

特に

• 並び替え

• 要素の移動

• 配列の編集

といった場面では、spliceがかなり強力です。

一方で、元データを壊したくない場合はsliceを使う必要があります。

今後はこの違いを意識しながら、状況に応じて使い分けできるようにしていきたいと思います！