When dealing with JavaScript Array we need all the help we can get. One of the methods that we can use is the JavaScript slice. .slice()method returns a copy of the original array into a new array, without modification of the original array.
.slice() is accepting two parameters. The first one is starting index and the second one is ending index. Without an index, .slice()will copy an entire array. The starting index is telling .slice() from which element it should start, and ending index is telling .slice()up to (excluding) index it should copy.
Primary use of JavaScript slice method
As we mentioned earlier .slice()method is used for copying the entire array, or parts of the array.
let cars = ['Audi', 'Volvo', 'Ferrari', 'Ford', 'Shelby']; //We can copy an entire array using pure .slice() let allCars = cars.slice(); //Result: //(5) ['Audi', 'Volvo', 'Ferrari', 'Ford', 'Shelby'] //We can copy only part of the array let europeanCars = cars.slice(0,3); //Result: //(3) ['Audi', 'Volvo', 'Ferrari'] let americanCars = cars.slice(3,5) //Result: //(2) ['Ford', 'Shelby']
Also, we can use only starting index. That indicates from where we want to copy an array, and .slice()will copy everything to the end (including the last element).
let languages = ['JS', 'PHP', 'Ruby', 'Phyton', 'Rust', 'Go', 'C', 'C++']; let lastThree = languages.slice(5); //Result: //(3) ['Go', 'C', 'C++']
.slice()method accepts negative index. When we use negative index, it starts to count from an end. This means that the last elements is index -1, second to last is index -2, etc. (NOTE: When we count from the start index starts at 0, but when we count from the back index starts at -1) Also, we can combine positive index and negative index.
let pets = ['cat', 'dog', 'hamster', 'bunny', 'fish', 'parrot'] //Let's get last two using negative index let lastTwo = pets.slice(-2); //Result: //(2) ['fish', 'parrot'] //We can also combine positive and negative index //Let's copy everything from index 1 to, second to last, index -2 let combined = pets.slice(1, -2); //Result: // (3) ['dog', 'hamster', 'bunny']
Even if we use negative index as an ending point, .slice()will copy everything up until that index, same as with only positive index.
Using JavaScript slice method for strings
Did you know that every string is just an array of characters? Knowing that it will be much easier to understand that we can use .slice() method on strings.
.slice()can be used to copy part of the string from a certain character index.
let string = 'I want to slice this string!'; //Let's copy entire string let wholeString = string.slice(); //Result: //I want to slice this string! let partString1 = string.slice(0,6); //Result: //I want let partString2 = string.slice(7, -1); //Result: //to slice this string
Pretty cool, huh?
Slice method for other stuff
Now, that we learned this we can start using .slice()for other stuff. E.g. we can convert a list of strings into an array.
function convertToArray() {
return Array.prototype.slice.call(arguments)
}
//This will return array of numbers
let list1 = convertToArray(1, 2, 3)
//Result:
//(3) [1, 2, 3]
//This will return an array of letters
let list2 = convertToArray('A', 'B', 'C')
//Result:
//(3) ['A', 'B', 'C']
If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Guide to JavaScript data types