Javascript Basics: Use .push, .pop, .shift, and .unshift to Manipulate Arrays

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

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

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

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.

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

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

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

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.

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