YouTip## JavaScript Array find() Method
The `find()` method returns the value of the **first element** in the provided array that satisfies the provided testing function. If no values satisfy the testing function, `undefined` is returned.
---
## Quick Example
Find the first element in an array of ages that is greater than or equal to 18:
```javascript
const ages = [3, 10, 18, 20];
// Testing function
function checkAdult(age) {
return age >= 18;
}
function getFirstAdult() {
return ages.find(checkAdult);
}
console.log(getFirstAdult()); // Output: 18
```
---
## Definition and Usage
The `find()` method executes a callback function once for each index of the array until it finds one where the callback returns a truthy value.
* **On Match:** As soon as a matching element is found, `find()` immediately returns the value of that element and stops iterating through the remaining items.
* **On No Match:** If the callback never returns a truthy value, or if the array is empty, the method returns `undefined`.
* **Immutability:** `find()` does not mutate (change) the original array.
* **Empty Arrays:** The callback function is not executed for empty arrays.
---
## Syntax
```javascript
array.find(callback(currentValue, index, arr), thisValue)
```
### Parameters
| Parameter | Description |
| :--- | :--- |
| `callback` | **Required.** A function to execute on each value in the array. |
| `thisValue` | **Optional.** A value to use as `this` when executing the callback function. If omitted, `undefined` is used. |
### Callback Function Parameters
| Parameter | Description |
| :--- | :--- |
| `currentValue` | **Required.** The current element being processed in the array. |
| `index` | **Optional.** The index of the current element being processed. |
| `arr` | **Optional.** The array object that `find()` was called upon. |
---
## Technical Details
| Feature | Description |
| :--- | :--- |
| **Return Value** | Returns the value of the first element that passes the test. Otherwise, returns `undefined`. |
| **JS Version** | Introduced in ECMAScript 6 (ES6) |
| **Browser Support** | Supported in Chrome 45+, Edge 12+, Firefox 25+, Safari 7.1+, Opera 32+.
*Note: Internet Explorer 11 and earlier versions do not support this method.* |
---
## More Examples
### Example 1: Using ES6 Arrow Functions
Modern JavaScript developers typically use arrow functions with `find()` for cleaner, more concise code:
```javascript
const inventory = [
{ name: 'apples', quantity: 2 },
{ name: 'bananas', quantity: 0 },
{ name: 'cherries', quantity: 5 }
];
// Find the first object in the array with a quantity greater than 0
const availableFruit = inventory.find(fruit => fruit.quantity > 0);
console.log(availableFruit);
// Output: { name: 'apples', quantity: 2 }
```
### Example 2: Finding Elements Based on User Input
This example demonstrates how to find an element in an array that is greater than or equal to a dynamic value retrieved from an HTML input field:
```javascript
const ages = [4, 12, 16, 20];
function checkAge(age) {
// Get the threshold value from an input element with id "ageToCheck"
const threshold = document.getElementById("ageToCheck").value;
return age >= threshold;
}
function findFirstMatchingAge() {
const result = ages.find(checkAge);
document.getElementById("demo").innerHTML = result !== undefined ? result : "No match found";
}
```
---
## Key Considerations & Best Practices
1. **`find()` vs. `filter()`**:
* `find()` returns only the **first** matching element as a single value.
* `filter()` returns **all** matching elements wrapped in a new array.
2. **`find()` vs. `findIndex()`**:
* If you need the **value** of the element, use `find()`.
* If you need the **index** position of the element, use `findIndex()`.
3. **Sparse Arrays**:
* Unlike some other array iteration methods (like `forEach` or `map`), `find()` is executed for empty slots in sparse arrays, treating them as having a value of `undefined`.
Jsref Find
📅 2026-06-23 | 📂 JavaScript