Stop Using Loops: How to Master Push, Unshift, and Splice in JavaScript Arrays

When I first started learning array methods, I often got confused. I should use which method to add more elements at the end, either push or unshift? Then, after practicing arrays for many days, I get this point.

Array:

An array is a special data type in JavaScript used to store multiple values of the same type or of different types under a single name. It is good to use an array for the same type of values because objects are used for different types of values.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
console.log(myFavFruits);
// Output : [ 'Mango', 'Banana', 'Pomegranate' ]

In this example, I have created an array, myFavFruits, and assigned it the values Mango, Banana, and Pomegranate. For printing it, I have written this statement console.log(myFavFruits);

Accessing Elements of an Array:

We can put several elements in an array, so if we want to access a specific element, we can access it by index number. The index of the array starts from 0. The element at the beginning of the array has an index of 0, the element at the second position has an index of 1, and so on.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
console.log(myFavFruits[1]);
// Output : Banana

In this example, I have accessed the element at index 1, which is Banana, so it will give the output Banana. If I write an index that is not present in the array, like in my example, where I have indexes of 0, 1, and 2, and I try to access the element at the third index, it will give me an output of undefined, which means the value for this index has not been defined yet.

Top 10 JavaScript Array Methods Every Beginner Should Know

1. push():

It is used to add one or more elements at the end of the array. It returns the number of elements after adding new element.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
myFavFruits.push("Kiwi", "Melon");
console.log(myFavFruits);
// Output : [ 'Mango', 'Banana', 'Pomegranate', 'Kiwi', 'Melon' ]

This will add Kiwi and Melon after Pomegranate.

2. pop():

It removes only the last element from an array. It does not require any argument. It returns deleted element.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
myFavFruits.pop();
console.log(myFavFruits);
// Output : [ 'Mango', 'Banana' ]

3. shift():

It is used to remove only one element from the beginning of an array. It does not require any argument. It returns deleted element.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
myFavFruits.shift();
console.log(myFavFruits);
// Output : [ 'Banana', 'Pomegranate' ]

This will output all elements except Mango.

4. unshift():

It is used to add one or more elements in the beginning of the array. It returns the number of elements after adding new element.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
myFavFruits.unshift("Coconut", "Orange");
console.log(myFavFruits);
// Output : [ 'Coconut', 'Orange', 'Mango', 'Banana', 'Pomegranate' ]

5. isArray():

An array is considered an object in JavaScript, and there are other object types like objects and dates. This method is used to check whether a data type is an array or not.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
console.log(Array.isArray(myFavFruits));
// Output : true

6. delete():

It is not recommended to use this method because it deletes an element but keeps its slot empty.

let myFavFruits = ["Mango", "Banana", "Pomegranate"];
delete myFavFruits[1];
console.log(myFavFruits); 
// Output : [ 'Mango', <1 empty item>, 'Pomegranate' ]

7. concat():

It is used to combine two or more arrays together.

let myFavFruits=["Banana","Apple","Coconut"];
let myFavVeg=["Carrot","Beans","Potato"];
let myFav=myFavFruits.concat(myFavVeg);
console.log(myFav);
// Output : [ 'Banana', 'Apple', 'Coconut', 'Carrot', 'Beans', 'Potato' ]

8. splice():

It is used to add one or more elements at a specific index, along with deleting some elements or not.

myFavFruits=["Banana","Apple","Coconut","Melon","Watermelon","Guava"];
myFavFruits.splice(2,1,"Orange","Grapes");
console.log(myFavFruits);
// Output : [ 'Banana', 'Apple', 'Orange', 'Grapes', 'Melon', 'Watermelon', 'Guava' ]

It has three arguments: first one is used to specify the index at which the new element should be added, the second one is used to tell how many elements should be removed, and the last one tells the elements to be added in array.

9. sort():

This method is used to sort elements of an array alphabetically. But it does not sort numbers correctly. We have to write a compare function with this method to sort numbers.

let myFavFruits=["Banana","Apple","Coconut"];
myFavFruits.sort();
console.log(myFavFruits);
// Output : [ 'Apple', 'Banana', 'Coconut' ]

let marks=[76,45,98,88,55,77];
marks.sort((a,b)=> a-b);
console.log(marks); 
// Output : [ 45, 55, 76, 77, 88, 98 ]

10. reverse():

This method is used to reverse elements of an array. But it does not sort elements in any order.

let myFavFruits=["Banana","Apple","Coconut"];
myFavFruits.reverse();
console.log(myFavFruits);
// Output : [ 'Coconut', 'Apple', 'Banana' ]

---

I originally published this article on Medium.