The JavaScript Slice Method

This article is for anyone who has consistently struggled to understand the JavaScript slice method, or who confuses the slice with the splice. If you feel you are that person, jump in as I break it down to you and you gain more clarity. We will be exploring the way it works, step by step.

What Does The Word Slice Mean?

Now what does the word slice mean in English language? slice is a word that is used as a noun and as a verb depending on the context. It usually refers to the cutting of something into thin flat pieces or the appearance of a part of something.

As a noun : It is a portion of something. A thin part or portion.

As a verb : To cut into thin flat pieces.

Slice In Programming

Slice is a method usually attached to arrays and strings in JavaScript (other programming languages have methods for achieving their slice). The slice method is a method used to extract, preserve and return index values in JavaScript.

Since JavaScript is a high-level programming language which is close to the human language, the writers must have had no problem integrating the slice word into it. The slice is usually used to extract part of an array or string to form new ones respectively.

The slice is commonly used in JavaScript string and array data types. The word slice has been knocking programmers heads together since time immemorial considering its spelling similarity with the splice (another JavaScript method). Don't worry by the end of this text your knowledge would improve.

With Strings

As we know, when dealing with strings in JavaScript, characters like commas, full-stops and spaces are treated as indexes. This index count usually starts from zero (as is done in programming), but when I talk, think and explain positions I like to start my count from one. So for the purpose of this article
index 0 == position 1.
Note this as it will be very vital to your general understanding of the slice. Below let us see some code.

const str = "My name is Steve"

In the above, M is our index 0 otherwise written as str[0] and is our first position. Now the space between My and name is index 2 otherwise known as str[2], position 3 and y str[1] position 2.

Now let us go to the main issue at hand, using the slice method with strings.

Slice with Single Positive Index

Here our slice method takes a single positive index.

Counting From 1

In this scenario, we start our count from 1 and not 0.

Syntax

str.slice(chopOffPositions)

The Breakdown
chopOffPositions is what I like to call my first parameter and I'll show you why

const str = "My name is Steve"
const txt = str.slice(8)
console.log(txt)
//'is Steve'

The length of str is 16.

const str = "My name is Steve"
console.log(str.length)

So we chop off the first 8 positions which are str[0] to str[7] and return "is Steve".

Output

Slice with Two Positive Indexes

Occasionally the slice takes a second parameter which I like to call the chopOffAfter.

Syntax

str.slice(chopOffPositions, chopOffAfter)

The Breakdown
So what happens is that, it first chops off the number of positions specified in the first parameter then returns the values from the immediate position after, up to the position specified in the second parameter and chops off the rest positions after the second parameter.

const str = "My name is Steve"
const txt = str.slice(8,12)
console.log(txt)
//'is S'

We chopped of the first 8 positions str[0] to str[7] and chop off everything after the 12th position str[11].

Output

Now this above examples are when we count from 1. Next, I will show you how to interpret it with the Count from 0.

Counting From 0

For this examples, we will count from 0.

Syntax

slice(ignoreIndexBefore)

The Breakdown
ignoreIndexBefore is what I like to call my first parameter, and I'll show you why.

const str = "Hello world"
const text=str.slice(6)
// 'world'

What we do is that we ignore every index that comes before the index specified as our argument while it extracts, preserves and returns the values from the index specified.

Output

With Second Parameter
Let us see what happens when our slice takes a second parameter.

Syntax

slice(ignoreIndexBefore,ignoreIndexFrom)

The Breakdown
ignoreIndexFrom is what I like to call my second parameter and I'll show you why.

const str = "Hello world"
const text=str.slice(6,8)
//'wo'

What happens is that we chop off from the index specified as our second argument, after we have chopped off those in our first argument. So we only extract preserve and return our index 6 and index 7.

Output

Slice with Single Negative Index

When dealing with slice and negative indexes, there is some difference in the way the index values are extracted.

When dealing with a single negative index,it extracts, preserves and returns the number of indexes attached to the negative sign with the count starting from behind (right to left).

Counting From 1
Now we see what happens when we start our count from 1.

Syntax

str.slice(keepPositions)

The Breakdown
keepPositions is what I like to call my first parameter and I'll show you why.

const str = "Steve has started cooking."
const text = str.slice(-8)
console.log(text)
//'cooking.'

We count backwards starting from .(full-stop) up until c, but rather than chopping them off, in this scenario it returns them.

Output

Slice with Two Negative Indexes

The slice method with two negative indexes has the same extract philosophy with our slice with positive index arguments. Except that we count from behind, thereby flipping our two parameters, with the first becoming the second and vice versa.

Counting From 1
Let us see what happens when we count from 1.

Syntax

str.slice(chopOffAfter,chopOffPositions)

The Breakdown
We will be counting from behind(right to left), but in this case we will be following the extract, preserve and return philosophy of the slice with positive indexes.

let str = "Call me dev Steve"
let text=str.slice(-9,-5)
//'dev'

The above code returns dev and space,even though we can't see the space.

Counting from behind, it chops off the first five positions and starts to return from the 6th position up until the 9th position which is our first argument, and chops off everything after the 9th position. Remember we are counting from behind.

