Los métodos find y findIndex consisten en encontrar el primer elemento de un array que cumpla con la condición especificada en la función (callback).

En el caso de find retornará el elemento completo, si cumple con la condición, caso contrario retornará undefined. El método findIndex retornará el índice del elemento encontrado, caso contrario retornará -1.

Estos procedimientos reciben dos argumentos:

• La función que itera y evalúa cada elemento del array hasta encuentre uno que cumpla con la condición especificada (obligatorio).
• Un objeto al que puede hacer referencia el contexto this en la función. Si se lo omite, será undefined. Recuerde que this en arrow functions es el objeto global.

fullscreen
array.find(function(), thisArg)
array.findIndex(function(), thisArg)

La función, que recibe como argumento los métodos find y findIndex, utiliza tres parámetros:

• El valor actual del elemento iterado. Es decir, si es la primera iteración, será el primer elemento, y así sucesivamente.
• El índice del elemento iterado. Es decir, si es la primera iteración, será el índice 0, y así sucesivamente.
• El array que está iterando.

fullscreen
array.find(function(element, index, array))
array.findIndex(function(element, index, array))

Diferencia entre la estructura for y los métodos find y findIndex

Los métodos de arrays nos permiten realizar algoritmos con una menor cantidad de líneas que una estructura for, con un resultado igual o parecido.

Por ejemplo, hagamos un algoritmo que devuelva el primer elemento que sea mayor a 40 de un array.

Si utilizamos la estructura for, necesitaremos una variable con el valor undefined e iterar hasta que se cumpla la condición. La palabra reservada break rompe el ciclo repetitivo.

fullscreen
const numbers = [1, 30, 41, 29, 50, 60]

let respuesta = undefined
for (let i=0; i < numbers.length; i++){
    const element = numbers[i]
    if (element >= 40) {
        respuesta = element
        break
    }
}

console.log(respuesta) // 41

Si se necesita el índice, en lugar de una variable con el valor de undefined, debería estar un valor de -1. Y también cambiar el valor del elemento por el del índice del for.

Con los métodos find y findIndex, solo debemos establecer la función que indique la condición a cumplir para cada elemento.

fullscreen
const numbers = [1, 30, 41, 29, 50, 60]

const respuesta = numbers.find(item => item >= 40)
const respuesta2 = numbers.findIndex(item => item >= 40)

console.log(respuesta) // 41
console.log(respuesta2) // 2

Recuerda que si los métodos find y findIndex no encuentran EL elemento, devolverán undefined y -1, respectivamente.

fullscreen
const numbers = ["a", "b", "c"]

const respuesta = numbers.find(item => item >= 40)
const respuesta2 = numbers.findIndex(item => item >= 40)

console.log(respuesta) // undefined
console.log(respuesta2) // -1

Contribución creada por: Andrés Guano.