In JavaScript, the slice and splice methods are both used to manipulate arrays, but they serve different purposes and behave quite differently. Understanding the distinction between them is essential for effectively managing array data.

1. Array slice() Method

• Purpose: The slice() method is used to create a shallow copy of a portion of an array into a new array, without modifying the original array.
• Syntax: array.slice(start, end)
• Parameters:
  • start: The index at which to begin extraction. The element at this index is included in the new array. If start is omitted, it defaults to 0.
  • end: The index at which to end extraction. The element at this index is not included in the new array. If end is omitted, slice() extracts through the end of the array.
• Returns: A new array containing the extracted elements.

Example:

let fruits = ["Apple", "Banana", "Cherry", "Orange", "Grapes"];
let citrus = fruits.slice(2, 4);

console.log(citrus); // Output: ["Cherry", "Orange"]
console.log(fruits); // Output: ["Apple", "Banana", "Cherry", "Orange", "Grapes"]

• Explanation: In this example, slice(2, 4) extracts elements from index 2 up to (but not including) index 4. The original fruits array remains unchanged.

• Negative Indices: You can use negative indices with slice() to start counting from the end of the array.

Example:

let lastTwo = fruits.slice(-2);

console.log(lastTwo); // Output: ["Orange", "Grapes"]

2. Array splice() Method

• Purpose: The splice() method is used to change the contents of an array by removing, replacing, or adding elements. It modifies the original array.
• Syntax: array.splice(start, deleteCount, item1, item2, ..., itemN)
• Parameters:
  • start: The index at which to start changing the array.
  • deleteCount: The number of elements to remove starting from the start index. If deleteCount is 0, no elements are removed.
  • item1, item2, ..., itemN: The elements to add to the array, starting from the start index. If no elements are specified, splice() only removes elements.
• Returns: An array containing the removed elements, if any.

Example:

let fruits = ["Apple", "Banana", "Cherry", "Orange", "Grapes"];
let removed = fruits.splice(2, 2, "Pineapple", "Mango");

console.log(fruits); // Output: ["Apple", "Banana", "Pineapple", "Mango", "Grapes"]
console.log(removed); // Output: ["Cherry", "Orange"]

• Explanation: In this example, splice(2, 2, "Pineapple", "Mango") starts at index 2, removes 2 elements ("Cherry" and "Orange"), and inserts "Pineapple" and "Mango" at that position. The original fruits array is modified, and the removed elements are returned in an array.

• Adding Without Removing: You can use splice() to add elements without removing any by setting deleteCount to 0.

Example:

fruits.splice(2, 0, "Strawberry");

console.log(fruits); // Output: ["Apple", "Banana", "Strawberry", "Pineapple", "Mango", "Grapes"]

• Removing Without Adding: If you only want to remove elements, simply omit the items to add.

Example:

let moreRemoved = fruits.splice(3, 2);

console.log(fruits); // Output: ["Apple", "Banana", "Strawberry", "Grapes"]
console.log(moreRemoved); // Output: ["Pineapple", "Mango"]

Summary:

• slice(): Creates a shallow copy of a portion of an array, returning a new array without modifying the original. It's useful for extracting a section of an array.
• splice(): Modifies the original array by adding, removing, or replacing elements. It returns an array of removed elements if any. It's useful for altering the contents of an array directly.