Hi guys let's see most used Javascript array methods. Dealing with data in javascript with the help of these functions becomes very easy. So let's get started
The first one in the list is
Let's see how to use filter method in javascript
here we are using this array for example
let players = [ {'name': 'Rome', 'cash': 230, }, {'name': 'Roger', 'cash': 25, }, {'name': 'Andrew', 'cash': 100, }, {'name': 'Mark', 'cash': 450, }, {'name': 'Albert', 'cash': 78, }, {'name': 'John', 'cash': 1200, }, {'name': 'Steve', 'cash': 590, }, {'name': 'Jack', 'cash': 367, }, {'name': 'Manu', 'cash': 670, }, {'name': 'Jacky', 'cash': 456, }, {'name': 'Tom', 'cash': 565, }, ];
Now let's use filter function on this array,
//Filter data in array let returnedData = players.filter((item)=>{ return item.cash < 200; }) console.log(returnedData);
So here we added a condition to get only those values where cash is less than 200. Here is the outcome
Array(3) [ {…}, {…}, {…} ] 0: Object { name: "Roger", cash: 25 } 1: Object { name: "Andrew", cash: 100 } 2: Object { name: "Albert", cash: 78 } length: 3 <prototype>: Array []
we are going to use this method on same array like this.
// Map method let returnedData = players.map((item)=>{ return item.cash < 200; }); console.log(returnedData);
and we get the output like this
0: false 1: true 2: true 3: false 4: true 5: false 6: false 7: false 8: false 9: false 10: false length: 11 <prototype>: Array []
You can notice it checks where the value is less than 200 and returns "true" or "false" instead of returning value it returns boolean. that is the main difference as compare to filter method.
This is another useful method, where you can find the value and method returns first match from the array.
Notice it will return first match where it meats the provided condition. here is how
// Find method let returnedData = players.find((item) => { return item.cash > 300; }) console.log(returnedData);
And it returns
cash: 450 name: "Mark" <prototype>: Object { … }
Notice it checks for values where cash is more than 300 but it returns only one element from array. Where it find more than 300 true first.
This method will return true if condition is true on every element of array otherwise it will return false. Here is how
// Every method let returnedData = players.every((item)=>{ return item.cash < 1000; }); console.log(returnedData);
and output looks like this
false
it returns "false" because we have 1 value in array where cash is more than 1000 "{'name': 'John', 'cash': 1200, }".
checks if any or some values are present in array based on condition provided, Here is how
// Some method let returnedData = players.some((item)=>{ return item.cash > 1000; }); console.log(returnedData);
this returns "true" because we have a value where cash is more than 1000. So it a single value returns true. Some method will return true.
this method helps in summing up some numbers. Here is a example
// Reduce method let returnedData = players.reduce((total,item)=>{ return item.cash + total; }, 0); console.log(returnedData);
Gets the cash from each element of array and adds it to in "total" variable. Note we provided 0 as second parameter as total variable is 0 when initiated.
this returns "4731" as total.
this checks if array has the value.
// Includes method let marks = [23, 34 , 56, 78, 3, 45]; console.log(marks.includes(23));
This will return as True as 23 is present in array.
This method will loop through each element of array and we can do any operation we want on those elements. Here is how
// Foreach method let users = []; players.forEach((item)=>{ users.push(item.name); }); console.log(users);
Here we are getting all names from array and displaying them
Outcome looks like this
0: "Rome" 1: "Roger" 2: "Andrew" 3: "Mark" 4: "Albert" 5: "John" 6: "Steve" 7: "Jack" 8: "Manu" 9: "Jacky" 10: "Tom" length: 11 <prototype>: Array []
Now we can perform further operations on this names array. Let's sort this array
To sort an array we can use "sort" and "reverse" methods. here is how
// Sorting data let users = []; players.forEach((item)=>{ users.push(item.name); }); console.log(users.sort());
And outcome will look like this
0: "Albert" 1: "Andrew" 2: "Jack" 3: "Jacky" 4: "John" 5: "Manu" 6: "Mark" 7: "Roger" 8: "Rome" 9: "Steve" 10: "Tom" length: 11 <prototype>: Array []
Here data is all sorted you can even sort it descending order by adding "reverse" method like this
console.log(users.sort().reverse());
Outcome will be changed
0: "Tom" 1: "Steve" 2: "Rome" 3: "Roger" 4: "Mark" 5: "Manu" 6: "John" 7: "Jacky" 8: "Jack" 9: "Andrew" 10: "Albert" length: 11 <prototype>: Array []
Last but not least "indexOf" method
Method returns the index of value from array. Here is an example
let marks = [23, 34 , 56, 78, 3, 45, 56, 45, 23, 435, 56]; console.log(marks.indexOf(56));
The output comes "2". as the first occurrence of 56 at second index.
If you want to get all index values for "56" here then we can use foreach loop method, Like this
let marks = [23, 34 , 56, 78, 3, 45, 56, 45, 23, 435, 56]; let indexes = []; marks.forEach((item, index)=>{ if(item == 56){ indexes.push(index); } }); console.log(indexes);
Here we are looping through and getting index values if "item" is equals 56.
This code gives the output like this
0: 2 1: 6 2: 10 length: 3 <prototype>: Array []
Array of 3 values. Mainly the index values for 56 in array.
Check our Video guide for better understanding and Practical examples.
Hope this helps.