[javascript] Remove last item from array

I have the following array.

var arr = [1,0,2];

I would like to remove the last element i.e. 2.

I used arr.slice(-1); but it doesn't remove the value.

This question is related to javascript arrays slice

The answer is


There is a function for that, explanation here:

arr.pop();

You could simply use, arr.pop()

This removes the last entry of the array.

var arr = [1,0,2]; 
var popped = arr.pop();//Now arr = [1,0] & popped = 2

If you want to remove n item from end of array in javascript, you can easily use:

arr.splice(-n, n);

splice(index,howmany) - This solution sounds good. But This howmany will work only for the positive array index. To remove last two items or three items use the index itself.

For example, splice(-2) to remove last two items. splice(-3) for removing last three items.


var arr = [1,0,2];
arr.length--; 

// removes the last element // need to check if arr.length > 0


Another approach is to filter based on index:

arr.filter((element, index) => index < arr.length - 1);

Note: filter() creates new array, doesn't change existing one.


This is good way to remove last item :

if (arr != null && arr != undefined && arr.length > 0) {
      arr.splice(arr.length - 1, 1);
}

Detail of splice as following:

splice(startIndex, number of splice)


It's worth noting that slice will both return a new array, whereas .pop() and .splice() will mutate the existing array.

If you like handling collections of data with a chained command style, you will really want to stick with slice for something like this.

For example:

_x000D_
_x000D_
myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];_x000D_
_x000D_
var newArrayOfThings = myArray_x000D_
  .filter(x => x > 5)              // only bigly things_x000D_
  .slice(-1)                       // get rid of the last item_x000D_
  .map(x => `The number is: ${x}`);// map to a set of strings
_x000D_
_x000D_
_x000D_

It can require a lot more messing about, and variable management, to do the same kind of thing with "pop", since unlike map, filter, etc, you don't get a new array back.

It's the same kind of thing with push, which adds an item to the end of an array. You might be better off with concat since that lets you keep the flow going.

_x000D_
_x000D_
myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];_x000D_
_x000D_
var newArrayOfThings = myArray_x000D_
  .filter(x => x > 5)              // only bigly things_x000D_
  .slice(-1)                       // get rid of the "10"_x000D_
  .concat([100])                   // note with concat, you must pass an array_x000D_
  .map(x => `The number is: ${x}`) // map to a set of strings_x000D_
  
_x000D_
_x000D_
_x000D_


I would consider .pop() to be the most 'correct' solution, however, sometimes it might not work since you need to use array without the last element right there...

In such a case you might want to use the following, it will return [1,2,3]

_x000D_
_x000D_
var arr = [1,2,3,4];_x000D_
console.log(arr.splice(0,arr.length-1));
_x000D_
_x000D_
_x000D_

while .pop() would return 4:

_x000D_
_x000D_
var arr = [1,2,3,4];_x000D_
console.log(arr.pop());
_x000D_
_x000D_
_x000D_

which might not be desirable...

Hope this saves you some time.


// Setup
var myArray = [["John", 23], ["cat", 2]];

// Only change code below this line
var removedFromMyArray;
removedFromMyArray = myArray.pop()

This method is more helpful to delete and store the last element of an array.

var sampleArray = [1,2,3,4];// Declaring the array
var lastElement = sampleArray.pop();//this command will remove the last element of `sampleArray` and stores in a variable called `lastElement` so that you can use it if required.

Now the results are:

console.log(sampleArray); //This will give you [1,2,3]
console.log(lastElement); //this will give you 4

You can do it in two way using splice():

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

splice(position_to_start_deleting, how_many_data_to_delete) takes two parameter.

position_to_start_deleting : The zero based index from where to start deleting. how_many_data_to_delete : From indicated index, how many consecutive data should be deleted.

You can also remove the last element using pop() as pop() removes the last element from some array.
Use arr.pop()


var stack = [1,2,3,4,5,6];

stack.reverse().shift();

stack.push(0);

Output will be: Array[0,1,2,3,4,5]. This will allow you to keep the same amount of array elements as you push a new value in.


Using the spread operator:

_x000D_
_x000D_
const a = [1,2,3]
const [, ...rest] = a.reverse();
const withoutLast = rest.reverse();
console.log(withoutLast)
_x000D_
_x000D_
_x000D_


You would need to do this since slice doesn't alter the original array.

arr = arr.slice(-1);

If you want to alter the original array you can use splice:

arr.splice(-1, 1);

or pop:

arr.pop();

You can do this using .slice() method like:

arr.slice(0, -1);    // returns [1,0]

Here is a demo:

_x000D_
_x000D_
var arr = [1, 0, 2];_x000D_
var newArr = arr.slice(0, -1);    // returns [1,0]_x000D_
_x000D_
console.log(newArr);_x000D_
$('#div1').text('[' + arr + ']');_x000D_
$('#div2').text('[' + newArr + ']');
_x000D_
<script src="http://code.jquery.com/jquery.min.js"></script>_x000D_
<b>Original Array    : </b>_x000D_
<div id="div1"></div>_x000D_
<br/>_x000D_
<b>After slice(0, -1): </b>_x000D_
<div id="div2"></div>
_x000D_
_x000D_
_x000D_

instead of doing :

arr.slice(-1);   // returns [2]

Here is a demo:

