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

JavaScript arrays 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: push(), pop(), shift(), unshift(), and splice().

JavaScript push() Method: Append New Item to Array

JavaScript's 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

JavaScript pop() Method: Remove Last Item from Array

JavaScript's 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

JavaScript shift() Method: Remove First Item from Array

JavaScript's 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]

JavaScript unshift() Method: Prepend New Item to Array

JavaScript's 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 JavaScript's 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

You can read more about JavaScript array lengths here.

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

The last method we'll discuss is JavaScript's splice() method, 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 JavaScript arrays with many different methods, including push(), pop(), shift(), unshift(), and splice(). These methods allow you to add, remove, or replace array items at your discretion.

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.