Filter Array Method
Tags: webdev, javascript, beginners, programming
Published: 2023-08-24 23:00:00


Hey there guys 😀, We’ll be talking about `filter()` method in this article. I will explain exactly what this method does and how you can use it. So let’s dive right in 😉

## 🗃️ What is `filter()` method?

The **`filter()`**method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function. Basically what this means is that the **`filter()`** method filters out the only elements that meet the conditions in a function. Let’s see an example 👇🏾

```jsx
const fruits = ['Apple', 'Banana', 'grape', 'mango', 'orange'];

const filterFruit = fruits.filter((fruit) => fruit === 'grape');

console.log(filterFruit); //output: grape
```

In this example above, we created an array of **`fruits`** and used the **`filter()`** to filter out everything that isn’t **`grape`** and keep just the **`grape`**. Let’s explain the second line of the code for more clarity. What the second line of code means is that: given an array called fruits, take each element in the array and check if it exactly matches the string **`grape`**. If it doesn’t discard it, and if it does add it to a new array (which in this case is called**`filterFruit`** ).

Let’s take one more example 👇🏾

```jsx
const gadgets = [
  { name: 'Iphone', price: 3000, location: 'Delta' },

  { name: 'Samsung Galaxy', price: 10000, location: 'Lagos' },

  { name: 'Iphone', price: 1000, location: 'Delta' },

  { name: 'Iphone', price: 2000, location: 'Lagos' },

  { name: 'Infinix', price: 4000, location: 'Delta' },

  { name: 'Samsung Galaxy', price: 3000, location: 'Delta' },

  { name: 'Sony', price: 500, location: 'Ibandan' },
];

const gadgetName = gadgets.filter((gadget) => gadget.price < 3000);

console.log(gadgetName);

//output
// {name: 'Iphone', price: 1000, location: 'Delta'}
// {name: 'Iphone', price: 2000, location: 'Lagos'}
// {name: 'Sony', price: 500, location: 'Ibandan'}
```

In this second example above, we created an array of objects(**`gadgets`**) and we used the **`filter()`** to filter out the **`price`** of the **`gadgets`** that is less than **`3000`**

## 🏗️ How does **`filter()`** work?

In the example above we have an array of **`gadgets`**. All JS arrays have a set of built-in methods that we can use. **`filter()`** is one of those, and we can access it with the syntax `Array.filter()`.

Filter is a higher-order array function, which means that we can pass another function for it to do something with. It takes three parameters like the **`forEach()`** But we will only focus on the first parameter which is a function that is called once for each item in the array and will test each element in the array to decide if they’re being kept or discarded.

Using the example above, **`filter`** will then pick up each individual element of the array and examine it against the test we provided. The current element that **`filter`** is looked at is provided to us as the first argument. That’s the first **`gadget`** we see. It is a variable that we can name whatever we want. But it’s logical that an array of **`gadgets`** a single element is one which is **`gadget`.**

After the arrow function, we use the **`gadget`** variable to implement the test we want. And **`filter`**does the rest. It will iterate through the whole array and return an array of everything that matches our test.

## 💼 Use Cases of **`filter()`**

There are multiple ways of applying the **`filter()`** method but we’ll be talking about 3 use cases.

### 🔍 **Searching in array**

You can use the **`filter()`** to **`filter`** array content based on search criteria. Here is an example 👇🏾

```jsx
const games = [
  'witcher',
  'Grand theft auto',
  'uncharted',
  'mario',
  'god of war',
];

const filterItems = (game, search) => {
  return game.filter((letter) => letter.includes(search.toLowerCase()));
};

console.log(filterItems(games, 'ar')); // output ['uncharted', 'mario', 'god of war']
console.log(filterItems(games, 'an')); // output ['Grand theft auto']
```

### 🤏🏽 Filtering out small or big values

The **`filter()`** method can be used to create a **`filtered`** array of elements with small or big values. Here is an example 👇🏾

```jsx
const numbers = [100, 20, 9, 6, 12, 30];

const filterValue = (value) => {
  return value >= 20;
};

const filterSmallValues = numbers.filter(filterValue);

console.log(filterSmallValues); // [100, 20, 30]
```

### 3️⃣ Filtering odd numbers

The **`filter()`** method can be used to **`filter`** out odd numbers in array . Here is an example 👇🏾

```jsx
const numbers = [1, 3, 7, 4, 5, 8, 10, 11, 12, 13, 14, 15];

const isOdd = (value) => {
  return value % 2 === 1; // Check if the value is odd and return true or false
};

const filteredNumber = numbers.filter(isOdd);

console.log(filteredNumber); // [1, 3, 7, 5, 11, 13, 15]]
```

If you like to see a real world example where this filter method is applied, Here is a link to small website I built and you can also get the source code from there too.

https://filterproducts.netlify.app/

That’s it guys 😀. I hope you learned something from this article. Always remember that the only way to get good at something is by applying what you have learnt as soon as possible. See you next week.