Insert, Remove, Splice and Replace elements with Array.splice()

Follow us on LinkedIn for our latest data and tips!

When you already have an existing array and need to make some edits, the Array.splice() method comes in handy. The splice() method allows you to INSERT, REMOVE, and REPLACE elements from a javascript array.

Before jumping into any examples, let’s start by taking a look at the arguments passed into the splice() method.
Array.splice(start_index, number_of_elements_to_remove);

  • start_index refers to the position in the array where the Insertion or Removal of elements will begin.
  • number_of_elements_to_remove will begin at the start index, and remove an element from array
  • all arguments following number_of_elements_to_remove will get inserted in to the array from the start_index. these arguments inserted into the array can be of any data type including strings, numbers, booleans, objects, functions, null, undefined, etc…

For a more in depth look at the Array.prototype.splice() javascript method parameters check out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Let’s start with a simple example demonstrating how to INSERT a number into an array with the Array.splice() method.
Imagine we have the following array [1,3,4] and we want to insert a 2 between the 1 and 3 in this javascript array.
The following code example will INSERT the number 2 between the 1 and 3.


        var my_array = [1,3,4];
        var start_index = 1;
        var number_of_elements_to_remove = 0;
        my_array.splice(start_index, number_of_elements_to_remove, 2);
        console.log(my_array);
        //[1,2,3,4];

Take note when using the array.splice() method, the splice() method acts directly on the array. So instead of returning a new array, calling the splice() method on my_array, will update my_array.

Next, let’s take a look at an example of REMOVING an element from an array in javascript.


        var my_array = ["a","b","c","k","d"];
        var start_index = 3
        var number_of_elements_to_remove = 1;
        var removed_elements = my_array.splice(start_index, number_of_elements_to_remove);
        console.log(removed_elements);
        //["k"]
        console.log(my_array);
        //["a","b","c","d"];

Take note when using the array.splice() method to remove elements, an array of the removed elements will get returned

Lastly, let’s take a look at REPLACING some elements in a javascript array with the splice() method


        var my_array = ["baseball", "basketball", "tennis", "golf"];
        var start_index = 1
        var number_of_elements_to_remove = 2;
        var removed_elements = my_array.splice(start_index, number_of_elements_to_remove, "boxing", "bowling", "volleyball");
        console.log(removed_elements);
        //["tennis", "golf"]
        console.log(my_array);
        //["baseball", "boxing", "bowling", "volleyball", "golf"];

The above example replaces the sports “basketball” and “tennis” with “boxing”, “bowling”, and “volleyball”. The above example may seem a little confusing because of all of the operations that took place. So, let’s break down the operations step by step. First, we tell the splice method to start at my_array[1]. Then, number_of_elements_to_remove is set to 2, so remove my_array[1] and my_array[2]. Lastly, from the start_index my_array[1] insert each of the arguments into my_array one by one.

For more examples of using the splice() method, check out https://www.tutorialspoint.com/javascript/array_splice.htm or https://www.hacksparrow.com/javascript-array-splice-syntax-and-examples.html

The splice() method works well when looking to INSERT or REMOVE values from a javascript array. If your array is already sorted, the splice() method works well to explicitly position new values exactly where you want in the array. The splice() method also works well when looking to remove values from an array by index. Something to pay close attention to is that the splice() method acts directly on the array. Only the values that were removed, deleted, or stripped from the array will get returned.

/