Pop, Push, Shift, Unshift, & Splice JavaScript Array Methods

Arrays in JavaScript are extremely useful for assigning sequential collections of data. Within these arrays, many different data types can exist, including strings, integers, objects, other arrays, and more.

In this article, you'll learn how to manipulate arrays with a set of pre-built JavaScript functions: pop(), push(), shift(), unshift(), and splice().

pop(): Remove Last Item from Array

The pop() method removes the last item in an array. In this example, you'll notice that 4, the last element in the array, is removed from the array, and only the first three items are left:

var items = [1, 2, 3, 4];

items.pop();

console.log(items);
// 1, 2, 3

If you were to assign the return value of the pop() method, the output would be slightly different, displaying the item that was removed instead of the remaining items in the array:

var items = [1, 2, 3, 4];

var result = items.pop();

console.log(result);
// 4

push(): Append New Item to Array

The push() method appends an item to the end of an array. Here, the number 4 is appended to the end of the array, changing the number of array elements from three to four:

var items = [1, 2, 3];

items.push(4);

console.log(items);
// [1, 2, 3, 4]

If you were to assign the return value of the push() method, the output would be slightly different, displaying the item that was appended to the end of the array instead of all the elements:

var items = [1, 2, 3];

var result = items.push(4);

console.log(result );
// 4

shift(): Remove First Item from Array

The shift() method works similarly to pop(), however instead of removing an item from the end of an array, the first item from the beginning of the array is removed:

var items = [1, 2, 3, 4];

items.shift();

console.log(items);
// [2, 3, 4]

Similarly, you can also assign a return value to shift() method which will return the value of the first array element that was removed instead of the remaining array elements:

var items = [1, 2, 3, 4];

var result = items.shift();

console.log(result);
// [2, 3, 4]

unshift(): Prepend New Item to Array

The unshift() method works similarly to push(), however instead of adding an item to the end of an array, a new item is prepended to the beginning of the array:

var items = [1, 2, 3, 4];

items.unshift(0);

console.log(items);
// [0, 1, 2, 3, 4]

The return value for the unshift() method works differently than the other methods. Instead of returning the value of the inserted array element, the length of the array is returned:

var items = [1, 2, 3, 4];

var result = items.unshift(0);

console.log(result);
// 5

splice(): Add or Replace Items in an Array Position

The last method we'll discuss is splice(), which adds, replaces, or removes items to/from an array.

Here's an example where Orange is added to array position 2:

var items = ["Apple", "Banana", "Grape", "Strawberry"];

items.splice(2, 0, "Orange");

console.log(items);
// ["Apple", "Banana", "Orange", "Grape", "Strawberry"]

Here's an example where Orange replaces the existing array item Grape:

var items = ["Apple", "Banana", "Grape", "Strawberry"];

items.splice(2, 1, "Orange");

console.log(items);
// ["Apple", "Banana", "Orange", "Orange", "Strawberry"]

And here's one more example, showing how the array item Banana is removed from the array completely:

var items = ["Apple", "Banana", "Grape", "Strawberry"];

items.splice(2, 1);

console.log(items);
// ["Apple", "Banana", "Strawberry"]

Conclusion

In this article, you learned how to manipulate arrays with many different methods, allowing you to add, remove, or replace items from anywhere in an array.

Array manipulation in JavaScript has proven to be extremely beneficial in real-world scenarios, especially in cases where you need to loop over amounts of data for output or any other desired effect.