The slice() method returns a shallow copy of a portion of an array into a new array object. You can specify the start and end indexes to extract a sub-array.
Example 1: Basic Slicing
// An array of letters is created.
const letters = ['a', 'b', 'c', 'd', 'e'];
// A new array is created by slicing from index 2 to 4.
const slicedLetters = letters.slice(2, 4);
// The new array is logged to the console.
console.log(slicedLetters); // Output: ['c', 'd']
Explanation: This example extracts elements from index 2 up to (but not including) index 4 of the letters array. The original letters array is not modified.
Example 2: Slicing from the Beginning
// An array of numbers is created.
const numbers = [10, 20, 30, 40, 50];
// A new array is created by slicing the first 3 elements.
const firstThree = numbers.slice(0, 3);
// The new array is logged to the console.
console.log(firstThree); // Output: [10, 20, 30]
Explanation: By starting the slice at index 0, you can easily extract a specific number of elements from the beginning of an array.
Example 3: Slicing to the end
// An array of fruits is created.
const fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple'];
// A new array is created by slicing from index 2 to the end.
const endFruits = fruits.slice(2);
// The new array is logged to the console.
console.log(endFruits); // Output: ['Orange', 'Mango', 'Pineapple']
Explanation: If the end index is omitted, slice() will extract all elements from the start index to the end of the array.
Example 4: Using Negative Indexes
// An array of weekdays is created.
const weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
// A new array is created by slicing the last two elements using negative indexes.
const weekendApproaching = weekdays.slice(-2);
// The new array is logged to the console.
console.log(weekendApproaching); // Output: ['Thu', 'Fri']
Explanation: Negative indexes allow you to slice from the end of the array. -1 refers to the last element, -2 to the second to last, and so on.
Example 5: Creating a Shallow Copy
// An array of objects is created.
const originalArray = [{ id: 1 }, { id: 2 }];
// A shallow copy of the entire array is created using slice().
const copiedArray = originalArray.slice();
// The copied array is logged.
console.log(copiedArray); // Output: [{ id: 1 }, { id: 2 }]
Explanation: Calling slice() with no arguments is a quick and effective way to create a shallow copy of an entire array.
Example 6: Slicing with Negative Start and End
// An array of numbers is created.
const dataPoints = [1, 2, 3, 4, 5, 6, 7, 8, 9];
// A slice is taken from the 4th to last element up to the 2nd to last.
const middleSlice = dataPoints.slice(-4, -1);
// The new array is logged to the console.
console.log(middleSlice); // Output: [6, 7, 8]
Explanation: You can combine negative start and end indexes to extract a specific range of elements from the end of an array.
Example 7: Using slice() in a Pagination Function
// A function to get a "page" of items from an array.
function getPage(array, pageNumber, pageSize) {
const startIndex = (pageNumber - 1) * pageSize;
const endIndex = startIndex + pageSize;
return array.slice(startIndex, endIndex);
}
const products = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
const page2 = getPage(products, 2, 3);
// The second page of products is logged.
console.log(page2); // Output: ['D', 'E', 'F']
Explanation: This example demonstrates a practical use case for slice() in implementing pagination, where you display a subset of a larger dataset.