sliceとspliceメソッドの違いについて

この記事の目的

• sliceとspliceメソッドの違いをイメージで大まかに理解する
• 引数の指定の仕方の違いを理解する
• 返値の違いを理解する

JavaScriptを学び始めて、配列や文字列に使うメソッドであるsliceと spliceの違いについて、どっちがどっち？引数の指定の仕方が少し違ってた気がするけど、どうだったっけ？と何度か調べ直すことがありました。
記憶を定着させて、調べ直す必要がなくなるようにするために、自分なりに違いをストーリー仕立てにしてまとめてみました。

ここでは、配列に対する処理を考えます。まず、配列を一本のロープに見立てます。

slice

• 構文: slice(start, end)

　　スライサーから想像できる通り、ロープを必要な長さだけ切り取りたい時に使います。このメソッドは、失敗しないように元のロープと同じ長さのロープを用意して切ってくれます。
　　切り取るには、どこからどこまで切り取るのかという情報が必要です。そのため引数は取り出す起点(start)と終点(end)のインデックス番号を定めます。
　ロープを切る時、終点にマジックで印をつけます。切り取った後のロープにマジックの印は不要なので、終点(end)は含みません。

• 返値 : インデックス番号endは含まず、start番目から(end - 1)番目までの要素を含む新しい配列
• 元の配列: 変わらない

参考: sliceのMDN

splice

• 構文: splice(start, deleteCount, item)

　　sliceを改良してさらに便利に作り替えました。名称もリニューアルし、sliceにplusのpが加わりました。
　　spliceは英語で「繋ぎ合わせる」という意味です。つまり、ロープの一部を切り取って、残った部分を繋ぎ合わせたい時やロープに金具など追加したいitemがある時に使います。まずは切り取る起点(start)を指定します。そこからいらない部分を起点から何個目までか(deleteCount)を指定します。最後に金具を取り付けるために追加したいitemを指定します。
　　spliceの新機能により、ロープを狩猟のための仕掛けなどの全く新しい道具に変換することができるようになりました。ただし、材料は使い切ってしまうので、元のロープに戻すことはできません。

• 返値: 取り除かれた要素を含む配列
• 元の配列: 取り除かれた要素を含まない配列

　　
参考: spliceMDN

まとめ

• slice : 元の配列や文字列から、必要な箇所（インデックス番号がstartから(end - 1)までの要素)を取り出すメソッド。返り値は、取り出された新しい配列で、元の配列は変わらない。

• splice : 元の配列や文字列から、不要部分を取り除いたり、新しい要素を繋ぎ合わせるメソッド。返り値は、取り除かれた要素を含む配列。元の配列は、取り除かれた要素を含まず、新しい要素が加わった配列。
  　　　　削除・・・インデックス番号 start から deleteCount 個目までの要素
  　　　　追加 ・・・ インデックス番号 start の位置

　　　最後まで読んでくださって、ありがとうございました。