Javascript built-in methods help a lot in saving time and reducing the number of lines for the logic if we were to implement it from the scratch.

There are two array methods - slice, splice which appear to do the same functionality but they are completely different. So, let's dive in and clear out all the confusion around these methods.

Array indexing starts from 0, not 1. So numbers = [101,12,73], to access first element, numbers[0] will give you 101

slice

Suppose you were to photocopy a book from the third chapter till the end of a book. Then you would get a separate copy with all the chapters except the first and second chapters with you. Chapters in the original book would remain the same, only you created a separate copy for yourself without modifying the original book. The same holds good for the slice method.

let bookIkigaiChapters = ["I.Ikigai", "II.Antiaging Secrets", "III.From Logotherapy to Ikigai", "IV.Find Flow in Everything You Do","V.Masters of Longevity"];
let bookIkigaiFromThirdChaptersCopy = bookIkigaiChapters.slice(2);

After slicing:

bookIkigaiFromThirdChaptersCopy = [ "III.From Logotherapy to Ikigai", "IV.Find Flow in Everything You Do", "V.Masters of Longevity"]
bookIkigaiChapters = ["I.Ikigai", "II.Antiaging Secrets", "III.From Logotherapy to Ikigai", "IV.Find Flow in Everything You Do", "V.Masters of Longevity"]

Syntax

slice() //copies all the chapters of the book if nothing specified
slice(start-index) //copies the chapters of the book from `start-index` till the end
slice(start-index, end-index) //copies the chapters from `start-index` till the `end- index` excluding it.

Takeaway

• Original array is not modified(bookIkigaiChapters remain the same), a new array(bookIkigaiFromThirdChaptersCopy) with extracted elements is created.

• Negative start/end index means counting starts from the end. Example:

• bookIkigaiChapters.slice(-1) indicates copy last chapter.

• bookIkigaiChapters.slice(1, -2) indicates start copying from the second chapter till the last second chapter excluding it.

splice

Consider you have a deck of books. You think of adding a newly released book by your favourite author to your book deck. Then later you consider exchanging the few books you have read with your friends. After all this, you consider selling the two books to someone else in need. Why am I asking to think about book deck 🤔? That is what splice method does.

let booksDeck= ["The Psychology of Money", "Ikigai", "You Can Win", "The 5AM Club", "So Good They Can't Ignore You"];
booksDeck.splice(1,0, "Atomic Habits");

After splicing:

booksDeck= ["The Psychology of Money", "Atomic Habits", "Ikigai", "You Can Win", "The 5AM Club", "So Good They Can't Ignore You"]
booksDeck.splice(0,2,"Hooked","Think and Grow Rich")

After splicing second time

booksDeck= ["Hooked","Think and Grow Rich", "Ikigai", "You Can Win", "The 5AM Club", "So Good They Can't Ignore You"]
booksDeck.splice(-2,2)

After splicing third time

booksDeck= ["Hooked","Think and Grow Rich", "Ikigai", "You Can Win"]

Syntax

splice(start-index) // start selling(removing) all the books from `start-index`
splice(start-index, deleteBookCount) // start removing `deleteBookCount` number of books from `start-index`
splice(start-index, deleteBookCount, NewBook1) // start removing `deleteBookCount` number of books from `start-index` and replace start-index place with `NewBook1`
splice(start-index, deleteBookCount, NewBook1, NewBook2, NewBookN) // start removing `deleteBookCount` number of books from `start-index` and replace start-index with NewBook1, NewBook2, ...upto NewBookN

Takeaway

• Number of books in the Deck is modified i.e, the Original array is modified, unlike the slice method.
• Negative start index means counting starts from the end. Example: booksDeck.splice(-1,1, "Wings of Fire") indicates the first book from the bottom of the deck is replaced with a new book "Wings of Fire".

Hope that has cleared confusion between the splice and slice Javascript methods.

Take care,

Meghana

Let's connect on twitter