Introduction: In this lesson, we are going to check how can we insert an item into a specific index of an array in JavaScript. We also learn how to replace also. So we can use splice() method to do that.
CONTENTS
What is splice() method?
splice() method is used to add and remove items from an array. It will change the original array and returns the modified 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';
