Add Element to the End of a JavaScript Array

In this tutorial, we will learn how to add an element to the last of a JavaScript array. The most common method to add an element to the last of the array is by using the Array push() method but we will discuss multiple methods by which we can achieve this. Here are some approaches to achieve this.

  • Using the Array.prototype.push( ) Method

  • Using the Array.prototype.splice( ) Method

  • Using the Array Indexing

Using the Array.prototype.push() Method

To add an element in the last, use the JavaScript push() method. JavaScript array push() method appends the given element(s) in the last of the array and returns the length of the new array.

Syntax

Following is the syntax to use push() method to add an element ?

arr.push(element)

Here arr is the original array to which the element is to be added. The push() method returns the length of the array.

Example

In this example, we are creating an array named arr and we are adding some values to it.


<html>
<head>
   <title>Program to add an element in the last of a JavaScript array</title>
</head>
<body>
   <h3>Adding an element in the last of the array using Array.push() Method</h3>
</body>
<script>
   
   // Create an array named arr
   let arr = [1, 2, 3, 4, 5];
   
   // Add some value in the array
   arr.push(6);
   arr.push(7);
   arr.push(8);
   
   // Print the array
   document.write(arr)
   
   // 1,2,3,4,5,6,7,8
</script>
</html>

Using the Array.prototype.splice Method

JavaScript array splice() method changes the content of an array, adding new elements while removing old elements.

Syntax

Following is the syntax to use splice() method ?

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

Parameter

  • index ? It's the index at which to start changing the array.

  • howMany ? It's an integer indicating the number of old array elements to remove. If it is 0, no elements are removed.

  • element1, ..., elementN ? The elements to add to the array. If you don't specify any elements, the splice simply removes the elements from the array.

Approach

To add a value at the end of the array we use the first parameter of the splice function as the length of the array - 1 and the second parameter will be 1 and the third parameter will be the element which we want to append. If you want to add multiple elements, you need to pass them as an extra parameter at the end.

Example

In this example, we are creating an array named arr and we are adding some values to it.


<html>
<head>
   <title>program to add an element in the last of a JavaScript array </title>
</head>
<body>
   <h3>Adding an element in the last of the array using Array.splice() Method</h3>
</body>
<script>
   
   // Create an array named arr
   let arr = [1, 2, 3, 4, 5];
   
   // Add one element in the array
   arr.splice(arr.length, 1, 6)
   
   // Adding multiple elements at the end of the array
   arr.splice(arr.length, 3, "7th element", "8th element" , "9th element")
   
   // Print the array
   document.write(arr)
   
   // 1,2,3,4,5,6,7th element,8th element,9th element
</script>
</html>

Using the Array Indexing

As we know the array indexing in JavaScript starts with 0 and ends with the number of elements of the array minus one. When we add an element at the end of the array its index will be the number of elements in the array. To append the element at the end of the array we assign the element at the number of element index.

Syntax

Array.push( number of elements ) = element to be added

Example

In this example, we are creating an array named arr and we are adding some values to it.


<html>
<head>
   <title>program to add an element in the last of a JavaScript array </title>
</head>
<body>
   <h2>Adding an element in the last of the array using indexing </h2>
</body>
<script>
   
   // Create an array named arr
   let arr = [1, 2, 3, 4, 5];
   
   // Add one element in the array
   arr[arr.length] = 6;
   arr[arr.length] = 7;
   arr[arr.length] = 8;
   
   // Print the array
   document.write(arr)
   
   // 1,2,3,4,5,6,7,8
</script>
</html>

In summary, we discussed in this tutorial, three approaches to add an element in the last of a JavaScript array. The three approaches are using the Array push() and splice() methods, and using indexing.

Updated on: 2022-08-22T07:51:19+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements