JavaScriptのsliceとspliceがややこしいので解説

初めに

sliceとsplice…?
この2つは名前が似ているので学習当初は何がなんだかわかりませんでした。
なので配列を扱う時のsliceとspliceについて解説していきます。

結論

slice・・・配列から要素を削除しない、要素を抽出するだけ
splice・・・配列から要素を削除する、置き換えたり新しい要素を追加したりもできる

やってみる

適当な配列を用意します

const users = [
      { id:1, name: 'Mick', age: 34, hobby: "cycling" },
      { id:2, name: 'Isaac', age: 40, hobby: "music" },
      { id:3, name: 'Galileo', age: 21, hobby: "guiter" },
      { id:4, name: 'Marie', age: 18, hobby: "climbing" },
      { id:5, name: 'Johannes', age: 6, hobby: "toy" },
    ];

slice

まずはsliceから😛

const slicedArray = users.slice(0,1)
console.log(slicedArray)
// 0: {id: 1, name: "Mick", age: 34, hobby: "cycling"}

usersの中身がどうなっているか確認しましょう

console.log(users)
// 0: {id: 1, name: "Mick", age: 34, hobby: "cycling"}
// 1: {id: 2, name: "Isaac", age: 40, hobby: "music"}
// 2: {id: 3, name: "Galileo", age: 21, hobby: "guiter"}
// 3: {id: 4, name: "Marie", age: 18, hobby: "climbing"}
// 4: {id: 5, name: "Johannes", age: 6, hobby: "toy"}

特に配列の中身は変わっていませんね。
つまりsliceは配列の中身を抽出しているだけです。

splice

次にspliceです😛

// spliceの場合
const spliceArray = users.splice(0,1)
console.log(spliceArray)
// 0: {id: 1, name: "Mick", age: 34, hobby: "cycling"}

出力結果がsliceと同じですね・・。それ故にややこしい・・。
てなわけで元の配列を確認しましょう

console.log(users)
// 0: {id: 2, name: "Isaac", age: 40, hobby: "music"}
// 1: {id: 3, name: "Galileo", age: 21, hobby: "guiter"}
// 2: {id: 4, name: "Marie", age: 18, hobby: "climbing"}
// 3: {id: 5, name: "Johannes", age: 6, hobby: "toy"}

// id: 1のユーザーが削除されている

先ほどspliceして取り出したユーザーが配列から消えていますね。
つまりspliceは配列から要素を消したりします（新しい要素を追加したり置き換えたりもできます）

まとめ

slice・・・配列から要素を抽出する（元の配列は変わらない）
splice・・・配列から消したり置き換えたりする（元の配列が変わる）

参考

https://qiita.com/112KA/items/3748ba88160a02f518c1
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/splice