JavaScript and JQuery Essentials Trainin... (56 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (29 Blogs)
  • jQuery UI Development (2 Blogs)
  • The Complete WebDeveloper (38 Blogs)
  • ReactJS (7 Blogs)
SEE MORE

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-widget-banner-bg

Splice Array in JavaScript: All you need to know Array.Splice() Method

Published on Jul 11,2019 205 Views
A Data Science Enthusiast with in-hand skills in programming languages such as... A Data Science Enthusiast with in-hand skills in programming languages such as Java & Python.
24 / 29 Blog from JavaScript

MI-new-launch

myMock Interview Service for Real Tech Jobs

myMock-mobile-banner-bg

myMock Interview Service for Real Tech Jobs

  • Mock interview in latest tech domains i.e JAVA, AI, DEVOPS,etc
  • Get interviewed by leading tech experts
  • Real time assessment report and video recording

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 - splice array in javascript - Edureka

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

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.

 

Array- splice array in javascript - edureka

 

  • Splice() 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.

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). 

Got a question for us? Please mention it in the comments section of “Splice Array in JavaScript” and we will get back to you.

Comments
0 Comments

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.