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" ];
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()
Example:
var friends = ["Joel", Elijah", "John", "Precious", "Happiness", "Silas" ];
friends.pop(); // this will remove Silas from the array.
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()
Example:
var friends = ["Joel", Elijah", "John", "Precious", "Happiness", "Silas" ];
friends.shift(); // this will remove Joel from the array.
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)
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.
You can decide not to replace it with anything
friends.splice(2,2);
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);
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.
Finally, I will explain the
push()andunshift()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 thepop()andshift()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)
Example:
var friends = ["Joel", Elijah", "John"];
friends.push( "Precious", "Happiness"); // this will add Precious and Happiness to the end of the array.
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)
Example:
var friends = ["Joel", Elijah", "John"];
friends.unshift( "Precious", "Happiness"); // this will add Precious and Happiness to the beginning of the array.
Thanks so much for reading!. Connect with me on twitter.
Top comments (0)