Introducción a JavaScript

1

¿Por qué aprender JavaScript?

2

¡Hola Mundo! en Mac

3

¡Hola Mundo! en Windows

4

Anatomía de una variable

5

Tipos de datos en JavaScript

6

Creación de strings

7

Operadores aritméticos

8

Conversión de tipos: Type Casting y Coerción

9

Conversión de tipos explícita e implícita

Estructuras de Control y Lógica

10

Operadores de comparación

11

Operadores lógicos

12

Ejecución condicional: if

13

Ejercicio: Adivina el número

14

Ejecución condicional: switch

15

Loop: for

16

Loop: for of

17

Loop: for in

18

Loop: while

19

Loop: do while

Funciones y This

20

Anatomía de una función

21

Funciones vs Métodos

22

Funciones puras e impuras

23

Arrow function y enlace léxico

24

Contextos de ejecución y scope chain

25

¿Qué es Closure?

26

Preguntas a Desarrolladores Senior: ¿Por qué aprender Desarrollo Web?

Manipulación de Arrays

27

Introducción a Arrays

28

Mutabilidad e inmutabilidad de Arrays

29

Modificación básica del final con push( ), pop( )

30

Iteración con map( ) y forEach( )

31

Filtrado y reducción con filter( ) y reduce( )

32

Búsqueda de elementos con find( ) y findIndex( )

33

Crear copias con slice( )

34

Spread operator: casos de uso

Programación Orientada a Objetos

35

Anatomía de un Objeto

36

Trabajando con objetos en JavaScript

37

Función constructora

38

¿Qué es una clase?

39

Prototipos y herencias

40

Herencia en la práctica

41

Prototipos en la práctica

42

this en JavaScript

43

Proyecto: Crea una red social

44

Proyecto: Crea una red social parte 2

Asincronía en JavaScript

45

¿Cómo funciona el JavaScript Engine?

46

Promesas en JavaScript

47

Usando Async y await en JavaScript

48

For await of

49

¿Cómo funciona la web?

50

¿Cómo funciona HTTP?

51

Método GET en JavaScript

52

Método POST en JavaScript

53

Método DELETE en JavaScript

54

Importancia del id en el método DELETE

55

ECMAScript 6 y tus siguientes pasos

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Búsqueda de elementos con find( ) y findIndex( )

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!

Aportes 9

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

hola a todos, no olviden ver el repo de la clases, hay otro ejemplo mas complejo y útil, saludos
Encontre en MDN ![](https://static.platzi.com/media/user_upload/Screenshot%20from%202024-08-02%2002-20-09-3de6ec78-a407-478d-99a2-b49fceb01408.jpg)este ejemplo para encontrar el primer numero primo de un array. Casi me quiebro la cabeza..... pero al final lo entendi.
## Resumen de la clase * [.find()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) → Retorna el primer elemento que cumpla la función callback * [.findIndex()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex) → Retorna el índice del primer elemento que cumple la función callback > 💡 Los métodos están hipervinculados a su correspondiente documentación
Me ha encantado este tema !!! ![]()![](https://static.platzi.com/media/user_upload/image-35ab6319-7444-41c4-8b69-a9ce5c75a4e4.jpg)
## 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`. ### Código de ejemplo: // 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.
**RESUMEN:** ![](https://static.platzi.com/media/user_upload/image-13960277-3730-4eb1-8d9b-d7ca24574935.jpg)
![](https://static.platzi.com/media/user_upload/image-88605d45-673a-4727-bd19-4411f06513be.jpg)
![](https://static.platzi.com/media/user_upload/image-ab9e2cf0-ebc6-4943-84f1-0c6453903f94.jpg)
lo importante es practicar cada momento con estos métodos