Javascript Array Methods Ep.1
Tags: javascript, webdev, programming, firstpost
Published: 2022-02-15 06:25:41


Hey There 👋
Welcome to Episode 1 of my Array Methods Explained Show.

If you are here then i suppose you must have pre knowledge of javascript and arrays.

we will be discussing four methods in this episode 
**POP** / **PUSH** / **SHIFT** / **UNSHIFT**

## <u>THE BASICS</u>


- **Push**

    1. Push is used to add an element to the array
    2. can add multiple items once
    3. It always add to the last of array
    4. It returns the size of new array
   

![Push Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzkwx9bseai53521er7n.png)

```javascript
let colors = ["Red", "Blue", "Yellow"];

// pushing to last of array
colors.push("White");
console.log(colors); // ["Red", "Blue", "Yellow", "White"]

// can be used to push multiple items
colors.push("Green", "Grey");
console.log(colors); // ["Red", "Blue", "Yellow", "White", "Green", "Grey"]

// returns the size of newly modified array
let value = colors.push("Black");   
console.log(value); // 7
console.log(colors); // ["Red", "Blue", "Yellow", "White", "Green", "Grey", "Black"]
```

- **Pop**
    
    1. Pop is used to remove element from an array
    2. It always removes the last element of array
    3. It returns the value of data removed
    

![Pop Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yp2v45o8ofznprgiz599.png)

```javascript
let colors = ["Red", "Blue", "Yellow"];

// poping from last of array
colors.pop();
console.log(colors); // ["Red", "Blue"]

// returns the data removed
let value = colors.pop();
console.log(value); // "Blue"
console.log(colors); // ["Red"]
```

- **Shift**
    
    1. Shift is used to remove element from an array
    2. It always removes the first element of array
    3. It also returns the deleted element
    

![Shift Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uzklwyed9gkm86bqwi0.png)

```javascript
let colors = ["Red", "Blue", "Yellow"];

// deleting from front of array
colors.shift();
console.log(colors); // ["Blue", "Yellow"]

// returns the data removed
let value = colors.shift();
console.log(value); // "Blue"
console.log(colors); // ["Yellow"]
```

- **Unshift**
    
    1. Unshift is used to add element to the array
    2. It always add to starting element of array
    3. It also returns the added element
    4. can add multiple items once


![Unshift Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eskw6my2b9apjakq0o6n.png)

```javascript
let colors = ["Red", "Blue", "Yellow"];

// pushing to starting of array
colors.unshift("White");
console.log(colors); // ["White", "Red", "Blue", "Yellow"]

// can be used to push multiple items
colors.unshift("Black", "Grey");
console.log(colors); // ["Black", "Grey", "White", "Red", "Blue", "Yellow"]

// returns the size of newly modified array
let value = colors.unshift("Pink");
console.log(value); // 7
console.log(colors); // ["Pink", "Black", "Grey", "White", "Red", "Blue", "Yellow"]
```

---

## <u>PERFORMANCE</u>

**push** and **pop** are fast while **shift** and **unshift** are slow, why ?

> this is because it is faster to work with the end of array then with beginning, lets see why this is so

if we are executing **colors.shift();**, then shift has to perform 3 things :  

1. Remove the element with the index **0**.
2. Move all elements to the left, renumber them from the index **1** to **0**, from **2** to **1** and so on.
3. Update the **length** property.

hence, the more elements in the array, the more time to move them, and more in-memory operations, 

the similar thing happens with **unshift**

And what’s with **push/pop**? They do not need to move anything. To extract an element from the end, the **pop** method simply cleans the index and shortens **length**.

The **pop** method does not need to move anything, because other elements keep there indices. That’s why it is super fast.

The similar thing with happens with **push** method.