Skip to content

[Edit] JavaScript: Arrays: .filter() #7268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 95 additions & 48 deletions content/javascript/concepts/arrays/terms/filter/filter.md
Original file line number Diff line number Diff line change
@@ -1,93 +1,140 @@
---
Title: '.filter()'
Description: 'Creates a new array with all elements that pass the test from the provided function.'
Description: 'Creates a new array containing the elements from the original array that pass a test implemented by a provided function.'
Subjects:
- 'Web Development'
- 'Computer Science'
- 'Web Development'
Tags:
- 'Arrays'
- 'Functions'
- 'Methods'
- 'Filter'
CatalogContent:
- 'introduction-to-javascript'
- 'paths/front-end-engineer-career-path'
---

The `.filter()` array method creates a new array with all elements that pass the test from the provided function.
The **`.filter()`** method creates a new [array](https://www.codecademy.com/resources/docs/javascript/arrays) containing only the elements from the original array that pass a test implemented by a provided [function](https://www.codecademy.com/resources/docs/javascript/functions). It provides a clean and efficient way to extract specific elements from an array based on custom criteria.

The `.filter()` method is commonly used for data filtering, search functionality, removing unwanted elements, and creating subsets of arrays. It's particularly useful when working with lists of objects, numbers, or strings where you need to apply conditional logic to determine which elements to keep.

## Syntax

```pseudo
// Arrow function
array.filter(element => { ... })
array.filter((element, index) => { ... })
array.filter((element, index, array) => { ... })
array.filter(callback(element, index, array), thisArg)
```

`.filter()` takes the following parameters:
**Parameters:**

- `element`: The current element being processed in the array.
- `index` (optional): The index of the current element being processed in the array.
- `array` (optional): The array _filter_ was called upon.
- `callback`: A function that tests each element of the array. It accepts three arguments:
- `element`: The current element being processed in the array
- `index`: The index of the current element being processed in the array
- `array`: The array `.filter()` was called upon
- `thisArg`: Optional. Value to use as `this` when executing the callback function

The method will return a new array with the elements that pass the test.
**Return value:**

> **Note:** If no elements pass the test, an empty array will be returned.
The `.filter()` method returns a new array with all elements that pass the test implemented by the provided function. If no elements pass the test, it returns an empty array.

## Examples
## Example 1: Basic Array Filtering

Filtering out all small values:
This example demonstrates how to use `.filter()` to extract numbers greater than a specific value from an array:

```js
const numbers = [6, 44, 87, 1, 197, 22];
const numbers = [1, 5, 8, 12, 15, 20];

const filteredNumbers = numbers.filter((num) => num >= 10);
// Filter numbers greater than 10
const largeNumbers = numbers.filter(function (number) {
return number > 10;
});

console.log(filteredNumbers);
// Output: [44, 87, 197, 22]
console.log(largeNumbers);
```

Filtering by index:
This example results in the following output:

```js
const numbers = [6, 44, 87, 1, 197, 22];
```shell
[12, 15, 20]
```

const filterByIndex = numbers.filter((element, index) => {
return index % 2 === 0;
});
The callback function tests each element in the array. Only elements that return `true` from the test function are included in the new array.

console.log(filterByIndex);
// Output: [6, 87, 197]
```
## Example 2: User Data Filtering

Filtering out names that don't begin with the given character:
This example shows how to filter an array of user objects based on specific criteria, which is common in real-world applications:

```js
const names = ['Jim', 'Bob', 'Sarah', 'Alex', 'James', 'Sam', 'Peter'];
const users = [
{ name: 'Alice', age: 25, isActive: true },
{ name: 'Bob', age: 17, isActive: false },
{ name: 'Charlie', age: 30, isActive: true },
{ name: 'Diana', age: 16, isActive: true },
];

// Filter active users who are 18 or older
const eligibleUsers = users.filter(function (user) {
return user.isActive && user.age >= 18;
});

console.log(eligibleUsers);
```

const filteredNames = (char, array) => {
return array.filter((name) => name[0].toLowerCase() === char);
};
This example results in the following output:

console.log(filteredNames('j', names));
// Output: ["Jim", "James"]
```shell
[
{ name: "Alice", age: 25, isActive: true },
{ name: "Charlie", age: 30, isActive: true }
]
```

## Codebyte Example
This demonstrates how `.filter()` can handle complex filtering logic by combining multiple conditions within the callback function.

The example below shows `.filter()` being used to filter an array of objects, called `techCompany`, using two criteria.
## Codebyte Example: Product Search Implementation

This example illustrates how to implement a search feature using `.filter()` to match products based on user input.

```codebyte/javascript
let techCompany = [
{name: 'John Doe', tenure: 8, position: 'Developer'},
{name: 'Elisabeth Hills', tenure: 2, position: 'Developer'},
{name: 'Izabella Zboncak', tenure: 4, position: 'Finance'},
{name: 'Jane Smith', tenure: 11, position: 'Developer'},
{name: 'Mo DuBuque', tenure: 3, position: 'HR'},
{name: 'Markus Pagac', tenure: 9, position: 'CEO'},
{name: 'Jack Jakubowski', tenure: 7, position: 'Developer'}
const products = [
{ name: "Laptop", category: "Electronics", price: 999 },
{ name: "Coffee Maker", category: "Kitchen", price: 79 },
{ name: "Wireless Mouse", category: "Electronics", price: 25 },
{ name: "Blender", category: "Kitchen", price: 45 }
];

let employees = techCompany.filter(company => company.tenure >= 5 && company.position == 'Developer');

console.log(employees)
// Function to search products by name or category
function searchProducts(products, searchTerm) {
return products.filter(function(product) {
return product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
product.category.toLowerCase().includes(searchTerm.toLowerCase());
});
}

// Search for electronics
const electronicsResults = searchProducts(products, "electronics");
console.log(electronicsResults);

// Search for products with "coffee" in the name
const coffeeResults = searchProducts(products, "coffee");
console.log(coffeeResults);
```

The `searchProducts()` function demonstrates how `.filter()` can be used to create flexible search functionality that matches multiple fields and handles case-insensitive searches.

## Frequently Asked Questions

### 1. Does `.filter()` modify the original array?

No, `.filter()` creates and returns a new array. The original array remains unchanged.

### 2. What happens if no elements pass the test?

If no elements pass the test, `.filter()` returns an empty array `[]`.

### 3. Can I use `.filter()` with arrow functions?

Yes, `.filter()` works with arrow functions. For example: `array.filter(item => item > 5)`.

### 4. What's the difference between `.filter()` and `.find()`?

`.filter()` returns an array of all matching elements, while `.find()` returns only the first matching element or `undefined` if no match is found.