JavaScript Array Methods made easy : array.filter() (Part 1)
Tags: javascript, react, redux, webdev
Published: 2021-08-12 15:12:33

**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:
```javascript
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!
```javascript
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:
```javascript
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**_
```javascript
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.
```javascript
const filteredItems = items.filter((item) => {
return item.price < 35; 
})
console.log(filteredItems);
```
**Output** : *filteredItems* Array
```javascript
(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!
```javascript
console.log(items);
```
**Output** : _items_ array
```javascript
(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.

![array.filter() illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7acv3lpxzv1damp99lwq.png "array.filter(): illustration by Parnika Gupta")


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