Hello World, Akwaaba, I trust your journey to becoming a top notch JS developer is progressively steadily ? Well, I am here to provide some assistance in this life changing journey. In today's post, we take a look at four commonly used JavaScript array methods that will help you add or remove items from the beginning or ends of arrays.

We will take a look at the pop and push, shift and unshift array methods. Let's get started

The pop() method

Let's take a scenario where you want to remove the last item from the end of an array, the simplest way to achieve that is to use the pop()method.

What is the Pop() method ?

The pop() method helps you remove the last item from the end of an array and return the item removed. With the item removed, the length of the array changes. An analogy to the pop() method is having a collection of balloons and you burst one of the balloon(popped the balloon),the balloon get removed from the collection.

Syntax

array.pop()

How to use the pop() method

Removing the last element from an array. Let's assume you have an array of names ; ['John","Esi", "Kofi", "Ama"] and you want to remove Ama from the array. Let's see how that can be achieved

/* Define the array */
let myNames = ["John", "Esi", "Kofi", "Ama"];
/* apply the pop()method on the myNames  array */
let popped = myNames.pop();

console.log(popped); /* Ama, the element removed */
console.log(myNames); /* ["John", "Esi", "Kofi"] */

What happens when the pop() method is called ?

When you call the pop() method on an array, the following occurs:

• It removes the element at the last index of the array

• It mutates the parent array reducing its length

• It returns the last element of the array.

Now that you know how to use the pop() method, let's now take a look at the array.push method.

The Array.push() method

In contrast to the array.pop() method, the array.push() allows you to add one or more elements to the end of an array and returns the new length of the array.

Syntax

array.push()

How to use the push() method.

Let's take a scenario where you want to add an element to an array, when you apply the push() method it pushes that element into the array, if it is an empty array, then the pushed element becomes the first element in the array. However, if there are existing elements, the pushed element gets added to the last element in the array.

Let's see some examples

• Adding one element to the end of an array

let myNames = ["John", "Esi", "Kofi", "Ama"];

/*apply the push()method on the myNames array */
let pushed = myNames.push("Kojo"); /*We want to push Kojo to the end of the array*/

console.log(pushed); /* 5  , which is the new length of the array */
console.log(myNames); /*  ["John", "Esi", "Kofi", "Ama", "Kojo"] */

• Adding two elements to the end of an array

The following codes creates a cities' array and appends two more cities to it

let myCities = ["Accra", "Lagos"];

let totalCities = myCities.push("Nairobi", "Lusaka");

console.log(myCities); /*  ["Accra", "Lagos", "Nairobi", "Lusaka"]  */
console.log(totalCities); /* 4, the length of the array has increased */

So in summary, we use the push() method when you want to add elements to the end of the array.

Whilst the pop() and push() methods add or removes elements from the end of the array, the shift or unshift() method rather works on the beginning of an array.

Let's see how they are used.

The shift() method

The shift() method removes the first element from an array and returns that removed element. When the shift() method is applied, it changes the length of the array and the returned value is the removed element.

Syntax

array.shift()

How to use the shift() method.

Let's say you want to remove the first element from the beginning of an array, let's see how that can be achieved.

The following code shows what happens when you remove the first element from the array of cities

let myCities = ["Accra", "Lagos", "Nairobi", "Lusaka"]

let shifted = myCities.shift(); /* remove the first city */

console.log(myCities); /*  [ "Lagos", "Nairobi", "Lusaka"]  */
console.log(shifted); /* Accra, the removed city */

Let's take a look at our last method, the unshift() method.

The Unshift() method

The unshift() method adds one or more items to the beginning of an array and returns the new length of the array. When you are faced with challenges where you need to add elements to the beginning of the array, the unshift() method is the right choice.

Syntax

array.unshift(item0, item1)

How to use the unshift() method

Let's take a situation where you will want to add elements to the beginning of an array. Let's see how to get that done.

The following code takes the cities array and add two cities to the beginning of the array.

let myCities = ["Accra", "Lagos", "Nairobi", "Lusaka"]

let total = myCities.unshift("Lome", "Abuja");
console.log(myCities); /* ["Lome", "Abuja", "Accra", "Lagos", "Nairobi", "Lusaka"]   Lome and Abuja has been added to the beginning of the array */
console.log(total); /*6, length of the array */

Summary

In this post, we understood how to use four array methods that helps you add or remove items from the beginning or the ends of an array. Anytime you are faced with a situation where you need to add or remove elements either at the beginning or the end of the array, don't forget the pop(),pus(), unshift() and shift() methods.

Hope you learnt some new tricks. Me daa se.

P.S Akwaaba and Me daa se means Welcome and Thank you in Twi a dialect in Ghana.