Hi guys!
In this article, I’ll be explaining Javascript array methods. Before going in, let's look at what an array is.
An array is a data structure that allows you to store multiple values together in one variable. These values may include:
Below is an example of an array:
const flowers = [ 'Lily', 'Rose', 'Orchids', 'Hibiscus'];
An array is enclosed using [ ]
brackets, and each element is separated by a comma. The index number of each element in an array is used to access it. The first index of an array is zero (0). Using our previous example, let us retrieve the element Rose
using its index:
const flowers = [ 'Lily', 'Rose', 'Orchids', 'Hibiscus'];
console.log(flowers[1]); //returns Rose
We got our element Rose
by using the []
brackets that hold its index number. Now let's dive into array methods.
There are several JavaScript array methods, but we will go over a few.
As the name implies, this method links two or more arrays and then returns the result:
const firstName = ['Sam', 'Tobi'];
const lastName = ['Smith','Johnson'];
//using the concat method
let fullName = firstName.concat(lastName);
console.log(fullName);
Output:
['Sam', 'Tobi', 'Smith','Johnson'];
This method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending and it is built upon converting the elements into a string:
let classNumber = [12, 4, 34, 1, 9];
classNumber.sort();
console.log(classNumber);
Output:
[1, 4, 9, 12, 34];
This method searches for an element in an array and returns its index:
const candyBar = ['Twix',' Snickers',' Kit Kat'];
console.log(candyBar.indexOf('Snickers'));
Note: If the element is not in the array, it returns
-1
Output:
1 //returns the index 1
The push()
method adds an element at the end of the array and returns the new length:
const candyBar = ['Twix',' Snickers',' Kit Kat'];
candyBar.push('Milky way');
console.log(candyBar);
Output:
['Twix',' Snickers',' Kit Kat', 'Milky way'];
This method adds an element to the beginning of the array:
const candyBar = ['Twix',' Snickers',' Kit Kat', 'Milky Way'];
candyBar.unshift('Toblerone');
console.log(candyBar);
Output:
['Toblerone', 'Twix',' Snickers',' Kit Kat', 'Milky way'];
The pop()
method removes the last element in the array and returns the removed element:
const candyBar = ['Toblerone','Twix',' Snickers',' Kit Kat', 'Milky Way'];
candyBar.pop();
console.log(candyBar);
Output:
Milky Way
The shift()
method is the opposite of unshift()
. This method removes an element from the beginning of the array and returns it:
const candyBar = ['Toblerone','Twix',' Snickers',' Kit Kat', 'Milky Way'];
candyBar.pop();
console.log(candyBar);
Output:
Toblerone
This method cuts out a specified part of an array using its index and returns the result. The slice() method takes in two parameters: start
and end
. The array is sliced from the start
index and the end
index. The end
index is excluded. The array remains unchanged.
Using the slice()
method, let us take out the string Kit Kat
:
const candyBar = ['Twix',' Snickers',' Kit Kat', 'Milky Way', 'Bounty'];
console.log(candyBar.slice(4, 5));
Output:
['Bounty'];
Also published here.