Whether you are a JavaScript/TypeScript developer or just have started learning it, an array is something you must deal with frequently. Based on the nature of your work or the problem you are solving, you need to perform array operations and manipulate the arrays. Some common array operations and manipulations are concatenating two arrays, retrieving key/value pairs, filtering, removing items from an array, and many more. Among these operations, this article will discuss removing the last element from an array.
Note: The methods described in the article are applicable to both JavaScript and TypeScript. In the article, we will refer to JavaScript.
Use the pop() method to remove the last element from an array in JavaScript. The pop() array method not also removes the last item from an array, but also returns the removed item.
Are you excited to explore, learn, and implement the pop() method to remove the last item from an array with hands-on experience? Read on! This article will explain all you need to know.
Table of Contents
Remove Last Element From an Array in JavaScript using the pop() Method
The pop() method is a straightforward approach to removing the last element from an array. You just knew the method pops out the last element from an array and return that element. Apart from knowing the functionality of the pop() method, it is important to know how it behaves.
Along with several other array methods like push(), unshift(), shift() , etc; the pop() method exhibits mutability. This means the array changes its value after the array operation has been applied to it. In other words, the array is updated after removing the last element.
Let’s understand the mutable property of the pop() method with an example.
var arr = [1,2,3]
console.log(arr.pop()) // 3
console.log(arr) // [1, 2]In the example above, the array arr contains three items which are 1, 2, and 3. After the pop() operation, when you log the array to the console, it returns only 1 and 2. Here, the arr variable has changed. Therefore, the pop() method is a mutable operation.
So far, you have known that the pop() method is a mutable operation. However, mutability comes with several disadvantages. With mutation, the change of state makes it hard to track the changes as there will be no base for comparison. As a result, it makes debugging difficult. The mutation also disturbs the predictability of a program. Therefore, there is a need for immutable operations to replace mutable operations.
Alternative Solutions(Immutable Operations)
Given the shortcomings of the pop() method due to its mutable property, some alternatives exist to achieve the same goal. In the upcoming sections, we will use some array methods that do not mutate the array while removing an array’s last element.
Remove Last Element From an Array in JavaScript using the slice() Method
You can use the slice() method to pick the sequence of array items from the first index to the second-last index and consequently remove the last element of the array. This is an immutable operation and an alternative to the pop()method.
The slice() method returns a new array containing the element from start to the one index less than end (end is not included). The options start and end are the first and second parameters of the method. In order to remove the last element from an array, start should be 0, and end should be the last index of the array. This causes the method not to include the last element while returning the new array.
For example, consider an arbitrary array and find its length using the length property. Now you can find the index of the last element of the array by subtracting 1 from the length since the array index starts from 0. Finally, you can set start as 0 and end as the last element’s index as the slice() method’s parameters.
var arr = ['honda', 'yamaha', 'ktm', 'bmw']
var len = arr.length // 4
console.log(arr.slice(0, len-1)) // ["honda", "yamaha", "ktm"]In the example above, the function arr.slice(0, len-1) translates into arr.slice(0, 3). As stated earlier, the slice() method does not include the end index, so it returns the array elements from indexes 0 to 2. Thus, the last element is removed from the array.
Notice the difference in the return value of the slice() method from the pop() method. The slice() method returns a new array while pop() returns the removed element.
Instead of calculating the length of the array to access the last index, you can use a short-cut method. The hassles can be reduced using a negative value for the end parameter. The value -1 as the end parameter to the slice() method denotes the last index of the array. If the value was -2, it would represent the array’s second to the last index. Thus, the equivalent code snippet of the example above is shown below.
console.log(arr.slice(0, -1)) // ["honda", "yamaha", "ktm"]These examples depict the immutable property of the slice() method. When you log the array in the console, it shows no change in the values even after the slice() operation.
console.log(arr) // ['honda', 'yamaha', 'ktm', 'bmw']Remove Last Element From an Array in JavaScript using the filter() Method
Another alternative to removing the last element from an array is using the filter() method to the array. The filter() method can be utilized to create a condition that checks whether each array index is less than the result of subtraction of 1 from the length of the array. As a result, the last element will be omitted in the newly returned array. The filter() operation is also an immutable operation.
var arr = ['honda', 'yamaha', 'ktm', 'bmw']
var newArr = arr.filter((element, index) => index < arr.length - 1 )
console.log(newArr) // ["honda", "yamaha", "ktm"]Here, the filter() method will return only the elements in an array that passes the condition. The condition is prepared in a way that the last element will fail in order to remove itself from the array. Let’s apply the condition with the last element of the array and see how it performs.
Since the array’s length is 4, the index of the last element is 3. The condition inside the filter() method checks whether the index 3 is smaller than arr.length - 1, which equals 3. The condition fails as 3 (last element’s index) is not less than 3(arr.length-1). The other elements of the array pass the condition since their indexes are less than 3. Therefore, the last element will not include in the returned array resulting in its removal.
When you log the array to the console, the original array elements remain intact, showing the immutable property of the filter() method.
console.log(arr) //[ 'honda', 'yamaha', 'ktm', 'bmw' ]
Conclusion
This article has presented a couple of ways to remove the last element from an array. You learned how to use the array methods like pop(), slice(), and filter() to achieve the goal. Additionally, the post has differentiated these methods on the basis of mutable and immutable properties.
Was the article useful to understand the concept?
Feel free to share your opinions and suggestions on our Twitter, Become A Better Programmer.