4

JavaScript Array Methods made easy : array.filter() (Part 1)

 2 years ago
source link: https://dev.to/parnikagupta/javascript-array-methods-you-need-to-know-right-now-array-filter-part-1-21nn
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.
Cover image for JavaScript Array Methods made easy : array.filter() (Part 1)

JavaScript Array Methods made easy : array.filter() (Part 1)

Aug 12

・3 min read

What is an Array?
An array is a variable that allows us to hold multiple values at a time. In normal situations we use variables to store single values:

let item1 = “Milk”;
let item2 = “Butter”;
let item3 = “Bread”;
Enter fullscreen modeExit fullscreen mode

But who’s grocery list is ever that small? And what if it’s not a grocery list with limited items but a list of transactions made by your bank account and you want to search for one particular transaction among hundreds? It would not be feasible to assign a designated variable for each transaction and then iterate over them when required.
Whether you want to make a grocery list, or need to list down things to do in a day, an array is your answer!

const arrayName =[item1, item2, item3, …]; //Creating an Array
const grocery = [“Milk”, “Butter”, “Bread”]; //Array of grocery items
Enter fullscreen modeExit fullscreen mode

Array Methods
JavaScript provides multiple methods that make functioning with arrays easier. Here are a few that you will surely find yourself using quite often.
Here is an example of an Array that we will be using to understand the array methods:

const items =[
{name: "Milk", price: 30},
{name: "Butter", price: 250},
{name: "Bread", price: 25},
{name: "Curd", price: 35},
{name: "Juice", price: 20},
{name: "Eggs", price: 40},
{name: "Biscuits", price: 10}
]
Enter fullscreen modeExit fullscreen mode

filter()
The filter() method filters an array based on a test function and returns the resultant array. In simpler terms, it takes in an array, passes the elements of the array through a function, and only returns an array of the elements that return true.

Note:

  • filter() doesn’t work for empty array items
  • filter() doesn’t change the initial array

Syntax

array.filter(function(currentValue, index, arr), thisValue)
Enter fullscreen modeExit fullscreen mode

Parameters (* represents required parameters)
function*: Callback function, tests each element in an array. Returns true to keep the element and false to skip the element. It further takes 3 arguments:
currentValue*: Value of current element
index: Index of the current element
arr: Array object the current element belongs to
thisValue: Value to be used as “this” when executing the function. If the parameter is empty, “undefined” is passed as “this” value.

const filteredItems = items.filter((item) => {
return item.price < 35; 
})
console.log(filteredItems);
Enter fullscreen modeExit fullscreen mode

Output : filteredItems Array

(4) [{…}, {…}, {…}, {…}]
0: {name: "Milk", price: 30}
1: {name: "Bread", price: 25}
2: {name: "Juice", price: 20}
3: {name: "Biscuits", price: 10}
length: 4
[[Prototype]]: Array(0)
Enter fullscreen modeExit fullscreen mode

Looks like it worked! All the items that did not have price under 35 are not included in our filteredItems array.
Now let’s see if there is any change to our items array!

console.log(items);
Enter fullscreen modeExit fullscreen mode

Output : items array

(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "Milk", price: 30}
1: {name: "Butter", price: 250}
2: {name: "Bread", price: 25}
3: {name: "Curd", price: 35}
4: {name: "Juice", price: 20}
5: {name: "Eggs", price: 40}
6: {name: "Biscuits", price: 10}
length: 7
[[Prototype]]: Array(0)
Enter fullscreen modeExit fullscreen mode

Our items array is just as it was in the beginning.
This was about the filter() array method. Here is a little illustration I made to help you understand it better.

If you want to learn more about filter() method, here are a few references:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
https://www.youtube.com/watch?v=0qsFDFC2oEE
https://www.digitalocean.com/community/tutorials/js-filter-array-method


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK