Image Alt

fofx Academy

  /  JavaScript   /  10 Essential JavaScript Array Methods for Easy Data Manipulation

10 Essential JavaScript Array Methods for Easy Data Manipulation

Arrays are reference types and are very important in programming languages. They are

  • an ordered list of values,
  • allow you to store multiple values in a single variable,
  • can be mutated and iterated through and;
  • can be used in some really complex algorithms.

In this article, I am going to go through a couple of really essential array methods in JavaScript.

pop()

This array method is used to remove the last item from an array. Let’s see how the pop() method works.

We will declare a variable of fruits which we would be mutating as we move throughout the various methods in this article.

let fruits = ["Bananas", "Mangos", "Apples", "Cherries", "Pineapples"];
fruits.pop();
<<"Pineapples" //output 

The last item from the array has been removed. Go ahead and console.log the variable fruits . You should see something like this returned on your console.

<<["Bananas", "Mangos", "Apples", "Cherries"] //output

push()

This array method is used to add an item to the end of an array. It takes the array literal and then appends the new item to it. Let us add a new fruit to our array.

fruits.push("Grapes");
<<5 //output

This method returns the new length of the array. To see if our value has been added to the array, console.log the variable, you should see something like this in your output:

<<["Bananas", "Mangos", "Apples", "Cherries", "Grapes"]

The new value has been added to our fruits array! Awesome!

unshift()

This method is similar to the push() method but instead, it appends the new value to the beginning of an array. Let’s add a new value to the beginning of our fruits variable.

fruits.unshift("Carrots");
<<6 //output

You can go ahead and console.log the fruits variable to see that carrots have been added to the beginning of our array.

<<["Carrots", "Bananas", "Mangos", "Apples", "Cherries", "Grapes"]

shift()

This method is similar to the pop() method but instead, it removes a value from the beginning of an array.

fruits.shift();
<<5 //output

Go ahead and console.log the fruits variable to view results.

<<["Bananas", "Mangos", "Apples", "Cherries", "Grapes"]

If you console.log your fruits variable the “Carrots” value should have been removed again and the length of the array is back to 5.

slice()

This method creates a subarray from the original array. It takes in two parameters. The starting point indicating where we want to start our new array, and the endpoint specifying where we want to stop the array.

Let us create an array of three fruits from our fruits array variable

fruits.slice(1,4); // starts at the second item (index of 1) and finishes at the fourth (index of 4)
<<["Mangos", "Apples", "Cherries"] //output

Note that this operation is non-destructive, i.e. no items are actually removed from the array, so if we look at our fruits array it’s still intact as seen below.

<<["Bananas", "Mangos", "Apples", "Cherries", "Grapes"]

There we go! Still there?

splice()

It removes items from an array and then inserts new items in their place. This method takes in two numbers,  the first number tells us the index at which to start the splice. The second number tells us how many items to remove from the array.

Let’s splice our fruit array variable, replacing the item in position 2 – “Apples” – with “Oranges”.

fruits.splice(2,1,"Oranges");
<<["Apples"] //output

The output shows that the value of index 2 has been replaced with oranges, and it was only one item that was removed. Lets console.log our array variable to see the result.

<<["Bananas", "Mangos", "Oranges", "Cherries", "Grapes"]

There you go. Apples have been replaced with Oranges.

reverse()

We can reverse the order of an array with this method.

fruits.reverse();
<<["Grapes", "Cherries", "Oranges", "Mangos", "Bananas"] //output

This changes the order of the array permanently.

sort()

We can sort the order of an array using this method.

fruits.sort();
<<["Bananas", "Cherries", "Grapes", "Mangos", "Oranges"] //output

Note that this method also changes the order of the array permanently. We can see that this sorted our array alphabetically. However, this does not work for numbers. Let’s Declare a new array of numbers.

let numbers =[8,9,10,11];
numbers.sort();
<<[10, 11, 8, 9] //output

The sort() method sorts numbers alphabetically, so 8 and 9 would come after 10 and 11. However, this can be fixed by using a callback function.

numbers.sort(function(x, y){
  return x - y
})
<<[8, 9, 10, 11] //output

There you go, our desired output. You can also reverse the sorting by going the other way round.

numbers.sort(function(x, y){
  return y - x
})
<<[11, 10, 9, 8] //output

concat()

This method can be used to merge an array with one or more arrays. Let’s declare another array variable and merge it with our fruits array.

let vegetables = ["Tomatoes", "Garlic", "Ginger", "Carbage"];

Let’s merge it with our fruits array.

fruits.concat(vegetables);
<<["Bananas", "Cherries", "Grapes", "Mangos", "Oranges", "Tomatoes", "Garlic", "Ginger", "Carbage"] //output

This does not change the fruits array, it simply creates another array combining the two arrays.

join()

This method can be used to turn the array into a string that comprises all the items in the array, separated by commas.

fruits.join();
<<Bananas,Cherries,Grapes,Mangos,Oranges //output

You can choose a separator other than comma by replacing it inside the parentheses. Let’s use an ampersand.

fruits.join(" & ");
<<Bananas & Cherries & Grapes & Mangos & Oranges //output

That’s it guys, 10 essential JavaScript array methods for easy data manipulation. Thanks for reading my article.