When working with arrays in JavaScript, two commonly used methods are slice() and splice(). While they might seem similar at first glance, they serve very different purposes. In this article, we’ll break down their differences, usage, and when to use each one.

🔹 What is slice()?

The slice() method is used to extract a portion of an array without modifying the original array. It returns a new array containing the selected elements.

Syntax 

array.slice(start, end)
  • start: The index where extraction begins.
  • end (optional): The index where extraction stops (not included in the result).

Example 

let fruits = ["apple", "banana", "cherry", "date"];
let citrus = fruits.slice(1, 3);

console.log(citrus); // ["banana", "cherry"]
console.log(fruits); // ["apple", "banana", "cherry", "date"] (unchanged)

📌 Key Takeaways:

  • Returns a new array.
  • Does not modify the original array.
  • The end index is not included.

🔹 What is splice()?

The splice() method is used to modify the original array by adding or removing elements at a specified position.

Syntax 

array.splice(start, deleteCount, item1, item2, ...)
  • start: The index where the modification begins.
  • deleteCount: The number of elements to remove.
  • item1, item2, ...: Elements to be added (optional).

Example: Removing Elements 

let colors = ["red", "blue", "green", "yellow"];
colors.splice(1, 2);

console.log(colors); // ["red", "yellow"]

Here, it removes 2 elements starting from index 1 ("blue" and "green").

Example: Adding Elements 

let numbers = [1, 2, 3, 5];
numbers.splice(3, 0, 4);

console.log(numbers); // [1, 2, 3, 4, 5]

Here, we insert 4 at index 3 without removing anything.

📌 Key Takeaways:

  • Modifies the original array.
  • Can remove elements.
  • Can add elements.

Conclusion

  • slice() returns a new array without modifying the original.
  • splice() modifies the original array by adding/removing elements.
  • Choose slice() when you need a portion of an array without altering it.
  • Use splice() when you need to change the array in place.

Understanding these differences will help you write cleaner, more efficient JavaScript code!

Happy Coding! 🤩

If you have any questions or suggestions, feel free to connect with me on LinkedIn or email me at m.ahmar2496@gmail.com. You can also check out my Portfolio.