Hesbon limoAn array in JavaScript is a global data structure use to store data. A global data structure is one which can be accessed everywhwere in your code.
Arrays are important because it allows you to iterate over the stored data one by one because their indices are known. The biggest advantage of JavaScript arrays lies in the array methods.
JavaScript array methods are built in functions that allow efficient traversal and manipulation of arrays. They provide functionalities like removing, searching and iterating through array elements, enhancing code readability and productivity.
In this article we are going to cover fifteen most used array methods, which will make you a better JavaScript developer.
1. map
The map method allows you to loop on each element in the array and manipulate them according to your preference
The map method creates a new array.
Here's an example of how to use the map method
const numbers = [4,5,6,7,8];
const timesBy2 = (number) => number * 2;
const newNumbers = numbers.map(timesBy2)
console.log(newNumbers)
[output]
[ 8, 10, 12, 14, 16 ]
In the code above, the map method loops through each number in the array called numbers and multiplies it by two.
2. filter
The filter() array method creates a new array and returns the elements of the original array that passes a specific test implemented by a provided function.
Here's a code block showing how the filter method works
const numbers = [2,3,4,5,6,7];
const evens = (number) => number % 2 === 0;
const newNumbers = numbers.filter(evens)
console.log(newNumbers)
[output]
[// output 2,4,6]
In the code above, we write a function which tests the array of numbers and returns only the even numbers using the filter method.
3. slice
The slice method returns selected elements in an array from a start index to a (not inclusive) given end as a new array
The method does not alter the original array.
const numbers = [2,3,4,5,6,7];
const newNumbers = numbers.slice(2, 4)
console.log(newNumbers)
[output]
[ 4,5 it selects from index 2 to 4 ]
The code above selects elements starting from index two to four but four will not be included in the output therefore, it will return index two and three.
4. splice
The splice method is used to add, remove or replace elements in an array. It overites the old array and returns an new array.
Let's see how we use it to remove elements from an array
const numbers = [2,3,4,5,6,7];
numbers.splice(2,2)
console.log(numbers)
[output]
[ 2, 3, 6, 7]
The code above removes two array elements starting from index two.
The code below shows how to use splice to add elements into an array
// adding elements
const fruits = ['mango', 'banana', 'pawpaw'];
fruits.splice(2, 0, 'apples', 'oranges' )
console.log(fruits)
[output]
[ 'mango', 'banana', 'apples', 'oranges', 'pawpaw' ]
In the code above, we are adding two items from index two while deleting none from the original array.
Let's see how to use it to replace items
const fruits = [ 'mango', 'banana', 'apples', 'oranges', 'pawpaw' ]
fruits.splice(1,1, 'blueberry')
console.log(fruits)
[output]
[ 'mango', 'blueberry', 'apples', 'oranges', 'pawpaw' ]
In the code above, we are replacing one item from index one while also deleting an item in index one from the original array.
5. forEach
The forEach method loops through an array and executes a provided function for each array element. In the code below we are printing all the elements from an array once
const names = ['Boni', 'Alex', 'Clinton', 'Kevin'];
names.forEach((name) => {console.log(name)});
[output]
[
Boni
Alex
Clinton
Kevin
]
6. some
The some method checks if some of the elements meets a certain condition passed in the function and returns true is some meet the condition and false if none meets the condition.
const numbers = [2,3,4,5,6,7];
const greaterThan1 = (number) => number > 1;
const isGreaterThan1 = numbers.some(greaterThan1)
console.log(isGreaterThan1)
[output]
[true]
The code above checks if some numbers are greater than one and returns true because some numbers meet the condition otherwise it would have returned false.
7. every
The every method iterates through an array and checks if all the elements satisfies a certain condition passed via a callback function. It is used to verify if all the elements in an array satisfies a certain condition. It returns true if all elements satisfies the condition otherwise false.
const numbers = [2,3,4,5,6,7];
const greaterThan1 = (number) => number > 4;
const isGreaterThan1 = numbers.every(greaterThan1)
console.log(isGreaterThan1)
[output]
[false]
The code above returns false since all the numbers are not greater than four.
8. fill
The fill method fills specified elements into an array and overites the original array giving a new array. If the start and end positions are not specified it fills the whole array with the new element.
const fruits = ["Banana", "Pawpaw", "Apple", "Orange"];
fruits.fill("Avocado");
console.log(fruits)
[output]
[ 'Avocado', 'Avocado', 'Avocado', 'Avocado' ]
In the code above, the start and end position is not specified so it fills the whole array with Avocado
Now let's see the one where start and end positions are specified.
const fruits = ["Banana", "Pawpaw", "Apple", "Orange"];
fruits.fill("Avocado", 2,4);
console.log(fruits)
[output]
[ 'Banana', 'Pawpaw', 'Avocado', 'Avocado' ]
The code above fills the array starting from index two to four but four not being included with the new element.
9. push
The push method adds new elements to the end of an array and changes the old array returning the new modified array. You can add a single element or many.
const cars = ['Toyota', 'Mazda', 'Honda']
cars.push('Mitsubishi', 'Nissan', 'Ford')
console.log(cars)
[output]
[ 'Toyota', 'Mazda', 'Honda', 'Mitsubishi', 'Nissan', 'Ford' ]
10. pop
The pop method removes the last element of an array and returns a new array with a missing last element.
const cars = ['Toyota', 'Mazda', 'Honda','Mitsubishi', 'Nissan', 'Ford'];
cars.pop();
console.log(cars);
[output]
[ 'Toyota', 'Mazda', 'Honda', 'Mitsubishi', 'Nissan' ]
In the code above, the last element which is 'Ford' has been removed.
11.unshift
The method adds new elements to the beginning of an array. You can add a single element or multiple elements to the new array. It overwrites the original array.
const fruits = ["Pawpaw", "Orange", "Apple", "Mango"];
fruits.unshift("Cucumber","Pineapple");
console.log(fruits)
[output]
[ 'Cucumber', 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ]
12.shift
The shift method removes the first element of an array and returns a new array by overwriting the original array.
Here's is an example
const fruits = [ 'Cucumber', 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ];
fruits.shift();
console.log(fruits)
[output]
[ 'Pineapple', 'Pawpaw', 'Orange', 'Apple', 'Mango' ]
13. find
The find method is used to search for an element in an array. I t returns the first element which satisfies the condition passed ina a callback function. If no element satisfies the conditon it returns undefined.
```javascript =
const numbers =[1,2,3,4,5,6,7];
const number = numbers.find((number) => number > 5);
console.log(number);
```text=
[output]
[6]
The code above returns 6 since it's first element to meet the condition greater than 5.
14. findIndex
The findIndex returns the position of the first element that satisfies a condition that was passed. It returns -1 if no match is found. It does not overwrite the original array. It returns true or false.
Here's an example
const numbers =[1,2,3,4,5,6,7];
const number = numbers.findIndex((number) => number > 5);
console.log(number);
[output]
[5]
The code above returns 5 because 5 is the index of the first number that satisfies the condition greater than five.
15. includes
The includes method checks if a specific element is present in an array. It returns true if its present or false if it's not present.
const numbers = [1,2,3,4]
console.log(numbers.includes(3))
[output]
[5]
Conclusion
JavaScript array methods are very important built-in functions used to write scalable and readable code. This article covered fifteen most used array methods. I would recommend reading Javascript oficial documentation here in order to understand more about the array methods. Here is a link to my github for reference.
Happy coding
