adebomiolusegun

Posted on Oct 5, 2022

Javascript arrays and array methods

#javascript #programming #webdev #tutorial

What are Arrays?

An array is a collection of variables that store multiple values in a single variable. Arrays indicate the beginning and end of the element by using a square bracket.
example

let cities = ["Tokyo", "Mexico", "São Paulo", "Cairo"];

Javascript arrays make use of index numbers. It begins by counting the element by 0 (zero).

                   0        1        2          3
let cities = ["Tokyo", "Mexico", "São Paulo", "Cairo"];

Array Methods

The toString

Strings are automatically separated with commas using the toString method.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.toString(2);
console.log(x);
output [Tokyo,Delhi,Mexico,São Paulo,Mumbai,Cairo]

The isArray method

The array method determines whether the value is an array and returns true if it is. Otherwise, a false positive is returned.

let cities = ["Tokyo", "Delhi", "Mexico",  "São Paulo", "Mumbai" ,"Cairo"];
let x = Array.isArray(cities);  
console.log (x); // As a result, this will return True.

let cities = "Mumbai";
let x = Array.isArray(cities);  
console.log (x);  
The result will be false.

The Push Method

The push method adds an element at the end of the array and returns the new length.
example

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.push("Hong kong");  
console.log (x);  
x will have the value 7
This is the outcome ["Tokyo," "Delhi," "Mexico," "So Paulo," "Mumbai," "Hong Kong"];

You can add as many elements as you want using the push method.

The Pop Method

What the pop method does is remove the last element from an array and return that element.
example

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.pop();    
console.log (x); 
 x will have the value Cairo.
 the outcome will be ["Tokyo," "Delhi," "Mexico," "So Paulo," and "Mumbai"];

The Shift Method

The shift method removes the first element from an array and returns the shifted element.
example

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cars.shift();  
console.log(x); 
the value of x will be Tokyo
This will be the result ["Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];

The Unshift Method

The unshift method adds an element to the beginning of an array and returns the length.
example

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.unshift("Hong Kong"); 
console.log (x); 
x will be set to 7
The result will look like this [ "Hong Kong" "Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" "Cairo" ];

The IndexOf Method

indexOf returns the first index for an element. It will return -1 if the index is not found.
example

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Mexico", "Cairo"];
let x = cities.indexOf("Mexico"); 
console.log (x); 
 returns a value of 2

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.indexOf("Hong Kong"); 
console.log(x); 
//this will return -1 because we don't have Hong Kong in the list of our elements.

This will search Mexico starting from the 3.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo", "Mexico"];
let x =cities.indexOf("Mexico", 3); 
console.log(x); 
 this will return 6

The lastIndexOf Method

The lastIndexOf returns the last index of the last element. It will return -1 if the index is not found.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Mexico", "Cairo"];
let x =cities.lastIndexOf("Mexico"); 
console.log (x); 
this will return a value of 5

The reverse method

The reverse method reverses the order of the elements in an array.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.reverse(); 
console.log(x);   
 The result will look like this ['Cairo', 'Mexico', 'Mumbai', 'São Paulo', 'Mexico', 'Delhi', 'Tokyo'].

The sort method

Arrays are sorted in descending order using the sort method.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.sort(); 
console.log(x);  
this will be the result ['Cairo', 'Delhi', 'Mexico', 'Mexico', 'Mumbai', 'São Paulo', 'Tokyo']

Strings can be sorted in descending order with the aid of the reverse method.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.sort(); 
cities.reverse();
console.log(x);  
The final result will be ['Tokyo,' 'So Paulo,' 'Mumbai,' 'Mexico,' 'Delhi,' 'Cairo.']

Numerical sorting

Sorting numbers is not similar to sorting alphabets. When sorting numbers, use the compare function.
Ascending order of numbers.

let cities =[5, 20, 40, 10, 30, 60, 50];
let x =cities.sort(function (a, b) {return a - b});
console.log(x); 
output [5, 10, 20, 30, 40, 50, 60]

Descending order of numbers.

let cities =[5, 20, 40, 10, 30, 60, 50];
let x =cities.sort(function (a, b) {return b - a});
console.log(x); 
output [60, 50, 40, 30, 20, 10, 5]

The method includes

The include method checks if an element is inside an array and it returns the result as a boolean (True or false).

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x = cities.includes("tokyo"); 
console.log(x); 
The result will be true.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.includes("Hong Kong"); 
console.log(x); 
The result will be false, because Hong Kong is not among the elements listed.

The join method

The join method concatenates every element in an array using a comma or another string separator, then returns the array as a string.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Mexico", "Cairo"];
let x =cities.join(); 
console.log(x); 
 This will be the result  Tokyo,Delhi,Mexico,São Paulo,Mumbai,Mexico,Cairo

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Mexico", "Cairo"];
let x =cities.join(" - "); 
console.log(x); 
This will be the result Tokyo - Delhi - Mexico - São Paulo - Mumbai - Mexico - Cairo

When adding something to an array, it gives you the resulting length. When you remove it, it gives you the item that you removed.

The index number can also be used to access an array.

You can access an element by its index number.

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities[ 3];  
console.log(x);
The output will be São Paulo

You can change elements in an array by its index number. Look at the example below.

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities[3] = "Abuja";  
console.log(x);
"São Paulo" will be replaced with "Abuja"

The splice method

The splice method adds and removes array elements.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.splice(7,0, "abuja");
console.log(cities);
output ['Tokyo', 'Delhi', 'Mexico', 'São Paulo', 'Mumbai', 'Cairo', 'abuja']

In the preceding example, we added an element at position 7. You can add more elements with this method.
New elements can also be inserted between existing ones.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.splice(2,0, "abuja", "lagos");
console.log(cities)
output ['Tokyo', 'Delhi', 'abuja', 'lagos', 'Mexico', 'São Paulo', 'Mumbai', 'Cairo']

We added two elements to position 2.
We will see how we can remove the element.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.splice(2,2);
console.log(cities);
output ['Tokyo', 'Delhi', 'Mumbai' ,'Cairo']

We removed two elements from position 2.
Elements can be replaced using the splice method.

let cities = ["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.splice(2, 2, "abuja", "lagos");
console.log(cities);
The output ['Tokyo', 'Delhi', 'Mumbai', 'Cairo']

The slice method

The slice method slices a portion of an array and returns the sliced portion as the new array. It slices elements from beginning to end. The index of the element determines its beginning to end.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.slice(2, 5);
console.log(x);
The output ['Mexico', 'São Paulo', 'Mumbai']

You can start from the end and slice.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" ,"Cairo"];
let x = cities.slice( -4, -1);
console.log(x);
The output ['Mexico', 'São Paulo', 'Mumbai']

This example slices out a portion of an array starting from the 2 array element.

let cities =["Tokyo", "Delhi", "Mexico", "São Paulo", "Mumbai" , "Cairo"];
let x = cities.slice(2);
console.log(x);
The output ['Mexico', 'São Paulo', 'Mumbai', 'Cairo']

Conclusion

Arrays and objects are quite similar. The distinction is that objects use a named index while arrays use a numbered index in JavaScript.For further information on arrays, I suggest visiting w3schools.com and developer.mozilla.org.