Javascript arrays and array methods
Tags: javascript, programming, webdev, tutorial
Published: 2022-10-05 22:56:00



## 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.