Javascript Basics: Use .push, .pop, .shift, and .unshift to Manipulate Arrays
Tags: beginners, javascript
Published: 2020-10-15 11:20:37

One of the first things you'll likely learn to do in Javascript is how to make use of and manipulate arrays at the most basic level. This article will quickly go over four of the methods that you will use.

**1. PUSH**

We use .push when we want to **add something to the end** of an array. This method allows us to **add one or many items** to the end of an array. The push method **returns the new length** of the array.

Adding one item to the end of an array

```jsx
let numbers = [1,2,3,4]
numbers.push(5)

console.log(numbers) // [1,2,3,4,5] 
```

Adding more than one item to the end of an array

```jsx
let numbers = [1,2,3,4]
numbers.push(5,6,7,8)

console.log(numbers) // [1,2,3,4,5,6,7,8]
```

Using .push return value

```jsx
let letters = ["a","b","c","d"]
console.log(letters.length) // 4

let newLength = letters.push("e")
console.log(newLength) // 5
console.log(letters) // ["a","b","c","d", "e"]
console.log(letters.length) // 5
```

**2. POP**

We use .pop when we want to **remove something from the end** of an array. The .pop method **returns the item that was removed**. If the array is empty, it will return undefined.

```jsx
let fruits = ["🍏", "🍊", "🍌"]

fruits.pop() // "🍌"
console.log(fruits) // ["🍏", "🍊"]

fruits.pop() // "🍊"
console.log(fruits) // ["🍏"]

fruits.pop() // "🍏"
console.log(fruits) // []

fruits.pop() // undefined
console.log(fruits) // []
```

**3. UNSHIFT**

We use .unshift when we want to **add something to the beginning** of an array. This method allows us to **add one or many items** to the beginning of an array. The .unshift method **returns the new length** of the array.

Adding one item to the beginning of an array

```jsx
let numbers = [2,3,4]
numbers.unshift(1)

console.log(numbers) // [1,2,3,4] 
```

Adding more than one item to the beginning of an array

```jsx
let numbers = [4,5,6,7,8]
numbers.unshift(1,2,3)

console.log(numbers) // [1,2,3,4,5,6,7,8]
```

Using .unshift return value

```jsx
let letters = ["b","c","d","e"]
console.log(letters.length) // 4

let newLength = letters.unshift("a")
console.log(newLength) // 5
console.log(letters) // ["a","b","c","d", "e"]
console.log(letters.length) // 5
```

**4. SHIFT**

We use .shift when we want to **remove something from the beginning** of an array. The .shift method **returns the item that was removed**. If the array is empty, it will return undefined.

```jsx
let fruits = ["🍏", "🍊", "🍌"]

fruits.shift() // "🍏"
console.log(fruits) // ["🍊", "🍌"]

fruits.shift() // "🍊"
console.log(fruits) // ["🍌"]

fruits.shift() // "🍌"
console.log(fruits) // []

fruits.shift() // undefined
console.log(fruits) // []
```

These are just 4 of the basic array methods that you can use when manipulating arrays in Javascript — refer to MDN for more array methods.

As always, refer to MDN for more info:
.push: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push)
.pop: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop)
.unshift: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift)
.shift: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift)

Feel free to reach out on any of my socials for questions, feedback (good and bad), or just to connect / say hello 👋.