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

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”;

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

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}
]

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)

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);

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)

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);

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)

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