Introduction
JavaScript Arrays are list-like objects that provide a way to store multiple values together inside a single variable. The JavaScript Array object comes bundled with a large number of utility methods that let you perform some frequently needed operations on the arrays with minimal effort. In this article, we'll go over 10 array methods that every JavaScript developer should know:
ForEach method
This method allows you to iterate over the elements of an array.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
countries.forEach((country, i) => {
console.log(`${i} : ${country}`);
});
/* -- Output
0 : India
1 : Russia
2 : Canada
3 : Australia
*/
The forEach method accepts a callback function that accepts the current element that is being processed in the array. It can also accept one more additional parameter index that contains the index of the current element in the array.
Filter method
As the name suggests filter method is used to filter the elements of a JavaScript array based on the condition provided in the callback back method. It returns a new array that contains the elements that pass the condition provided inside the callback function.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
const filtered = countries.filter((country) => {
return country.charAt(0) === 'I'
});
console.log(filtered);
// Output:
// ["India"]
In the above example, we're filtering the list of countries that starts with the letter I at the beginning of their names.
Map method
The map method accepts a callback function that accepts the current array element and creates a new array based on the output of the callback function provided.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
const updatedCountries = countries.map((country) => {
return country.toUpperCase();
});
console.log(updatedCountries);
// Output - ["INDIA", "RUSSIA", "CANADA", "AUSTRALIA"]
In the above example, the callback function to the map method capitalizes each element of the array and creates a new array consisting of country names in capitalized format.
FindIndex method
The findIndex method accepts a callback function that contains the criteria to search the array element and returns the index of the first element that matches the criteria.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
const index = countries.findIndex((country) => {
return country.length > 5;
});
console.log(index); // Output : 1
In the above code, the findIndex will return 1 as the first name that matches on criteria is on the 1st index.
Some method
The some method checks if at least one of the array elements meet the criteria provided in the callback function. If the criteria is met it'll return true otherwise it'll return false.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
const flag = countries.some((country) => {
return country.length > 8;
});
console.log(flag); // Output : true
In the above code, Australia meets the requirements; i.e., its length is greater than 8. Hence some method will return true, even if the rest of the elements fail the criteria.
Every method
The every method is similar to some method. It also checks if the elements of the array meet the criteria provided by the callback function. But, unlike the some method it returns true only when all the elements of the array meet the criteria.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
const flag = countries.every((country) => {
return country.length > 8;
});
console.log(flag); // Output : false
In the above code, the flag variable will contain false as the only element that passes the test is Australia.
Includes method
The includes method checks if a specific value exists in the array. If the value exists it returns true otherwise it'll return false.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
console.log(countries.includes('India')); // Output : true
console.log(countries.includes('Japan')); // Output : false
In the above code, the first console.log will output true while the second will produce false. As the value, India exists in the array while Japan does not.
Reverse method
The reverse method simply reverses the position of elements in the array. One thing to keep it in mind is it mutates the existing array and returns the reference to that array.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
console.log(countries.reverse());
// Output: ["Australia", "Canada", "Russia", "India"]
Concat method
The concat method could be used to merge two arrays.
const countries = ['India', 'Russia', 'Canada', 'Australia'];
const moreCountries = ['Japan', 'Nepal'];
const allCountries = countries.concat(moreCountries);
console.log(allCountries);
// Output: ["India", "Russia", "Canada", "Australia", "Japan", "Nepal"]
In the above code snippet, the concat method simply adds Japan and Nepal at the end of the first array i.e. countries, and returns the new array which is being stored inside the allCountries variable.
Splice method
The splice method is used to add, remove, or update the elements of a JavaScript array. Let's understand this in detail with some examples
const countries = ['Japan', 'Russia', 'Canada', 'Australia'];
countries.splice(0, 1);
console.log(countries);
// Output: ["Russia", "Canada", "Australia"]
In the above example, we're creating a countries array with 4 values. Then we use the splice method to delete the first element of the array. The first parameter 0 defines the index from where the splice method will start deleting elements and the second parameter one indicates the number of elements that need to be deleted. Since we've specified 1 it'll delete only the first element. If we had specified 2 as the second parameter, it would have deleted the 2 elements from the array starting from index 0 i.e. Japan and Russia.
You could also add new elements to the array using the splice method.
const countries = ['Japan', 'Russia', 'Canada', 'Australia'];
countries.splice(0, 1, 'India');
console.log(countries);
// Output: ["India", "Russia", "Canada", "Australia"]
The above code will first remove the first element from the array and then will return a new element mentioned as the third parameter in that place.
And that's it!
I hope you enjoyed this article. In case you've any queries or feedback regarding this article, please do let me know in the comment section.