In this guide, you will be able to know what is splice and slice at the same time. Besides that, we will explore example programs that demonstrate how these methods work.
What is Splice?
This function directly modifies the original array, making it mutable.
It accepts various parameters, such as the starting index, the optional number of elements to be removed, and the optional elements to be added.
The syntax for this method is as follows:
array.splice(start, deleteCount, item1, item2, ...)
start: The index from which to begin making changes to the array. If a negative number is provided, it counts from the end of the array.
deleteCount: The number of elements to be taken out from the array. If set to 0, no elements are removed.
item1, item2, …: Optional. Elements to be added to the array at the specified position.
Here is the example code that demonstrates how splice() works.
let fruits = ['apple 🍎', 'banana 🍌', 'orange 🍊', 'mango 🥭']; // Remove 'banana 🍌' from the array fruits.splice(1, 1); console.log(fruits); // Output: ['apple 🍎', 'orange 🍊', 'mango 🥭'] // Add 'pear' and 'grape' at index 2, without removing any elements fruits.splice(2, 0, 'pear 🍐', 'grape 🍇'); console.log(fruits);
(3) ["apple 🍎", "orange 🍊", "mango 🥭"...] (5) ["apple 🍎", "orange 🍊", "pear 🍐",...]
What is slice?
It takes in two parameters: the starting index (optional) and the ending index (optional).
The syntax for slice() is as follows which is for array and string:
- start: The index at which to begin extraction. If a negative number is provided, it counts from the end of the array or string.
- end: Optional. The index at which to end extraction (excluding the element at this index). If not provided, the extraction extends until the end of the array or string. If a negative number is provided, it counts from the end of the array or string.
Here’s an example that demonstrates the usage of slice():
let fruits = ['apple 🍎', 'banana 🍌', 'orange 🍊', 'mango 🥭']; let slicedFruits = fruits.slice(1, 3); console.log(slicedFruits); // Output: ['banana 🍌', 'orange 🍊']
["banana 🍌", "orange 🍊"]
Here are common Use Cases for splice vs slice().
Use Cases of splice
- Removing elements from array:
const numbers = [10, 20, 30, 40, 50]; const removed = numbers.splice(2, 2); console.log(numbers); console.log(removed);
[10, 20, 50] [30, 40]
- Adding elements into array:
const fruits = ['apple 🍎', 'banana 🍌', 'cherry 🍒']; fruits.splice(2, 0, 'orange 🍊', 'grape 🍇'); console.log(fruits);
["apple 🍎", "banana 🍌", "cherry 🍒...]
- Replacing elements into an array:
const animals = ['cat', 'dog', 'elephant']; animals.splice(1, 1, 'lion'); console.log(animals); // ['cat', 'lion', 'elephant']
["cat", "lion", "elephant"]
Use Cases for slice():
- Extracting a portion of an array:
const numbers = [1, 2, 3, 4, 5]; const subArray = numbers.slice(1, 4); console.log(subArray); // [2, 3, 4]
- Creating a shallow copy of an array:
const original = [1, 2, 3, 4, 5]; const copy = original.slice(); console.log(copy); // [1, 2, 3, 4, 5]
- Converting an array-like object to an array:
const arrayLike = document.querySelectorAll('.item'); const convertedArray = Array.prototype.slice.call(arrayLike); console.log(convertedArray); // Array of selected elements
Remember, splice modifies the original array and allows for adding, removing, and replacing elements, while slice creates a new array without modifying the original.