_x000D_
_x000D_
var arr = [1, 0, 2];_x000D_
var newArr = arr.slice(-1);    // returns [2]_x000D_
_x000D_
console.log(newArr);_x000D_
$('#div1').text('[' + arr + ']');_x000D_
$('#div2').text('[' + newArr + ']');
_x000D_
<script src="http://code.jquery.com/jquery.min.js"></script>_x000D_
<b>Original Array    : </b>_x000D_
<div id="div1"></div>_x000D_
<br/>_x000D_
<b>After slice(-1): </b>_x000D_
<div id="div2"></div>
_x000D_
_x000D_
_x000D_

Explanation:-

Now the basic syntax of Array.prototype.slice() or in short slice() method is:

arr.slice([begin[, end]])

Here,

the begin parameter is zero-based index at which extraction from an array starts. So, lets say based on above example if we do something like

arr.slice(0)    // returns [1,0,2]

it would return all the array elements from start of sequence from position 0 and that is [1,0,2]. Similarly, if we do

arr.slice(1)    // returns [0,2]

it would return [0,2] since 0 is at position 1 here and everything after that. Now, in your case you have passed a negative index i.e., -1 as the begin parameter, which indicates an offset from the end of the sequence. So, slice(-1) in your case extracts the last one array element in the sequence and that is 2 (as we have already seen in the above demo).

Now, let's talk about the end parameter in the slice() method syntax here. It is again a zero-based index at which extraction from an array ends. So, lets say we have a array like:-

var arr = [1, 0, 2, 5, 3, 9];

and we want to get just the 2,5,3 elements in the array. Now, position of 2 from start of the sequence is 2 and for last element 3 it is 4. We will need to end the extraction here a position 5, as we need to get the element before that position. So, we will simply implement slice() method here like

arr.slice(2, 5)    // returns [2,5,3]

In your case, we have implemented -1 as the end parameter, so our code is like

arr.slice(0, -1)   // returns [1,0]

As a negative index, end indicates an offset from the end of the sequence. So, slice(0,-1) extracts the first element through the second-to-last element in the sequence. So, we get the desired output. We can also do like

arr.slice(0, 2)    // returns [1,0]

we will get the same output. But, I have used -1 here as its easier to implement even for a long array like

[0,2,3,1,2,9,3,6,3,9,1,0,2,9,0,1,1,2,3,4,7,9,1]

If you just want to remove the last element, you don't want to sit & calculate the position of last 9 here and the do like arr.slice(0, 22). You can then simply implement the negative index logic here & do

arr.slice(0, -1) // same result as arr.slice(0, 22)

Hope it helps!


Simply arr.splice(-1) will do.


With Lodash you can use dropRight, if you don't care to know which elements were removed:

_.dropRight([1, 2, 3])
// => [1, 2]

_.dropRight([1, 2, 3], 2);
// => [1]

Array.prototype.pop() by JavaScript convention.

let fruit = ['apple', 'orange', 'banana', 'tomato'];
let popped = fruit.pop();

console.log(popped); // "tomato"
console.log(fruit); // ["apple", "orange", "banana"]

say you have var arr = [1,0,2]

arr.splice(-1,1) will return to you array [1,0]; while arr.slice(-1,1) will return to you array [2];


arr.slice(-1) will return a copy of the last element of the array, but leaves the original array unmodified.

To remove the last n elements from an array, use arr.splice(-n) (note the "p" in "splice"). The return value will be a new array containing the removed elements.

Simpler yet, for n == 1, use val = arr.pop()


var a = [1,2,3,4,5,6]; 
console.log(a.reverse().slice(1).reverse());
//Array(5) [ 1, 2, 3, 4, 5 ]

learn by example:

let array_1 = [1,2,3,4];
let array_2 = [1,2,3,4];
let array_3 = [1,2,3,4];

array_1.splice(-1,1)  // output --> [4]      array_1 = [1,2,3]
array_2.slice(0,-1);  // output --> [1,2,3]  array_2 = [1,2,3,4]
array_3.pop();        // output --> 4        array_3 = [1,2,3]

2019 ECMA5 Solution:

const new_arr = arr.reduce((d, i, idx, l) => idx < l.length - 1 ? [...d, i] : d, [])

Non destructive, generic, one-liner and only requires a copy & paste at the end of your array.


Just use the following for your use case:

var arr = [1,2,3,4];
arr.pop() //returns 4 as the value
arr // value 4 is removed from the **arr** array variable

Just a note. When you execute pop() function even though the line returns the popped item the original array is effected and the popped element is removed.


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to arrays

PHP array value passes to next row Use NSInteger as array index How do I show a message in the foreach loop? Objects are not valid as a React child. If you meant to render a collection of children, use an array instead Iterating over arrays in Python 3 Best way to "push" into C# array Sort Array of object by object field in Angular 6 Checking for duplicate strings in JavaScript array what does numpy ndarray shape do? How to round a numpy array?

Examples related to slice

How to search for an element in a golang slice Why can't I duplicate a slice with `copy()`? Correct way to initialize empty slice How to join a slice of strings into a single string? How to get the last element of a slice? Slice indices must be integers or None or have __index__ method Remove last item from array How do you clear a slice in Go? Concatenate two slices in Go how to get the last part of a string before a certain character?