DEV Community

Cover image for Javascript array manipulation using the push, pop, unshift, and shift methods
EOluwaseun
EOluwaseun

Posted on • Updated on

Javascript array manipulation using the push, pop, unshift, and shift methods

Javascript array is a special type of variable that is known specifically for its ability to store and manage the order of elements of any data type, including numbers, strings, booleans, objects, functions, and even other arrays;

The following image illustrates an example an array:
Image illustration of an array

The following code illustrates an array:


let myArray = [1, 'hello', true, { name: 'james', age: 20 }, [0, 1, 2]];


Enter fullscreen mode Exit fullscreen mode

Javascript array comes with a variety of built-in methods to enable common operations such as adding or removing of elements from the array, mapping, filtering, reducing, and many more.

This article focuses mainly on adding or removing elements from an array using the javascript’s built-in methods:

  • push()
  • pop()
  • shift()
  • unshift()

PUSH Method: The push() array method adds one or more elements to the END of an array, modifies the array, and returns the modified array length.

Image illustrating push function

Syntax

The syntax is as follows:

array.push()

Enter fullscreen mode Exit fullscreen mode

Where the array represents the name of the array.

Example

Const fruits = ['apple', 'orange', 'mango']

fruits.push('grape', 'cherry')

console.log(fruits)

Enter fullscreen mode Exit fullscreen mode

Output

['apple', 'orange', 'mango', 'grape', 'cherry'] 

Enter fullscreen mode Exit fullscreen mode

POP Method: The pop()The pop() array method performs the opposite action of Push()removing the last element from an array and returning that removed element..

Image illustrating Pop function

Syntax

Array.pop()

Enter fullscreen mode Exit fullscreen mode

Example

Const cars = ['audi', 'mazda',  'volvo', 'toyota']

Const popped = cars.pop('toyota') // toyota is removed from the cars array


console.log(cars)
console.log(popped) // The returned array


Enter fullscreen mode Exit fullscreen mode

Output

 ['audi', 'mazda', 'volvo'] 

 ['toyota']

Enter fullscreen mode Exit fullscreen mode

What's the Relationship between the PUSH and POP array methods?

The relationship between these two methods is that the PUSH can add elements to an array while POP can take the same elements away. The POP and PUSH method is often used together when you need to maintain a last-in, first-out(LIFO) data structure, such as a stack. The Push() and Pop() can be used to add and remove elements from a stack, respectively, in the reverse order in which they are added.

UNSHIFT Method: unshift() array method adds one or more elements to the beginning of an array, modifies the array and returns the modified array length.

Image illustrating unshift function

Syntax


array.unshift()

Enter fullscreen mode Exit fullscreen mode

Example


Const fruits = ['apple', 'orange', 'mango']

fruits.unshift('grape', 'cherry')

console.log(fruits)


Enter fullscreen mode Exit fullscreen mode

Output


['grape', 'cherry', 'apple', 'orange', 'mango']

Enter fullscreen mode Exit fullscreen mode

SHIFT Method: The shift() array method removes the first element of an array and returns that removed element.

Image illustrating shift function

Syntax


array.shift()

Enter fullscreen mode Exit fullscreen mode

Example


Const cars = ['audi', 'volvo', 'toyota']

Const shift = cars.shift('audi')

console.log(cars)
console.log(shift)


Enter fullscreen mode Exit fullscreen mode

Output


 ['volvo', 'mazda']

 ['audi']
Enter fullscreen mode Exit fullscreen mode

SUMMARY

  • push() method adds one or more elements to the end of an array and returns the new array length.

  • pop() method removes the last element from an array and returns the removed element.

  • shift() method removes the first element from an array and returns the removed element.

  • unshift() method adds one or more elements to the beginning of an array and returns the new array length.

Top comments (0)