Array.prototype.find() unexpected behavior

Question

According to this MDN link, the find() method takes a callback function that can take three arguments: the current array element, the index of the current array element, and the array that the method is being called upon.

So:

var r = [2, 9, 11]; console.log(r.find(function(e, i, r) {
    if (e % 2 === 0)
        return e; }))

returns 2, as I would expect.

However:

var r = [2, 9, 11];
console.log(r.find(function(e, i, r) {
    if (e % 2 === 0)
        return i;
}))

return undefined (when I expect 0),

and

var r = [2, 9, 11];
console.log(r.find(function(e, i, r) {
    if (e % 2 === 0)
        return r;
}))

returns 2 (when I expect [2, 9, 11]).

Can someone please explain what I am not properly understanding?

Pointy · Accepted Answer · 2016-03-24 12:35:17Z

5

The callback you pass to .find() is assumed to return a boolean (true or false) value. The value returned from .find() is the value of the first element for which the callback returned a non-false value.

In your first example:

var r = [2, 9, 11]; console.log(r.find(function(e, i, r) {
    if (e % 2 === 0)
        return e; }))

the return value is 2 not because of return e; returning the value 2, but because 2 is truthy. You can verify that by changing return e to return true or any other truthy value.

Similarly, in the second example:

var r = [2, 9, 11];
console.log(r.find(function(e, i, r) {
    if (e % 2 === 0)
        return i;
}))

your callback returns 0 on the first element (because i is 0), but that's not truthy.

answered Mar 24, 2016 at 12:35

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joseph · Accepted Answer · 2016-03-24 13:26:59Z

The find method executes the callback function once for each element present in the array until it finds one where callback returns a true value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

The callback return is only used to indicate if the current value should be the result or not. It's sort of like find asking your callback a "yes or no" question for the current value.

In your second case, 2 passes e % 2 === 0 and you returned i. However i is 0, a falsy value so find skips over that and continues. Further values (9 and 11) don't pass e % 2 === 0. Functions that don't explicitly return a value return an undefined, a falsy value. In the end, no callback returned a truthy value and findreturns undefined.

The third case, 2 passes e % 2 === 0 and you returned r, an array, which is a truthy value. That made find, right off the bat, return the first item which is 2.

Collectives™ on Stack Overflow

Array.prototype.find() unexpected behavior

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related