Insert item into a specific index of an array

Introduction: In this lesson we are going to check how can we insert an item into as specific index of an array in JavaScript. We also learn how to replace also. So we can use splice() method to do that.

What is splice() method?

splice() method is used to add and remove item from an array. It will change the original array and returns the modified array.

Insert item into a specific index of an array

How to append an item into a specific index of an array?

Suppose you have an array like this const array = ['a', 'c', 'd'];. We want to append an item after item ‘a’. So how to do that? Let’s take an example.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Blank HTML5</title>
<style>
</style>
    </head>
    <body>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <script>
        $(document).ready(function() {
	  const array = ['a', 'c', 'd'];
          array.splice(1,0,"b");
          console.log(array)
        });
      </script>
    </body>
</html>

Result:

(4) ["a", "b", "c", "d"]

Here you can see item “b” has been added after “a”. The index of an array in JavaScript always starts from 0.

We can also append another array into a specific index of another array. Let’s take an example of that.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Blank HTML5</title>
<style>
</style>
    </head>
    <body>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <script>
        $(document).ready(function() {
	  const array1 = ['a', 'b', 'e'];
          const array2 = ['c', 'd'];
          
          array1.splice(2, 0, ...array2);
          console.log(array1)
        });
      </script>
    </body>
</html>

Result:

(5) ["a", "b", "c", "d", "e"]

Here you can see I have used ...array2. What does it mean? The (…) is a Spread syntax. According to MDN, the Spread syntax allows an iterable such as an array expression or string to be expanded.

How to replace an item with a specific index of an array?

In this example we are going to replace a specific index of an array.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Blank HTML5</title>
<style>
</style>
    </head>
    <body>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <script>
        $(document).ready(function() {
	  const array = ['a', 'd', 'c'];
          
          array[1] = 'b';
          console.log(array)
        });
      </script>
    </body>
</html>

Result:

(3) ["a", "b", "c"]

In the above example, we have replaced “d” with “b”. The index of the item ‘d’ is 1, as the index starts from 0. We replace the value by giving a specific index no i.e. array[1] = 'b';

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment