Cursos Empresas Blog Live Conf Eventos Precios

0:003:52

Recursos

Resumen

¿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!

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

Curso de Fundamentos de JavaScript

Clase 32 de 55

Clase 32 / 55

Eduardo Reyes

Hace un mes

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

hola a todos, no olviden ver el repo de la clases, hay otro ejemplo mas complejo y útil, saludos

Julio Cardenas

Gracias Cristian, es un buen ejercicio.

Toca tener cuidado con los ticketNumber van precedidos por cero o ceros y causa error en el ticketNuber de "Emily" devuelve 13 en lugar de 15.

Encontre en MDN

este ejemplo para encontrar el primer numero primo de un array. Casi me quiebro la cabeza..... pero al final lo entendi.

Juan Sebastian Tarache Medina

Es una pista importante de como parametrizar funciones para llamarlas desde find() o findIndex()

Pablo Luna Guzmán

Resumen de la clase

→ Retorna el primer elemento que cumpla la función callback
→ Retorna el índice del primer elemento que cumple la función callback

💡 Los métodos están hipervinculados a su correspondiente documentación

Carlos Andres Arteaga escobar

lo importante es practicar cada momento con estos métodos

Calvin Rafael Bobadilla Fernandez

RESUMEN:

Andrés Soret Chacin

Métodos de Array: find y findIndex

Introducción a find y findIndex

find y findIndex son métodos que no modifican el array original.
Ayudan a encontrar elementos e índices dentro de un array.

Método find

El método find devuelve el primer elemento que cumple con una condición especificada en una función.
Ejemplo:
- Dado el array [5, 10, 15, 20], si queremos el primer elemento mayor a 10, find devolverá 15.

Código de ejemplo:

// Crear el array de múltiplos de 5 const multiplesOf5 = [5, 10, 15, 20];

// Encontrar el primer número mayor a 10 const firstNumberGreaterThan10 = multiplesOf5.find(number => number > 10);

// Mostrar el resultado en la consola console.log("Array original:", multiplesOf5); console.log("Primer número mayor a 10:", firstNumberGreaterThan10);

Método findIndex

El método findIndex devuelve el índice del primer elemento que cumple con una condición especificada en una función.
Ejemplo:
- Dado el array [6, 14, 27, 56, 40], si queremos el índice del primer elemento mayor a 50, findIndex devolverá 3.

// Crear el array de números aleatorios const randomNumbers = [6, 14, 27, 56, 40];

// Encontrar el índice del primer número mayor a 50 const indexNumberGreaterThan50 = randomNumbers.findIndex(number => number > 50);

// Mostrar el resultado en la consola console.log("Array original:", randomNumbers); console.log("Índice del primer número mayor a 50:", indexNumberGreaterThan50);

Consola de resultados

Resultados del método find:

// Salida esperada console.log("Array original:", multiplesOf5); // [5, 10, 15, 20] console.log("Primer número mayor a 10:", firstNumberGreaterThan10); // 15

Resultados del método findIndex:

// Salida esperada console.log("Array original:", randomNumbers); // [6, 14, 27, 56, 40] console.log("Índice del primer número mayor a 50:", indexNumberGreaterThan50); // 3

Próximos pasos

Practicar el uso de find y findIndex en diferentes escenarios.
Implementar estos métodos en proyectos para mejorar la manipulación y búsqueda en arrays.
Explorar otros métodos de arrays disponibles en JavaScript para ampliar tus conocimientos y habilidades de programación.

Juliana Rios

Seba Cardoso

Hace 4 meses

Corto y al pie: find te devuelve el objeto/valor real, y findIndex te da la posición (o -1 si no existe). Clave entender esa diferencia para saber cuál elegir según la necesidad.

David Rangel

Hace un año

Les dejo mis apuntes con typescript:

// correr con ts-node mapForEach.ts
// metodos que no modifican el array pero que nos ayudan a encontrar elementos en un array

// FIND: devuelve el valor del primer elemento del array que cumple con al función de prueba proporcionada

const multiplesOfFive: number[] = [5, 10, 15, 20, 25, 30, 35];

const firstNumberGreaterThanTen: number | undefined = multiplesOfFive.find(
  (num) => num > 10
);

console.log(multiplesOfFive);
console.log(firstNumberGreaterThanTen);

// FIND INDEX OF: Devuelve el índice del primer elemento en un array que sitisfcace una condición proporcionada
// en form a de función. Si no encuentra ningún elemento que cumpla condición, devuelve -1

const randomNumbers: number[] = [6, 32, 53, 62, 73, 123, 74, 24, 31, 41, 1, 26];
const indexNumber: number | undefined = randomNumbers.findIndex(
  (num) => num > 100
);

console.log(randomNumbers);
console.log(indexNumber);

Daniel Vergel

Fernando Emilio Díaz López

El método find en JavaScript devuelve el primer elemento de un array que cumple con la condición especificada en la función de callback. En el ejemplo mencionado, el array es [5, 10, 15, 20] y la condición es que el número debe ser mayor a 10. El primer número que cumple con esta condición es 15, por eso find solo devuelve ese valor. Otros elementos pueden cumplir la condición, pero find se detiene al encontrar el primero.

Jeferson Leonel Fonseca Soto

Hola, por si a alguien me sirve, cuando esten ejecutando en node.js pueden darle la combinacion de teclas Ctrl + Alt + N, con eso no tienen que andar escribiendo el nombre del archivo en la consola sino que se ejecuta de manera automatica.

Un abrazo

Alfonso Neil Jiménez Casallas

Recursos

Resumen

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

Progreso 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