DEV Community 👩‍💻👚‍💻

Cover image for Manipulating Arrays in JavaScript
Joel Olawanle
Joel Olawanle

Posted on • Updated on

Manipulating Arrays in JavaScript

In this article, I will explain or demonstrate the difference between the pop(), push(), shift(), unshift(), splice(), and slice() array methods in JavaScript. While some of these methods perform nearly identical functions, they all serve different purposes.

Array

According to GeeksforGeeks,

In JavaScript, an array is a single variable that is used to store different elements. It is often used when we want to store a list of elements and access them by a single variable.

Example:

var friends = ["Joel", Elijah", "John", "Precious", "Happiness", "Silas" ];
Enter fullscreen mode Exit fullscreen mode

As I said earlier all these methods are array methods, we also have other array methods, such as indexOf(), filter(), find(), e.t.c.

pop()

The pop() method is used to remove the last element of an array, and return that element not minding the type of that element; it could be a number, string, boolean, e.t.c.

Note: It does not take in any parameter and it changes the length of an array.

Syntax

array.pop()
Enter fullscreen mode Exit fullscreen mode

Example:

var friends = ["Joel", Elijah", "John", "Precious", "Happiness", "Silas" ];
friends.pop(); // this will remove Silas from the array.
Enter fullscreen mode Exit fullscreen mode

You may begin to ask yourself, since the pop() method removes only the last element of an array, how can I remove the first element of an array?

To remove the first element of an array, use the shift() method.

shift()

The shift() method is used to remove the first element of an array, and return that element not minding the type of that element; it could be a number, string, boolean, e.t.c.

Note: It does not take in any parameter and it changes the length of an array.

Syntax

array.shift()
Enter fullscreen mode Exit fullscreen mode

Example:

var friends = ["Joel", Elijah", "John", "Precious", "Happiness", "Silas" ];
friends.shift(); // this will remove Joel from the array.
Enter fullscreen mode Exit fullscreen mode

Another question that might come to your mind is: how can I remove elements in the middle of an array or at any other position of an array?

For this we can make use of either splice() or slice() method, I will explain them, so you can know their functions and differences.

splice()

The splice() method is used to add items to an array or to remove items from an array, and return the removed item(s).

Note: It takes in 4 parameters of which 3 are optional and it changes the length of an array.

Syntax

array.splice(index, howmany, item1, ...,itemX)
Enter fullscreen mode Exit fullscreen mode

index is required as it specifies the position to add or remove items.

Note: The index is usually excluded from the items removed.

howmany is optional, it determines the number of items to be removed. If set to 0, no items will be removed.
item1, ..., itemX are optional, they are the new item(s) to be added to the array.

Example:

var friends = ["Joel", Elijah", "John", "Precious", "Happiness", "Silas" ];
friends.splice(2, 2, "agnes", "judith" ); // this will replace John and Precious with agnes and judith.
Enter fullscreen mode Exit fullscreen mode

You can decide not to replace it with anything

friends.splice(2,2);
Enter fullscreen mode Exit fullscreen mode

You can assign the removed item to a variable too and also do other stuff.

slice()

The slice() method returns the selected elements in an array to a new array, leaving the array it is called upon untouched. It takes in 2 parameters.

Note: The original array does not get touched

Syntax

var newArray = array.slice(start, end);
Enter fullscreen mode Exit fullscreen mode

start is where extraction/removal begins
end is the index at which the removal will stop but the end index will be excluded

Example:

var friends = ["Joel", Elijah", "John", "Precious", "Happiness", "Silas" ];
var newArray = friends.slice(1,3); // this will copy Elijah and John to newArray.
Enter fullscreen mode Exit fullscreen mode

Finally, I will explain the push() and unshift() array methods which are used to add to the array either at the beginning or end of the array.they are just direct opposite of the pop() and shift() array method.

push()

The push() method is used to add new items to the end of an array and return the new length.

Note: It changes the length of an array.

Syntax

array.push(item1, ..., itemx)
Enter fullscreen mode Exit fullscreen mode

Example:

var friends = ["Joel", Elijah", "John"];
friends.push( "Precious", "Happiness"); // this will add Precious and Happiness to the end of the array.
Enter fullscreen mode Exit fullscreen mode

Since the push method adds elements/items to the to an array, the next question would be how can I add items to the beginning of an array?

To add element(s) to the beginning of an array, use the unshift() method.

unshift()

The unshift() method is used to adds new items to the beginning of an array and return the new length.

Note: It changes the length of an array.

Syntax

array.unshift(item1, ..., itemx)
Enter fullscreen mode Exit fullscreen mode

Example:

var friends = ["Joel", Elijah", "John"];
friends.unshift( "Precious", "Happiness"); // this will add Precious and Happiness to the beginning of the array.
Enter fullscreen mode Exit fullscreen mode

Thanks so much for reading!. Connect with me on twitter.

Useful Resources

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!