AppDividend
Latest Code Tutorials

Javascript array pop: How to Remove Element from Array

1

Javascript array pop() is an inbuilt method that removes the last item from an array and returns that element. The pop() method changes the length of an array that is why it is not a pure function.

Javascript array pop() method changes the length of the array. If we want to remove the first element of an array, use the shift() method.

Javascript Array Pop

The pop() method is intentionally generic and can be called or applied to objects resembling arrays.

The objects which do not contain the length property reflecting the last in the series of consecutive may not behave in any meaningful manner.

If the array is empty, then the removed item is undefined.

Let us take a simple example. Create an app.js file.

// app.js

let apps = [
  { name: 'Amazon', value: 1 },
  { name: 'Amazon Prime', value: 21 },
  { name: 'Amazon Music', value: 10 },
  { name: 'Amazon Go', value: 100 },
  { name: 'Amazon Alexa', value: 13 }
];
removedItem = apps.pop();

console.log('The remaining items are: ', apps);
console.log('The removed item is: ', removedItem);

Now, the last item of an array is removed, and we can get that item.

Javascript Array Pop Example | Array.prototype.pop() Tutorial

We can see that the item is removed and the length of an array is modified.

We can also perform the same operation with the integers of an array.

// app.js

let numArr = [1, 3, 4, 5, 9];
let removedItem = numArr.pop();

console.log('The remaining items are: ', numArr);
console.log('The removed item is: ', removedItem);

Array.prototype.pop() Tutorial

We can do the same for strings of an array.

// app.js

let strArr = ['stan', 'bruce', 'warren', 'michael'];
let removedItem = strArr.pop();

console.log('The remaining items are: ', strArr);
console.log('The removed item is: ', removedItem);

Javascript Array Pop() method tutorial

#Remove a particular item from an array in JavaScript

How do I remove a specific element from an array in JavaScript?

Well, The splice() method changes the items of an array by removing the existing elements and adding new items.

// app.js

let array = ['Millie', 'Gaten', 'Noah', 'Finn', 'Winona'];
console.log(array)

const index = array.indexOf('Noah');
if (index > -1) {
  array.splice(index, 1);
}

console.log('After removing Noah', array);

First, we have found the index of Noah using Javascript indexOf() method and then remove that index from the array ultimately remove an element from the array.

Note that splice() modifies an array in place and returns the new array containing the elements that have been removed.

#Remove Elements from End of a JavaScript Array

Let’s remove the javascript element at the end of the array without using the pop() function.

// app.js

let arr = ['Friends','Eleven', 'Millie', 'Mike']
arr.length = 3;
console.log(arr);

So, we have removed the element by modifying the array length.

It is not an ideal way to remove the element from an array because it modifies the existing array.

See the output.

➜  es git:(master) ✗ node app
[ 'Friends', 'Eleven', 'Millie' ]
➜  es git:(master) ✗

The pop() method removes the last item of the array, returns that item, and updates a length property.

JS pop() method modifies the array on which it is invoked.

#Remove items from the beginning of an array

The JS shift() method works much like a pop() method except it removes a first element of the JavaScript array instead of the last element.

There are no parameters because the js shift() method only removed the first array element.

When an item is removed, the remaining items of the array are shifted down.

// app.js

let arr = ['Friends','Eleven', 'Millie', 'Mike']
arr.shift();
console.log(arr);

See the output.

➜  es git:(master) ✗ node app
[ 'Eleven', 'Millie', 'Mike' ]
➜  es git:(master) ✗

The shift() method returns an item that has been removed.

It updates the indexes of remaining elements and updates the length property.

It modifies the array on which it is invoked.

#Javascript pop array by value

We can create a global function or a method for the custom object if you aren’t allowed to add to the native prototypes.

It removes all of the elements from an array that match any of the arguments.

See the following code.

// app.js

Array.prototype.remove = function() {
  var what, a = arguments, L = a.length, ax;
  while (L && this.length) {
      what = a[--L];
      while ((ax = this.indexOf(what)) !== -1) {
          this.splice(ax, 1);
      }
  }
  return this;
};

let arr = ['three', 'seven', 'eleven', 'eight'];

arr.remove('seven');

console.log(arr);

In the above code example, we are removing the item name seven from an array, and we have defined the global function called Javascript array remove().

See the output.

➜  es git:(master) ✗ node app
[ 'seven', 'eleven', 'eight' ]
➜  es git:(master) ✗

#Remove object property In Javascript

We can use the Javascript delete operator to remove specific elements.

// app.js

let data = new Object();

data["firstname"] = "Bob";
data["lastname"] = "Odinkirk";
data["age"] = 55;
console.log(data);

delete data["lastname"];
console.log(data);

See the output.

➜  es git:(master) ✗ node app
{ firstname: 'Bob', lastname: 'Odinkirk', age: 55 }
{ firstname: 'Bob', age: 55 }
➜  es git:(master) ✗

Finally, How To Remove Element In JS Array Example is over.

Recommended Posts

Array push in Javascript

Pop Push Shift and Unshift Array Methods in JavaScript

Javascript Array Example

Javascript Array unshift()

JavaScript Array copyWithin()

Array Foreach, Map, Filter, Reduce, Concat Methods in Javascript

Javascript array forEach()

Javascript array every()

1 Comment
  1. Amit Parmar says

    thanks for the post

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.