JavaScript array find() is a built-in function designed to search through an array and return the first element that satisfies a provided testing function (callback). If it does not satisfy any condition, it returns undefined.

let main_array = [18, 21, 15, 10, 9];

let searched_element = main_array.find(element => element > 19);

console.log(searched_element);

// Output: 21

In this code, we are searching for an element whose value is greater than 19.

The search iteration stops at the first match, making it efficient for large arrays where the match is early.

Syntax

array.find(function(element, index, arr), thisValue)

Parameters

No element is found

If complete traversal occurs, but no match is found, it will return undefined as output.

let data = [20, 18, 15, 10, 9];

let output = data.find(element => element > 40);

console.log(output);

// Output: undefined

Since there are no elements greater than 40, it returns undefined.

Finding an object by property

The best way to search for a specific object from an array of objects is to compare the value of the object using its key.

const fruits = [
    { name: 'apples', quantity: 2 },
    { name: 'bananas', quantity: 0 },
    { name: 'cherries', quantity: 5 }
];

const apple_fruit = fruits.find(fruit => fruit.name === 'apples');

console.log(apple_fruit);

// Output: { name: 'apples', quantity: 2 }

Since the apple fruit exists in the array, it returns that object.

Using the “index” parameter

Here’s how you can use the index parameter:

let fruits = [
    { name: 'apples', quantity: 2 },
    { name: 'bananas', quantity: 0 },
    { name: 'cherries', quantity: 5 }
];

let basedOnQuantity = fruits.find((tree, i) => { if (tree.quantity > 3 && i !== 0) return true; });

console.log(basedOnQuantity);

// Output: { name: 'cherries', quantity: 5 }

Using thisArg for Context

function isEven(element) {
    return element % this === 0;
}
const numbers = [1, 2, 3, 4, 5];

const evenDivisibleByTwo = numbers.find(isEven, 2);

console.log(evenDivisibleByTwo);

// Output: 2

In this code, thisArg sets this to 2 in the callback. Arrow functions ignore thisArg (e.g., num => num % this === 0 would fail as this is undefined).

Empty array

If the array is empty, the .find() method returns undefined because there is no element to check.

const empty = [];

const result = empty.find(x => x > 0);

console.log(result);

// Output: undefined

Sparse arrays

A sparse array contains empty slots. The find() method skips empty slots (no callback invocation for them).

const sparse = [, , 3, , 5];

const firstOdd = sparse.find(num => num % 2 !== 0);

console.log(firstOdd);

// Output: 3

In this code, even if the input array’s length is 5, there are only indices 2 and 4 are processed.

That’s all!

Krunal Lathiya

With a career spanning over eight years in the field of Computer Science, Krunal’s expertise is rooted in a solid foundation of hands-on experience, complemented by a continuous pursuit of knowledge.