Handy Javascript Array Methods
There are really handy array methods in javascript to keep in mind when trying to manipulate data within an array to get your desired output. I would be going over seven of them in this article.
- filter(): Creates a new array with elements that match a specified condition. It does not change the original array E.g
const array = [
{name: "John", city: "New York"},
{name: "Mike",city: "Los Angeles"},
{name: "Joseph", city: "Los Angeles"}
];const filteredArray = array.filter((item) => item.city === "Los Angeles");console.log(filteredArray);//output
[
{ name: 'Mike', city: 'Los Angeles' },
{ name: 'Joseph', city: 'Los Angeles' }
]
In the above snippet, The filteredArray is the array returned containing only the objects that have the city of Los Angeles.
2. find(): This method returns the first element that matches the given condition. It returns undefined if no element is found matching the condition. It does not change the original array. E.g
const array = [
{name: "John", city: "New York"},
{name: "Mike",city: "Los Angeles"},
{name: "Joseph", city: "Los Angeles"}
];const foundItem= array.find((item) => item.city === "Los Angeles");console.log(foundItem);//output
{ name: 'Mike', city: 'Los Angeles' }
Here the find method returns just the first element that matched the condition of the city of Los Angeles.
3. map(): (This is kind of tricky for me to explain 😆) Ok, this method Creates an array from the original array containing the output of the function running on every element of the array. E.g
const numberArray = [2, 4, 1, 9];
const squareOfNumberArray = numberArray.map(number => number * number);console.log(squareOfNumberArray);//output
[ 4, 16, 1, 81 ]
4. some(): This checks if any element of an array passes a given condition and returns true if any element in the array passes the condition, and false if no element passes the condition. E.g
const array = [
{name: "John", city: "New York"},
{name: "Mike",city: "Los Angeles"},
{name: "Joseph", city: "Los Angeles"}
];const livesInNewYork = array.some((item) => item.city === "New York");console.log(livesInNewYork);//output
true
In the example above, some() checks if any element in the array contains the city of New York, and since at least an element has that value it returns true.
5. every(): This checks if every element of an array pass a given condition and return true if every element in the array pass the condition, and false if at least one element does not pass the condition. E.g
const array = [
{name: "John", city: "New York"},
{name: "Mike",city: "Los Angeles"},
{name: "Joseph", city: "Los Angeles"}
];const livesInNewYork = array.every((item) => item.city === "New York");console.log(livesInNewYork);//output
false
In the example above, not every element of the array contains the city of New York, every() returned false.
6. reduce(): this executes a function known as the reducer function on every element of the array and returns the accumulated result. E.g
const cartItems = [
{item: "Pen", amount: 20},
{item: "car", amount: 50000}
];const total = cartItems.reduce((totalAmount, eachItem) => totalAmount + eachItem.amount, 0);console.log(total);//output
50020
Here, the reduce() takes the function that sums all amount fields in the array and takes an initial amount for the total there we defined as 0 because before the addition, the total is actually 0.
7. sort(): This method sorts the array and overrides the initial array. E.g
const ages = [20, 14, 4, 45, 25, 10];ages.sort((first, last)=> first - last);console.log(ages);//output
[ 4, 10, 14, 20, 25, 45 ]
There are lots of array methods in javascript these few I felt should be kept handy. and the next time before you begin spending time writing your custom functions in your program, check if a method exists for what you want to do. You can have a look at the MDN docs for javascript arrays or W3schools for more array methods
Emmanuel Nwanochie
Software Developer | Frontend Developer
https://nwanochie.com
emmanuelnwanochie247@gmail.com
