Slice() method in javascript

There are lots of Array methods in javascript and slice() is one of them.
In this blog we will be learning what is slice() method and how to use it in javascript and javascript based frameworks like react, angular, vue, node.js and more .

What is slice() Method ?

Imagine you have a big box with lots of balls inside.

Now, you want to take out some balls and put them in a smaller box. So, you take out a few balls from the big box and put them in the smaller box.

The slice() method works the same way with arrays. You have a big array with lots of items inside.

You want to take out some items and put them in a new array. So, you use the slice() method to take out the items you want and put them in a new array.

Just like you didn’t change the big box when you took out balls, the slice() method doesn’t change the original array when you take out items. It only creates a new array with the items you took out.

Understanding Array basics :-

To understand and use the slice() method effectively, it’s helpful to have a basic understanding of how arrays work and how array indexes are used.

An array is a collection of items that are stored in a specific order, and each item in the array is assigned an index number that represents its position in the array. The index of the first item in the array is always 0, the second item is 1, and so on.

For example, let’s say we have an array of fruits:

let fruits = ["apple", "banana", "orange", "mango", "kiwi"]

The index of the first fruit “apple” is 0, the index of “banana” is 1, the index of “orange” is 2, and so on.

How to use slice() ?

Here is the syntax for using the slice() method:

array.slice(start, end)

• `start` is the index number of the first item that you want to include in the new array. This is an optional parameter. If you don’t specify a start parameter, the slice will start from the beginning of the array (index 0).
• `end` is the index number of the item that you want to exclude from the new array. This is also an optional parameter. If you don’t specify an end parameter, the slice will include all items from the start index to the end of the array.

Simple Example

For example, let’s use the slice() method to extract a section of the `cities` array:

let cities = ["Mumbai", "Delhi", "Tokyo", "Ranchi", "Peris"]
console.log(cities.slice(1, 3));
// expected output Array ["Delhi", "Tokyo"]

The slice starts at index 1 which is the second element in the array, “Delhi”, and goes up to index 3, which is the fourth element in the array, “Ranchi”. However, since the ending index of the slice is not included, “Ranchi” is not part of the result.

Therefore, the expected output is an array containing the elements between index 1 and 2 (which are “Delhi” and “Tokyo”) and not including the element at index 3 (“Ranchi”). The output of this code would be: ["Delhi", "Tokyo"].

Splice() Method In javascript

The splice() method in JavaScript allows you to add, remove, or replace elements from an array.

To understand how it works, let’s imagine you have a bag of marbles (which is like an array). You can use the splice() method to take out some marbles from the bag, add some new ones, or replace some of them.

For example, if you want to take out two marbles from the bag starting from the third marble, you can use splice(2, 2). This means starting from the third marble (because the first marble is at index 0), you want to remove two marbles.

Or, if you want to add two marbles to the bag starting from the third position, you can use splice(2, 0, "blue", "green"). This means starting from the third marble, you want to add two new marbles (“blue” and “green”) to the bag.

So the splice() method in JavaScript is a way to modify the contents of an array by adding, removing, or replacing elements.

Simple Example

Here’s a simple example of how the splice() method works in JavaScript:

Let’s say you have an array of sports:

let sports = ["Cricket", "Football", "Hockey", "Tennis"]

And you want to remove the “Hockey” from the array. You can use the splice() method like this:

sports.splice(2, 1);

This means you want to start at the index of 2 (which is the “Hockey” element), and remove 1 element.

Now, if you log the `sports` array, you will see that “Hockey” has been removed:

console.log(sports); // ["Cricket", "Football", "Tennis"]

Alternatively, you can also use the `splice()` method to add elements to an array. For example, let’s say you want to add “Rugby” and “Kabaddi” to the sports array, after the “Football” element. You can use the splice() method like this:

sports.splice(2, 0, "Rugby", "Kabaddi");

This means you want to start at the index of 2 (which is after the “Football” element), and add 2 elements (“Rugby” and “Kabaddi”) to the array.

Now, if you log the `sports` array again, you will see that “Rugby” and “kabaddi” have been added to the array:

console.log(sports); // ["Cricket", "Football", "Rugby", "Kabaddi", "Tennis"]

“This blog post aimed to provide a clear explanation of the slice() and splice() methods in JavaScript. It is my hope that you were able to gain a better understanding of these methods through this blog. If you have any further questions or concerns, please do not hesitate to let me know.”