Javascript array manipulation using the push, pop, unshift, and shift methods
Tags: javascript, webdev, programming, codenewbie
Published: 2023-08-08 06:18:21

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;


<u>The following image illustrates an example an array</u>:
![Image illustration of an array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxdy5hsfroiyssckhkxp.jpg)

<u>The following code illustrates an array</u>:
```

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


```

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()`

**<u>PUSH Method</u>:** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xml77i99wzjisnigndpv.jpg)

<u>Syntax</u>

The syntax is as follows:	
```
array.push()

```
Where the `array` represents the **name** of the array.

<u>Example</u>

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

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

console.log(fruits)

```

<u>Output</u>

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

```


 
**<u>POP Method</u>:** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e1orrzc7pqex8cy2kz5e.jpg)

<u>Syntax</u>

```
Array.pop()

```

<u>Example</u>

```
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


```

<u>Output</u>

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

 ['toyota']

```

<u>**What's the Relationship between the  PUSH and POP array methods?**</u>

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](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)). 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.

<u>**UNSHIFT Method:</u>** `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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tahcbubjc2b20krc266.jpg)

<u>Syntax</u>
```

array.unshift()

```

<u>Example</u>

```

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

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

console.log(fruits)


```

<u>Output</u>

```

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

```

**<u>SHIFT Method</u>:** The `shift()` array method removes the first element of an array and returns that removed element.


![Image illustrating shift function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mp5jieourm0eqzydu6es.jpg)

<u>Syntax</u>

```

array.shift()

```

<u>Example</u>

```

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

Const shift = cars.shift('audi')

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


```

<u>Output</u>

```

 ['volvo', 'mazda']

 ['audi']
```

<u>**SUMMARY**</u>

- `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.