Output

Now this above examples are when we count from behind using 1 as start, next I will show you how to interpret it with the count from 0.

counting from 0

starting our count from index 0.

Syntax

slice(showIndexBefore)

The Breakdown
As specified earlier with our count from 1, when we have a single negative index as our argument, it actually returns those number of positions rather than chopping them off.
When we count behind(right to left) from 0, we show the indexes before the specified index parameter. Take for instance we have -6 as our argument, it returns str[0] to str[5] rather than chop them off, let us see some code.

const str=" I heard PHP devs love lambos"
const text = str.slice(-6)
console.log(text)
//'lambos'

The above code returns lambos which are the values from index 0 to index 5 before index 6 which was specified as our negative index argument.

Output

With Two Negative Indexes
The slice method with two negative indexes has the same extract philosophy with our slice with positive index arguments except that we count from behind, thereby flipping our two parameters. The first becoming the second and vice versa. In this instance we will start our count from 0.

Syntax
slice(ignoreIndexFrom,ignoreIndexBefore)

The Breakdown
So we count from behind (left to right), performing our operations on the second parameter first, we chop off indexes before it, we return the index which is our argument up to the index before the first argument. We chop off the index from the first argument and all those in front of it(will be back of it in this case since we counting from behind).

const str = "When men were boys,they played"
const text=str.slice(-3,-1)
console.log(text)
//ye

Output

Slice with a Combination of Positive and Negative Indexes.

Occasionally we might see that our slice has one negative and one positive index as arguments. I'll be using the count from 0 for my examples, but you can apply the count from 1 philosophy if you like.

Positive First, Negative Second

In this scenario our count takes a kind of convergent pattern, technically we count from left to right for the first argument and right to left(behind) for the second argument.More like ignore indexes for the first argument while counting from left to right and ignore indexes before the second argument while counting from right to left.

syntax

slice (ignoreIndexBefore, ignoreIndexBefore)

const str = "Tech is the future"
const text = str.slice(5,-7)
console.log(text)
// 'is the'

Output

So we basically count from both sides and stop where we find our indexes, we chop off whatever came before them from both sides.

Negative First,Positive Second

In this scenario our first argument is negative and our second is positive, we will count backwards (left to right) in reference to our first argument and forward in reference to our second argument.

Syntax

slice(ignoreIndexFrom, ignoreIndexFrom)

Let us now see an example.

const str = "Tech is the future"
const text = str.slice(-13,7)
console.log(text)
// 'is'

Count back:

Count front:

So we ignore from 13 upwards when counting from behind, and ignore from 7 downwards when counting normally.

Output

With Arrays

At this point you should have a good understanding of the slice, so I won't be going in depth like I did with the string slice because the concepts are all the same as long as you know that array indexes are separated by commas. You should be able to apply all you've learnt so far. You only need to know that slice returns a new array by creating a shallow copy of the old array and returning as a new array.

So I'll just post some code below, each showing the different negative index slice scenarios. The positive index is quite straightforward to understand. You can use any of the count methods(from 0 or 1) to practice.

const array=["Steve","kim","Ben","Joe","Dave"]

//one positive one negative index
const newArray=array.slice(2,-1)
console.log(newArray)


//two negative indexes
const anotherArray=array.slice(-2,-1)
console.log(anotherArray)

//one negative,one positive
const newArray2=array.slice(-4,2)
console.log(newArray2)

//one negative
const newArray3=array.slice(-4)
console.log(newArray3)

The Splice Method

The splice is a JavaScript array method, it is not a string method. The splice basically works as a value substitution method on arrays, it could also be used to delete a value outright.

Syntax

array splice(index, howMany)
array.splice(index, howMany, item1, ....., itemN)

The Breakdown
Whenever we have just two arguments index and howMany, it means it will be deleting a value.
index∆ represents the starting point for the index which we intend to change the value, while howMany specifies the number of indexes which their value will be changed or removed. item1 is the value that will be substituting the value whose index is specified as first argument. Whenever howMany is greater than 1, it means we will be changing or deleting more than one value. We maintain our index count from 0.

//delete a value
const array=["rice","meat","fish","shrimps"]
array.splice(1,1)
console.log(array)
//["rice","fish","shrimps"]

The above code starting from index 1 deletes meat alone and doesn't replace it.

//delete 2 values
const array=["rice","meat","fish","shrimps"]
array.splice(1,2)
console.log(array)
//["rice","shrimps"]

The above code starting from index 1 deletes two values meat and fish but doesn't replace them.

const array=["rice","meat","fish","shrimps"]
array.splice(1,1,"gravy")
console.log(array)
//["rice","gravy","fish","shrimps"]

The above code replaces meat with gravy.

Differences Between Slice and Splice

• Slice is used on arrays and strings, while splice is only used on arrays.

• Slice returns a new array by creating a shallow copy of the old array and returning as a new array while splice does not return a new array.

• Slice does not modify the array, while splice modifies the array.

References

To know more about the splice, follow any of the links below.

• W3schools

• MDN