paint-brush
How to Utilize Javascript Array Methodsby@somto
398 reads
398 reads

How to Utilize Javascript Array Methods

by Somtochukwu NwosuFebruary 13th, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Arrays are a data structure that allows us to store multiple values together in one variable. An array is enclosed using `[ ]` brackets, and each element is separated by a comma. The first index of an array is zero (0). Using our previous example, let us retrieve the element `Rose` using its index: 1.

People Mentioned

Mention Thumbnail
featured image - How to Utilize Javascript Array Methods
Somtochukwu Nwosu HackerNoon profile picture


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.