Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:003:52

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Curso de Fundamentos de JavaScript

Clase 32 de 55

Clase 32 / 55

Recursos

¿Qué son los métodos find y findIndex en JavaScript?

En el fascinante mundo de la programación en JavaScript, existen herramientas que nos permiten trabajar de manera eficiente con los arrays: los métodos find y findIndex. Estos métodos no modifican el array original, sino que nos ayudan a encontrar elementos específicos y sus índices, basándonos en una condición determinada. ¿Te gustaría descubrir cómo funcionan y cómo pueden mejorar tu código? ¡Acompáñanos!

¿Cómo funciona el método find?

El método find de JavaScript nos devuelve el primer elemento de un array que cumple con una condición especificada en una función de prueba. Vamos a ver un ejemplo práctico para entenderlo mejor. Supongamos que tenemos un array de números y queremos encontrar el primer número mayor a 10:

const multiplosDeCinco = [5, 10, 15, 20];
const primerNumeroMayorADiez = multiplosDeCinco.find(number => number > 10);

console.log(multiplosDeCinco); // Imprime: [5, 10, 15, 20]
console.log(primerNumeroMayorADiez); // Imprime: 15

En este ejemplo, find evalúa cada elemento del array multiplosDeCinco y devuelve el primer número que sea mayor a 10, que es 15. El array original no sufre ninguna modificación.

¿Cuál es la diferencia entre find y findIndex?

Mientras que find nos proporciona el elemento que satisface la condición, findIndex nos devuelve el índice (la posición dentro del array) del primer elemento que cumple con la condición especificada. Exploremos un ejemplo para clarificar esta diferencia:

const numerosAleatorios = [6, 14, 27, 56, 40];
const indiceNumeroMayorACincuenta = numerosAleatorios.findIndex(number => number > 50);

console.log(numerosAleatorios); // Imprime: [6, 14, 27, 56, 40]
console.log(indiceNumeroMayorACincuenta); // Imprime: 3

En este caso, findIndex busca el primer número mayor a 50 en el array numerosAleatorios y devuelve su índice, que en este caso es 3, correspondiente al número 56. Al igual que con find, el array original se mantiene inalterado.

Recomendaciones para utilizar find y findIndex

Cuando trabajes con grandes volúmenes de datos y necesites realizar búsquedas específicas, estos métodos se convierten en herramientas valiosas. Te recomendamos:

Utilizar find cuando necesites el elemento en sí.
Optar por findIndex cuando solo necesites la posición del elemento.
Asegúrate de que entiendes completamente la lógica detrás de tu función de prueba para evitar resultados inesperados.

Conclusiones

Ya sea que estés desarrollando aplicaciones personales o profesionales, dominar estos métodos te permitirá hacer que tu código sea más claro y funcional. ¡Anímate a experimentar con find y findIndex en tus propios proyectos y descubre la diferencia que pueden hacer en tus desarrollos!

Eduardo Reyes

Hace 21 días

Métodos find, findLast, findIndex y FindLastIndex

JavaScript

const dogs = ["Firulais", "Max", "Luna", "Max", "Firulais"];

1. .find() — Busca el primer elemento que coincida

Este método recorre el array de izquierda a derecha (del principio al final). A la mínima que encuentra un elemento que cumple la condición, se detiene inmediatamente y te devuelve ese elemento.

Ejemplo:

JavaScript

const foundDog = dogs.find(dog => dog === "Max");
console.log(foundDog); 
// Resultado: "Max" (encontró al primer Max, el que está en la posición 1, y paró de buscar).

2. .findIndex() — Busca la posición del primer elemento que coincida

Hace exactamente lo mismo que .find(), pero en lugar de devolverte el elemento en sí (el texto u objeto), te devuelve el índice (la posición numérica) donde lo encontró. Si no lo encuentra, devuelve -1.

Ejemplo:

JavaScript

const foundIndex = dogs.findIndex(dog => dog === "Max");
console.log(foundIndex); 
// Resultado: 1 (porque "Max" está en el índice 1 del array).

3. .findLast() — Busca el último elemento que coincida

Este es más moderno. A diferencia de .find(), este recorre el array de derecha a izquierda (del final hacia el principio). Busca al último candidato que cumpla con la regla.

Ejemplo:

JavaScript

const lastDog = dogs.findLast(dog => dog === "Max");
console.log(lastDog); 
// Resultado: "Max" (pero esta vez te devolvió el segundo "Max", el que está cerca del final, porque empezó a buscar desde atrás).

4. .findLastIndex() — Busca la posición del último elemento que coincida

Combina la lógica de buscar desde el final (findLast) con la de devolver un número de posición (findIndex). Te da el índice del último elemento que cumple la condición.

Ejemplo:

JavaScript

const lastIndex = dogs.findLastIndex(dog => dog === "Max");
console.log(lastIndex); 
// Resultado: 3 (porque el último "Max" está en la posición 3 del array).

Resumen para recordar fácil:

¿Buscas el elemento desde el principio? ➔ .find()
¿Buscas dónde está (su índice) desde el principio? ➔ .findIndex()
¿Buscas el elemento empezando desde el final? ➔ .findLast()
¿Buscas dónde está (su índice) empezando desde el final? ➔ .findLastIndex()

¿Te hace sentido cómo estos métodos se benefician de que los arrays sean objetos con superpoderes heredados?

Comentarios (14)14 comentarios

Cristian Javier Martinez Barcinilla

Hace 2 años

Julio Cardenas

Juan Sebastian Tarache Medina

Hace 12 días

Pablo Luna Guzmán

Carlos Andres Arteaga escobar

Calvin Rafael Bobadilla Fernandez

Andrés Soret Chacin

Juliana Rios

Seba Cardoso

Hace 3 meses

David Rangel

Hace un año

Daniel Vergel

Fernando Emilio Díaz López

Jeferson Leonel Fonseca Soto

Alfonso Neil Jiménez Casallas

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos