How to Utilize Javascript Array Methods

Hi guys!

In this article, I’ll be explaining Javascript array methods. Before going in, let's look at what an array is.

What is an Array?

An array is a data structure that allows you to store multiple values together in one variable. These values may include:

• String
• Boolean
• Null
• Number

Below is an example of an array:

const flowers = [ 'Lily', 'Rose', 'Orchids', 'Hibiscus'];

Accessing Array Elements

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.

Array Methods

There are several JavaScript array methods, but we will go over a few.

• concat()

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'];

• sort()

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];

• indexOf()

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

• push()

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'];

• unshift()

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'];

• pop()

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

• shift()

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

• slice()

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.