How to remove last array element in JavaScript and return it?

Javascript Web Development Front End Technology

In this tutorial, we will learn how to remove the last array element in JavaScript and return it.

In JavaScript, arrays are described as list-like objects. A single array object can store multiple values. An array object is stored in a variable. Array elements are stored in a memory location. Each array element is identified by its index value.

You must process an array by inserting an element, removing or changing, etc. JavaScript has a lot of methods to update an array. Let us look at various ways to remove the last array element in JavaScript.

Following are the Methods/Functions to remove the last array element −

The Array pop() Method
The Array splice() Method

Using the Array pop() Method

The Array pop() method is the simplest method used to remove the last element in an array. The pop() method returns the removed element from the original array.

Syntax

The below given syntax uses the pop() method to remove the last element of an array.

arr.pop();

Here arr is the original array.

Example

In the example stated below, we have used the pop() method to remove the last element of an array. We have taken two array examples and removed the last element of each of those by using pop().


<html>
<head>
</head>
<body>
   <h3>Use <i>pop()</i> to remove the last element in an array</h3>
   <b>Example 1</b>
   <div id = "output1"></div>
   <b>Example 2</b>
   <div id = "output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let output = "";
      let arr1=[1,2,3,4,5];
      output = "Array before pop(): "+arr1+"<br>";
      output = output + "Removed element: "+arr1.pop()+"<br>";
      output = output + "Array after pop(): "+arr1;
      output1.innerHTML = output;
      let arr2 = ["A","B","C","D","E", "F"];
      output = "Array before pop() = "+arr2+"<br>";
      output = output + "Removed element = "+arr2.pop()+"<br>";
      output = output + "Array after pop() = "+arr2;
      output2.innerHTML = output;
   </script>
</body>
</html>

In the above two examples, users can see that the pop() method returned the removed element from an array and changed the original array.

Using the Array splice() Method

The splice() method is used to add or remove elements from an array.

The splice() method can change the original Array.

Syntax

The below-given syntax uses the splice() method to remove the last element of an array.

arr.splice(-1)
arr.splice(arr.length-1)

Here arr is the original array.

Example

In the example stated below, we are using the splice() method to remove the last element of an array. We have taken two array examples and removed the last element of each of those by using splice().


<html>
<head>
</head>
<body>
   <h2>Use <i>splice()</i> method to remove the last element in an array</h2>
   <b>Example 1</b>
   <div id = "output1"></div>
   <b>Example 2 </b>
   <div id = "output2"></div>
   <script>
      let output1 = document.getElementById("output1");
      let output2 = document.getElementById("output2");
      let output = "";
      let arr1 = [1,2,3,4,5];
      output = "Array before splice() = "+ arr1 +"<br>";
      output = output + "Output of the method = "+ arr1.splice(-1)+"<br>";
      output = output + "The original array = "+arr1;
      output1.innerHTML = output;
      let arr2 = ["A","B","C","D","E"];
      output = "Array before splice() = "+arr2+"<br>";
      output = output+"Output of the method = "+arr2.splice(arr2.length-1)+"<br>";
      output = output+"The original array = "+arr2;
      output2.innerHTML = output;
   </script>
</body>
</html>

We have learned two methods, using which we can remove the last array element in JavaScript. Among these methods, pop() is the easiest way to remove the last element of an array. It is the best practice to use the pop() method in real-world problems.

The splice() is used to add or remove the elements on a specific index.