# JavaScript Array filter() Method
The `filter()` method creates a new array populated with all elements from the calling array that pass the test implemented by the provided callback function.
---
## Definition and Usage
The `filter()` method iterates over each element of an array, applying a conditional test (via a callback function). If the callback function returns `true` (or a truthy value) for an element, that element is included in the newly returned array. If no elements pass the test, an empty array is returned.
### Key Characteristics:
* **Non-mutating:** `filter()` does not modify the original array.
* **Empty Arrays:** `filter()` does not execute the callback function for empty arrays.
* **Return Value:** A shallow copy of a portion of the given array, filtered down to just the elements from the given array that pass the test.
---
## Syntax
```javascript
array.filter(callbackFn(currentValue, index, arr), thisValue)
```
---
## Parameter Values
| Parameter | Description |
| :--- | :--- |
| `callbackFn` | **Required.** A function to execute for each element in the array. It should return a truthy value to keep the element, and a falsy value otherwise. |
| `thisValue` | **Optional.** A value to use as `this` when executing the `callbackFn`. If omitted, `undefined` is used as the `this` value. |
### Callback Function Parameters:
| Parameter | Description |
| :--- | :--- |
| `currentValue` | **Required.** The value of the current element being processed in the array. |
| `index` | **Optional.** The index of the current element being processed in the array. |
| `arr` | **Optional.** The array object that `filter()` was called upon. |
---
## Technical Details
| Feature | Description |
| :--- | :--- |
| **Return Value** | An array containing all elements that passed the test. If no elements pass, an empty array `[]` is returned. |
| **JavaScript Version** | ECMAScript 5 (ES5) / JavaScript 1.6 |
| **Browser Support** | Supported by all modern browsers (Chrome, Edge, Firefox, Safari, Opera, and Internet Explorer 9+). |
---
## Code Examples
### Example 1: Basic Filtering
Filter an array of ages to return only values that are 18 or older:
```javascript
const ages = [32, 33, 16, 40];
// Callback function to check if age is 18 or older
function checkAdult(age) {
return age >= 18;
}
function getAdults() {
const adults = ages.filter(checkAdult);
console.log(adults);
// Output: [32, 33, 40]
}
getAdults();
```
### Example 2: Filtering with ES6 Arrow Functions
Modern JavaScript developers typically use arrow functions for cleaner, more concise syntax:
```javascript
const ages = [32, 33, 16, 40];
const adults = ages.filter(age => age >= 18);
console.log(adults);
// Output: [32, 33, 40]
```
### Example 3: Dynamic Filtering with User Input
This example demonstrates how to filter an array based on a dynamic value retrieved from an HTML input field:
```html
Minimum Age:
Filtered Results:
```
---
## Important Considerations
1. **Immutability:** Always remember that `filter()` returns a *new* array. The original array remains completely unchanged.
2. **Sparse Arrays:** `filter()` skips empty slots in sparse arrays. The callback function is not invoked for missing elements.
3. **Chaining:** Because `filter()` returns a new array, you can chain it with other array methods like `map()` and `reduce()` for powerful data transformations:
```javascript
const numbers = [1, 2, 3, 4, 5, 6];
const doubledEvens = numbers
.filter(num => num % 2 === 0) // Filters out odd numbers: [2, 4, 6]
.map(num => num * 2); // Doubles the remaining numbers: [4, 8, 12]
```
YouTip