5 JavaScript Array methods you need to know!
source link: https://dev.to/avneesh0612/5-javascript-array-methods-you-need-to-know-34kj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
While building applications you would have noticed yourself using Array's a lot. So let's take a look at the 5 Array methods.
To show you all the methods with examples, I am going to create a simple Array with some fruits and their prices-
const fruits = [
{
name: "Mango",
price: 3,
},
{
name: "Apple",
price: 5,
},
{
name: "Banana",
price: 10,
},
];
1. Map
A map function is similar to loop and if you are a React developer you probably have seen this function be used quite a lot. So let's understand this properly with an example-
function getFruitNames() {
return fruits.map((fruit) => fruit.name);
}
console.log(getFruitNames());
The getFruitNames
maps through the fruits Array and returns the name of each fruit. So if we run the function it will return an Array with all the fruit names-
['Mango', 'Apple', 'Banana']
2. Filter
If you want to filter some products out based on some conditions like getting the fruits that cost more than 4 then we will use the filter function to do so. This is how you use a filter function-
function getCostlyFruits() {
return fruits.filter((fruit) => fruit.price > 4);
}
console.log(getCostlyFruits());
This function returns-
[
{ name: "Apple", quantity: 5 },
{ name: "Banana", quantity: 10 },
];
3. Reduce
Reduce lets you add up a bunch of numbers inside an Array, in a very easy way.
Let's see it in action-
function getTotalCost() {
return fruits.reduce((acc, fruit) => acc + fruit.price, 0);
}
console.log(getTotalCost());
So the first parameter is the number formed by adding the previous numbers and the second parameter is the amount that will get added to the first value. The 0 that you see at the end can be replaced with the number you want the count to start with.
This function outputs a number, in this case- 18
4. Find
If you want to find fruit based on its price or by its name, then this is the method you are looking for.
function getFruitByName(name) {
return fruits.find((fruit) => fruit.name === name);
}
console.log(getFruitByName("Mango"));
This will return the Mango object when run-
{ name: 'Mango', price: 3 }
5. Includes
This method lets you check if there is an item in that Array. Suppose I want to check if banana is present in the fruits Array. If it is present then it will return true, otherwise false. You can't check items inside an object in the Array, so I am going to use the Array with the names from our getFruitNames
function-
const fruitNames = getFruitNames();
console.log(fruitNames.includes("Orange"));
This will return false
as Orange isn't inside the fruits Array, but if we try Apple then it would return true
-
const fruitNames = getFruitNames();
console.log(fruitNames.includes("Apple"));
Hope you found this useful. If you have any questions, drop them down in the comments. Until next time Peace ✌️
Useful Links-
Recommend
-
23
Array.every() and Array.some() are handy JavaScript array methods that can help you test an array against specified criteria. In this post, we’ll quickly learn how to use them. Array...
-
5
-
10
-
6
Apr 25th, 201820 JavaScript Array and Object Methods to make you a better developer👇 Download Show
-
10
5 Best High Order Array Methods in JavaScript | by Greg Petropoulos | Oct, 2021 | Medium Greg Petropoulos ・ Oct 24, 2021 ・
-
8
The findLast() and findLastIndex() array methods are here! We all know about JavaScript find() and findIndex() array methods that accept a test function and return the first fo...
-
4
A few methods to check if all values in the JavaScript array are the same Published: 2022.02.24 | 2 minutes read There are many solutions to the same problem in programming, and that’s one of my favourite things about it. Chec...
-
1
-
3
JavaScript Loop Over Object: 4 Methods You Need to KnowBy Raja S / February 18, 2024 /
-
3
Welcome,I'm sure you have come across something like, you don't need Lodash, Underscore or Ramda, but this is the opposite.When ES6 came, people got excited and started...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK