Uso de los métodos find y findIndex en JavaScript

Curso de Manipulación de Arrays en JavaScript

Contenido del curso

Introducción

1
Manipulación de Arrays en JavaScript para Desarrollo Full Stack
01:39 min

Fundamentos del manejo de arrays

Métodos en JavaScript

Despedida

19
Manipulación de Rides con JavaScript
00:38 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:20

Uso de los métodos find y findIndex en JavaScript

Curso de Manipulación de Arrays en JavaScript

Clase 11 de 19

Clase 11 / 19

Recursos

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.

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.

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.

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.

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.

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.

Jefred Bedoya

Hace 5 meses•editado

Diferencias clave: find vs filter

find: Retorna directamente el objeto o elemento que cumple la condición. Si hay varios, solo devuelve el primero que encuentre. Si no halla nada, devuelve undefined.
filter: Siempre retorna un array, incluso si solo encuentra un elemento.

Búsqueda por posición: findIndex

Su objetivo no es obtener el valor, sino el índice (posición) donde se encuentra el elemento.
Si el elemento existe, devuelve su posición (ej. 1).
Si no lo encuentra, retorna -1.

Casos de uso ideales

find: Ideal para buscar elementos únicos mediante un identificador (como un id).
findIndex: Útil cuando necesitas saber la ubicación exacta del elemento para realizar operaciones posteriores, como eliminarlo o modificarlo.

Comentarios (36)36 comentarios

Lucas Frezzini

Hace 5 años

Darwing Steven Sánchez Londoño

Andrés Felipe Lopez gomez

Michael Alexander Espinosa Rico

Sebastian Pedroza

Rafael Martínez Rodríguez

Hace 4 años

Gustavo Adolfo Perez Ramos

Eduardo Peña Ramos

Julia Gabriela Nieva Paredes

Hace 3 años

Oscar David Rodríguez manjarres

Hace 2 años

Ricardo Castaneda

Federico Ivan Llano

Francisco Javier Solis Martinez

Markin Piero Pulache Guarniz

Dario Paladines

Agustina Corvo

José Alejandro Vásquez Gonzalez

Luis Donaldo Talavera Covarrubias

Tatiana Cordecci

Conocimiento gIT

Angel Vega

Rodrigo Ramos Xochiteotzin

Tomás Argüello

Daniel Camacho

Luis Berenguer

Aníbal Corral

Introducción

Manipulación de Arrays en JavaScript para Desarrollo Full Stack

Fundamentos del manejo de arrays

Recorrido de Arrays con Foreach en JavaScript

Mutabilidad vs Inmutabilidad en Programación JavaScript

Uso de Map para Transformaciones en JavaScript y Renderizado HTML

Transformaciones avanzadas con map en JavaScript

Filtrado de Arrays en JavaScript con el Método Filter

Uso del método reduce en JavaScript para sumar elementos de un array

Contar elementos en un array con reduce y agrupar por rango

Métodos en JavaScript

Uso de la función "sum" en JavaScript para evaluar condiciones

Uso del método `every` en JavaScript para validaciones de arrays

Uso de los métodos find y findIndex en JavaScript

Uso del método includes en JavaScript para arrays y strings

Unificación y separación de arrays con join y split en JavaScript

Fusión de Arrays con Concat y Operador Spread en JavaScript

Aplanar Arrays en JavaScript con Flat y FlatMap

Uso de FlatMap para Extraer Fechas de Calendarios en JavaScript

Métodos Mutables e Inmutables en Arrays: Manipulación y Búsqueda

Ordenamiento de Arrays con el Método Sort en JavaScript

Despedida

Manipulación de Rides con JavaScript

Uso de los métodos find y findIndex en JavaScript

Progreso del curso

Introducción

Fundamentos del manejo de arrays

Métodos en JavaScript

Despedida

Recursos

Recursos