Remove the last item from an array in JavaScript
The task is to remove the last item from the array. Here are a few of the most preferred methods discussed. First few functions to understand.
JavaScript Array splice() Method: This method adds/deletes items to/from the array and returns the deleted item(s).
Syntax:
array.splice(index, number, item1, ....., itemN)
Parameters:
- index: This parameter is required. It specifies the integer at what position to add/remove items, Negative values are used to specify the position from the end of the array.
- number: This parameter is optional. It specifies the number of items to be removed. 0 means, nothing to remove.
- item1, ….., itemN: This parameter is optional. This specifies the new item(s) to be added to the array.
Return value: Returns a new Array, having the removed items.
Example: This example removes the last item from the array using the splice() method.
HTML
<body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px;"> </p> <button onclick="gfg_Run()"> remove </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [34, 24, 31, 48]; el_up.innerHTML = "Array = [" + array + "]"; function gfg_Run() { array.splice(-1, 1); el_down.innerHTML = "Remaining array = [" + array + "]"; } </script> </body> |
Output:
Remove the last item from an array
JavaScript Array slice() Method: This method returns a new array containing the selected elements. This method selects the elements start from the given start argument and end at, but excludes the given end argument.
Syntax:
array.slice(start, end)
Parameters:
- start: This parameter is optional. It specifies the integer from where to start the selection (the first element is at index 0). Negative numbers are used to select from the end of the array. If not used, it acts like “0”
- end: This parameter is optional. It specifies the integer from where to end the selection. If not used, all elements from the start to the end of the array will be included in the selection. Negative numbers are used to select from the end.
Return value: Returns a new Array, having the selected items.
Example: This example does not remove the last item from the array but returns a new array in which the item is removed, using the slice() method.
HTML
<body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px;"> </p> <button onclick="gfg_Run()"> remove </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [34, 24, 31, 48]; el_up.innerHTML = "Array = [" + array + "]"; function gfg_Run() { el_down.innerHTML = "Remaining array = [" + array.slice(0, -1) + "]"; } </script> </body> |
Output:
Remove the last item from an array
JavaScript Array pop() Method: This method deletes the last element of an array and returns the element.
Syntax:
array.pop()
Return value: It returns the removed array item. An array item can be a string, a number, an array, a boolean, or any other object type that is applicable to an array.
Example: This example removes the last item from the array using the pop() method.
HTML
<body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px;"> </p> <button onclick="gfg_Run()"> remove </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [34, 24, 31, 48]; el_up.innerHTML = "Array = [" + array + "]"; function gfg_Run() { array.pop(); el_down.innerHTML = "Remaining array = [" + array + "]"; } </script> </body> |
Output:
Remove the last item from an array
JavaScript array.reduce() Method: The reduce method in JavaScript is used to reduce the array to a single value and executes a provided function for each value of the array and the return value of the function is stored in an accumulator.
Syntax:
array.reduce( function(total, currentValue, currentIndex, arr), initialValue )
Example: This example removes the last item from the array using the arr.reduce() method.
HTML
<body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px;"> </p> <button onclick="gfg_Run()"> remove </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var array = [34, 24, 31, 48]; el_up.innerHTML = "Array = [" + array + "]"; function gfg_Run() { array = array.filter((item, i)=> i!=(array.length-1)); el_down.innerHTML = "Remaining array = [" + array + "]"; } </script> </body> |
Output:
Remove the last item from an array
Please Login to comment...