How to Manipulate Arrays With pop() in JavaScript

Posted by

In JavaScript, the pop() method is used to remove the last element from an array and return that element. Here’s an example of how it can be used:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let fruits = ["apple", "banana", "cherry"];

let lastFruit = fruits.pop(); // removes "cherry" and returns it
console.log(fruits); // Output: ["apple", "banana"]
console.log(lastFruit); // Output: "cherry"

[/dm_code_snippet]

In the example above, the pop() method removes the last element (“cherry”) from the fruits array and assigns it to the variable lastFruit. The fruits array is then modified to only contain the elements “apple” and “banana”.

You can also use the pop() method in combination with other array methods, like push() or shift(), to add and remove elements from the beginning or end of an array.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

fruits.push("orange");
fruits.shift();
console.log(fruits); // Output: ["banana", "orange"]

[/dm_code_snippet]

In this example, after using the push() method to add “orange” to the array, the shift() method removes the first element “banana” from the array.

Keep in mind that if you use the pop() method on an empty array, it will return undefined and the array remains empty.

In addition to removing elements from the end of an array using the pop() method, you can also use it to perform other operations, such as filtering or mapping the array. For example, you can use the pop() method in a loop to remove elements that meet certain conditions:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let numbers = [1, 2, 3, 4, 5, 6];

while (numbers.length > 0) {
  let last = numbers.pop();
  if (last % 2 === 0) {
    console.log(last);
  }
}

[/dm_code_snippet]

In this example, the code will remove the last element from the numbers array, check if it is even, and if it is, it will print it to the console. This process will continue until the numbers array is empty. The final output will be:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

6
4
2

[/dm_code_snippet]

It’s also possible to use the pop() method in conjunction with other Array methods, such as map() or filter() in order to manipulate or select specific elements from the array.

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(n => n % 2 === 0);
console.log(evenNumbers); // Output: [2, 4, 6]

[/dm_code_snippet]

In this example, it filters the array numbers to contain only even numbers and assigns the new filtered array to evenNumbers variable.

So, the pop() method can be used for a variety of purposes beyond just removing the last element from an array. It can be used to filter, map and manipulate the array in different ways.