UI UX Design (36 Blogs) Become a Certified Professional
AWS Global Infrastructure

Front End Web Development

Topics Covered
  • AngularJS (57 Blogs)
  • The Complete WebDeveloper (35 Blogs)
  • ReactJS (25 Blogs)
  • JavaScript and JQuery Essentials Training (2 Blogs)
SEE MORE

How to Implement Splice method() in Javascript?

Last updated on Jun 08,2023 1.3K Views


Replacing and Adding elements is one of the most important aspects of JavaScript. In this article, we will understand the Splice method() in Javascript in the following manner:

 

What is Splice Method() in JavaScript?

The splice() method in JavaScript changes the contents of an array by removing or replacing existing elements and/or adding new elements.

Splice Method() in JavaScript

 

Syntax

array.splice(index, howMany, [element1][, ..., elementN]);

Array.splice( index, remove_count, item_list )

 

Parameters of Splice Method() in JavaScript

This method accepts many parameters some of them are described below:

  • index: It is a required parameter. This parameter is the index which starts modifying the array (with the origin at 0). This can be negative also, which begins after that many elements counting from the end.

  • remove_count: The number of elements to be removed from the starting index.

  • items_list: The list of new items separated by a comma operator that is to be inserted from the starting index.

Return Value: While it mutates the original array in-place, still it returns the list of removed items. In case there is no removed array it returns an empty array

 

Example Code

Example 1:

<!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>

Find out our UI UX Design Course in Top Cities

IndiaIndia
UI UX Designer Course in ChennaiUI UX Design Course in Mumbai
UI UX Design Course in PuneUI UX Design Course in Ahmedabad
UI UX Design Course in BangaloreUI UX Design Course in Delhi

Add an element to the existing array while removing other elements.

<script>  
var arr=["Monday","Tuesday","Saturday","Sunday","Thursday","Friday"];  
var result=arr.splice(2,2,"Wednesday")  
document.writeln("Updated array: "+arr+"<br>");  
document.writeln("Removed element: "+result);  
</script>

Splice method() Output

Example 3:

Add an element to the existing array while removing other elements.

<script>  
var arr=["Monday","Tuesday","Saturday","Sunday","Thursday","Friday"];  
var result=arr.splice(2);  
document.writeln("Updated array: "+arr+"<br>");  
document.writeln("Removed element: "+result);  
</script> 

Splice method() in Javascript

With this, we come to an end of this Splice method() in Javascript article. I hope you got an understanding of how to use the splice method().

Transform your designs and boost your career with our UI UX Design Course.

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

Check out the Angular Online Course 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.

Got a question for us? Please mention it in the comments section of this article and we will get back to you.

 

Comments
0 Comments

Join the discussion

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.

image not found!
image not found!

How to Implement Splice method() in Javascript?

edureka.co