How to Use the Javascript Slice Method

The Javascript slice() method will not alter or change the original data. This tutorial will teach you how to utilize the Javascript slice technique and how to make use of its immutable potential.

What is the javascript slice method?

Simply said, the javascript slice function is a built-in array or string method that returns a shallow copy of a portion of an array into a new array object, where 'start' and 'end' are the array's indices. There will be no modifications to the initial array.

const language = ["javascript", "java", "ruby", "rust", "python"];
console.log(language.slice(2));
// ['ruby', 'rust', 'python']

We slice at index 2 using a zero-indexed base, which yields a fresh new array containing the sliced element. But what if we examine the original array (language)? Will it be altered? The javascript slice technique, unlike the javascript splice function, does not alter or affect the original data.

How to use the Javascript slice method

The Javascript slice method is rather simple to use; however in order to fully comprehend it, we would emphasize its syntax.

What is the syntax for this? This syntax is written by simply surrounding the word 'slice' with a parenthesis '()' as follows:

slice()

Because this is a method, it accepts arguments, which allows you greater flexibility over what you can do with an array using the slice function.

They are as follows:

1. Start
2. End

The start parameter, which simply indicates the index at which the slice method should begin, can be passed to the slice function. To review from the previous example, the slice method accepts 2 as an input, which simply means starting from index 2. If the start argument is not specified, the index will be set to 0. The end argument can also be sent to the slice method, but it is dependent on the start parameter to function properly. The end argument instructs the array at which index it should finish extracting the element. It does this by not including the end, but only up to the finish. If the end argument is not specified, the complete array length is returned.

slice(start)
slice(start,end)

Using the slice method: suppose we have an array containing several sorts of programming languages and we want to choose three elements from the array. We simply write the slice(1,4) function, supplying two index-based parameters, the start, and end. Extraction would begin with the specified index, 1, and conclude with 4, but instead of returning the precise fourth element, it would provide the element before the fourth element.

Here's how it's done:

const language = ["javascript", "java", "ruby", "rust", "python"];
console.log(language.slice(1,4));
// ['ruby', 'rust', 'python']

The new array was returned without modifying the existing array.

const language = ["javascript", "java", "ruby", "rust", "python"];
console.log(language.slice(1,4));

// ['java', 'ruby', 'rust']

console.log(language);
// ['javascript', 'java', 'ruby', 'rust', 'python']

Using the slice method on non-arrays

The javascript array can be used in the following areas; however, it should be noted that the slice method can also be used on non-arrays.

1. Using the Javascript slice method on objects.

2. Using the Javascript slice method on sparse array.

3. Using the Javascript slice method to convert non-arrays to array.

   Using the Javascript slice method on objects

   The javascript slice method works on objects by first considering the length of the object's property, then reading the integer-key properties from beginning to end. And put them in a new array. It uses the call() method.

   const arrayLike = {
     length: 3,
     0: 2,
     1: 3,
     2: 4,
   };
   console.log(Array.prototype.slice.call(arrayLike, 1, 3));
   //  [3, 4]
   

   Using the Javascript slice method on sparse array

   When the javascript slice method is used on a sparse array, the array returned from slice() may be sparse if the source is sparse.

   console.log([1, 2, , 4, 5].slice(1, 4))
   
   // [2, empty, 4]
   

   Using the Javascript slice method to convert non-arrays to an array

   To construct a utility function that transforms an array-like object into an array, utilize the Javascript slice method, as well as the call(), and bind() methods.

const sliceEl = Function.prototype.call.bind(Array.prototype.slice);

function list() {

  return sliceEl(arguments);

}

const listed = list(1, 2, 3)

console.log(listed)

//[1, 2, 3]

FAQs

What is the difference between slice and splice method in Javascript?

Slice is used to create a new array from the original array, whereas splice is used to add/remove elements from the original array. In the case of a slice, the changes are not reflected in the original array; however, in the case of a splice, the changes are reflected in the original array.

What is the similarity between slice and splice method?

The major similarity between them is that they are both javascript array’s methods.

When do I use the slice method?

If you don't want the original data to be modified or mutated while executing a task, the slice approach is the best way to go. This is a typical approach in ReactJs.

Takeaways

Finally, the javascript slice() method is a way for copying. It does not change the original array but instead provides a shallow duplicate with some of the same items as the original array. They accept two optional parameters, 'start' and 'end', and pluck elements from the array depending on these parameters. They are applicable to non-arrays. Objects, sparse-array, and so forth.