Web development or web programming gave birth to dynamic web applications. With the rise of the web, JavaScript has become one of the most important languages in today’s world. This Splice Array in JavaScript article will take you to the depths of array methods in JavaScript in the following sequence:
Introduction to JavaScript
Javascript is a cross-platform and lightweight programming language. It is not a compiled language but it is a translative language. By translative language means is responsible for converting javascript code to web browser.
JavaScript is used to create interactive websites where inactive website means that it’s of client-side validation. It is mainly used for:
- Dynamic drop-down menus
- Displaying date and time
- Pop-up windows
- Displaying clocks
From various methods in JavaScript array which performs various different function differently one of those methods is splice ()array method.
How to Splice Array in JavaScript?
Splice array in JavaScript is a method that adds or removes items to or from the array. It’s a method which changes the content by adding the new elements or removing the old once from an array.
- Splice() array method changes the original content of the array.
- It is perfectly suited for array management.
- This invoked method will help to change the content of the array.
Syntax of splice array is as follows:
array.splice(index,howmany, item1,..............,item x)
This method accepts various parameters such as:
- Index:
Index is an integer value which addresses on what position element/item need to be added or from which position element/item is to be removed. It is required every time in splice array.
- howmany:
Howmany indicates how many items should be removed from the array. If it is set to zero 0 than no element/item will be removed. Howmany is optional parameter value.
- Item 1,……….,item x:
This parameter indicates new item(S) to be added in the array. It is also an optional parameter just like howmany parameter.
Another way of declaring splice array is:
var arrDeletedItems = array.splice(start, deleteCount,item1,item2, ...,item n)
- Start:
Index/start performs same functions i.e. addresses on what position element/item need to be added or from which position it is to be removed and are always required in splice()method syntax.
- Delete-count:
Delete-count also perform similar function just like howmany in the above systax i.e. how many items to be removed from the array. It is optional parameter value.
- Item 1,……..,item n:
Item1,…..,item n parameter indicates same functions as listed above. It is also optional parameter in syntax of deletion.
Splice() Method: Example
Example 1
Remove 0 (zero) elements from index 2 and insert “drum”
Input:
var myFish = ['pen', 'paper', 'stone', 'pencil']; var removed = myFish.splice(2, 0, 'drum'); // myFish is ["pen", "paper", "drum", "stone", "pencil"] // removed is [], no elements removed
Output:
Pen, paper, drum, stone, pencil
Example 2
Remove 0(zero) elements from Index 2 and insert “drum” & “guitar”
Input:
var myFish = ['pen', 'paper', 'stone', 'pencil']; var removed = myFish.splice(2, 0, 'drum', 'guitar'); // myFish is ["pen", "paper", "drum", "guitar", "stone", "pencil"] //removed is [], no elements removed
Output:
pen,paper,drum, guitar, stone , pencil
Example 3
Remove 1 element from index 3
Input:
var myFish = ['pen', 'paper', 'drum', 'stone', 'pencil']; var removed = myFish.splice(3, 1); // removed is ["stone"] // myFish is ["pen", "paper”, "stone", "pencil"]
Output:
Pen, paper , stone , pencil
Example 4
Remove 1 element from index 2 and insert “trumpet”
Input:
var myFish = ['angel', 'clown', 'drum', 'sturgeon']; var removed = myFish.splice(2, 1, 'trumpet'); // myFish is ["angel", "clown", "trumpet", "sturgeon"] // removed is ["drum"]
Output:
Angel, clown, trumpet, sturgeon
Example 5
Remove 2 element from index 0 and insert “pen” “parrot” “ink”
Input:
var myFish = ['angel', 'clown', 'trumpet', 'sturgeon']; var removed = myFish.splice(0, 2, 'pen', 'parrot', 'ink'); // myFish is ["pen", "parrot", "ink", "trumpet", "sturgeon"] // removed is ["angel", "clown"]
Output:
Pen, parrot, ink, trumpet, sturgeon
Example 6:
Remove 2 elements from index 2
Input:
var myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon']; var removed = myFish.splice(myFish.length - 3, 2); // myFish is ["parrot", "anemone", "sturgeon"] // removed is ["blue", "trumpet"]
Output:
Parrot, anemone, sturgeon
Example 7
Remove 1 element from 2 index
Input:
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(-2, 1); // myFish is ["angel", "clown", "sturgeon"] // removed is ["mandarin"]
Output:
Angel, clown, sturgeon
Example 8
Remove all elements after index 2
Input:
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon']; var removed = myFish.splice(2); // myFish is ["angel", "clown"] // removed is ["mandarin", "sturgeon"]
Output:
Angel, clown
These were the different ways of using splice array in javascript. Now let’s have a look at an example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to remove two elements from the array.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi"];
document.getElementById("demo").innerHTML = fruits;
function myFunction()
{
fruits.splice(2, 2);
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Output:
Banana, Orange, Kiwi
The above code is an example of removing two elements where fruit.splice(2,2) removes two elements from after the index 2 as it removes apple and mango after the index 2 and change the array as shown in the output. You can also remove/add elements/items from anywhere in the array which can give the output of exactly different new array
Let’s take a look at another example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add and remove elements.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction()
{
fruits.splice(2, 1, "Lemon", "Kiwi");
document.getElementById("demo").innerHTML = fruits;
}
</script>
</body>
</html>
Output:
Banana, Orange, Lemon, Kiwi, Mango
The above code is another example of splice() method in which the addition of two new elements is shown. Two new elements are added after index 2 which means after banana and orange and gives a new array as an output.
With this, we have come to the end of our article. I hope you understood how Splice array method is used in JavaScript.
Check out the Angular Certification Training course online by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe. Angular is a JavaScript framework that is used to create scalable, enterprise, and performance client-side web applications. With Angular framework adoption being high, performance management of the application is community-driven indirectly driving better job opportunities.
Now that you know about JavaScript Array Methods, check out the Web Development Certification Training by Edureka. Web Development Certification Training will help you Learn how to create impressive websites using HTML5, CSS3, Twitter Bootstrap 3, jQuery and Google APIs and deploy it to Amazon Simple Storage Service(S3).
If you want to get trained in React and wish to develop interesting UI’s on your own, then check out the Best React Course by Edureka, a trusted online learning company with a network of more than 250,000 satisfied learners spread across the globe.
Learn the latest trends and techniques in UI/UX design through UX Design Course.
Got a question for us? Please mention it in the comments section of “Splice Array in JavaScript” and we will get back to you.