👋 Hi! If you are learning JavaScript, this article is for you because you will definitely need to add and remove elements from arrays in your coding projects.

🔹 In this Article

We will dive into four essential JavaScript array methods used to add and remove elements:

• .push()

• .pop()

• .shift()

• .unshift()

You will learn what they do and how and when you should use them.

We will see these principles with a pizza example 🍕!

Sounds yummy, right? 😋 Let's begin!

🔸 Categories

Based on their names, you might initially think that we will group them like this:

• .push() and .pop().

• .shift() and .unshift().

But... actually, based on their purpose and functionality, I think it makes more sense to group them like this:

• .push() and .unshift().

• .pop() and .shift().

You will see why in just a moment (I promise you! ✨).

🔹 How to Add an Element

First, let's start with the .push() and .unshift() methods, which are used to add an element to an array.

.push()

The push method is super helpful and it's basically the array method that you will use most often. It adds an element to the end of an array.

Let's see this method in more detail with an example.

If we have this array of pizza toppings represented by strings:

let pizzaToppings = ["Mushrooms", "Pineapple", "Onions"];

We can call the .push() method to add a new element (the string "Olives"):

pizzaToppings.push("Olives");

If we print the array with console.log() after adding this element, we see this output:

[ 'Mushrooms', 'Pineapple', 'Onions', 'Olives' ]

See? "Olives" is the last element in the array.

Awesome, right? 😄

💡 Tip: this method returns the new length of the array. If we write the following line of code, we will see the value 4 as output because the array will have four elements:

console.log(pizzaToppings.push("Olives")); // Output: 4

We can assign this returned value to a variable and we can even use it in our code if we need to.

.unshift()

Now you will see why I grouped these two methods together. 😉

The .unshift() method adds a new element to the beginning of an array.

💡 Tip: notice the connection between .push() and .unshift(). They both add elements to an array (to the end and to the beginning, respectively).

Let's see this with an example.

If we have the same array of pizza toppings:

let pizzaToppings = ["Mushrooms", "Pineapple", "Onions"];

And we call the .unshift() method on this array:

pizzaToppings.unshift("Olives");

We will add the new string "Olives" to the beginning of the array.

If we print the array with console.log(), we see:

[ 'Olives', 'Mushrooms', 'Pineapple', 'Onions' ]

Now "Olives" is the first string in the array (it's located at index 0).

💡 Tip: this method returns the new length of the string, so we can assign it to a variable like in the following line of code to use it in the program if we need to.

let newLength = pizzaToppings.unshift("Olives");

In this case, the value of newLength would be 4.

Great! Now we've covered the first two methods, which add an element to an array.

So now let's see the next two methods, which... (yes, I'm sure you guessed correctly) remove an element from an array.

Let's dive into it.

🔸 How to Remove an Element

Now we will see the next two methods .pop() and .shift(), which are used to remove an element from an array.

.pop()

The .pop() method is super helpful because it removes the last element from an array and then it returns that element.

Let's see this method in action with an example.

If we have the pizza toppings array:

let pizzaToppings = ["Mushrooms", "Pineapple", "Onions"];

And we call the .pop() method on that array:

pizzaToppings.pop();

This will be the output:

[ 'Mushrooms', 'Pineapple' ]

Like you can see, the string "Onions" was removed (the last element in the array).

Awesome. But... we also mentioned that the method returns the value removed. Let's see this in action.

If instead of just calling the method, we assign it to a variable (or we use it directly in the program), we will have access to the removed value.

For example:

let lastTopping = pizzaToppings.pop();

In this case, the last topping in the array was "Onions", so if we print the value of the variable like this:

console.log(lastTopping);

We will see this output:

Onions

Great! Now you know how to work with .pop(). Let's dive into our fourth and last method (but not least because it's very helpful 😊).

.shift()

The .shift() method removes the first element from the array and returns it.

Let's see this with an example.

If we have our dear pizza toppings array:

let pizzaToppings = ["Mushrooms", "Pineapple", "Onions"];

And we call the .shift() method on the array:

pizzaToppings.shift();

This will be the output:

[ 'Pineapple', 'Onions' ]

Notice how the first element ("Mushrooms") was removed from the array.

And... if we need to work with this value in our program, we can assign the returned value to a variable.

Like this:

let firstTopping = pizzaToppings.shift();

If we print the value of firstTopping:

console.log(firstTopping);

We see this as the output:

Mushrooms

🔹 In Summary

Awesome! We just covered the four main JavaScript array methods that you can use to add and remove elements. These operations are used very frequently, so it's helpful to understand how each one of them works.

• .push() adds an element to the end of the array.

• .shift() adds an element to the beginning of the array.

• .pop() removes an element from the end of the array.

• .unshift() removes an element from the beginning of the array.

💻 Thank you for reading my article. I hope you liked it and found it helpful.

If you would like to find more coding tutorials, follow me on YouTube (Coding with Estefania) and Twitter (EstefaniaCassN).

Have an awesome day. 🔅