No tienes acceso a esta clase

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

Find y FindIndex

17/28
Recursos

Aportes 17

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Te dejo el array de objetos para el ejercicio 😃

const products = [
  {
    name: "Pizza",
    price: 12,
    id: '🍕'
  },
  {
    name: "Burger",
    price: 23,
    id: '🍔'
  },
  {
    name: "Hot dog",
    price: 34,
    id: '🌭'
  },
  {
    name: "Hot cakes",
    price: 355,
    id: '🥞'
  },
];

Filter vs Find

No olviden tener en cuenta que el método find retorna la referencia al objeto lo que lo haría mutable, por ejemplo si modificamos rta3 y le cambiamos el nombre por ejemplo, entonces el arreglo original será modificado:

rta4.name = 'Delicious Burger';
console.log('modified', products);

Resumen
.
El método find() devuelve el primer elemento del array que cumpla con la condición dada o no devuelve undefined si es que no encuentra ningún elemento que cumpla los requisitos pedidos.
.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);
console.log(found);
// expected output: 12

En cambio el método findIndex() es una variante que te devuelve el index o posición donde esta ese primer elemento que encuentra con las características de la condición dada. De no encontrar ninguno devuelve -1 como respuesta del return del método.

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// expected output: 3
  • FInd cuando no encuentra un elemento retona: undefine

  • FindIIndex: cuando no encuentra un elemento retorna: -1

Por si a alguien le interesa, no se si es la mejor extension de VSCode pero para usar emojis en el codigo, yo he encontrado la que se llama Emojisense v0.9.0

Saludos 😺

Un aporte puede ser que si sabemos que elemento queremos encontrar dentro del array y en que posición podemos usar el método de array indexOf que devuelve un número que resulta ser la posición del array del valor, eso si sabemos que valor queremos pero si deseamos encontrar el primer elemento que cumpla una condición como si es mayor que o si tiene cierto parecido conviene más usar findIndex por el hecho de podemos crear un escenario para buscar un elemento en especifico.

Interesante el metodo find y findIndex, lo puse juntos:

const products = [
    {
      name: "Pizza",
      price: 12,
      id: '🍕'
    },
    {
      name: "Burger",
      price: 23,
      id: '🍔'
    },
    {
      name: "Hot dog",
      price: 34,
      id: '🌭'
    },
    {
      name: "Hot cakes",
      price: 355,
      id: '🥞'
    },
  ];
  
const rta = products.find(element => element.id === '🍕')
console.log('Find: ', rta)

/* Find index devuelve el index en que se encuentra el elemento */
const rta2 = products.findIndex(element => element.id === rta.id)
console.log('FindIndex: ', rta2)

En el caso en que el resultado de find sea un objeto (como en el ejercico de la clase) este será una referencia al objeto original dentro del array products. Es decir, si modificamos ese objeto encontrado por find entonces se estaria modificando el objeto original tambien 😪.

Para mantener inmutabilidad, sabiendo que el metodo find lo que se nos va a retornar es un objeto, se puede hacer uso en este caso, al ser un objeto sencillo, el shallow copy 👥 con ayuda del spread operator:

const product  = {...products.find(product => product.id === '🍕')};

Recordar que si el objeto tiene nested objects o incluso funciones dentro esto no funcionaría 🤔. Para eso si se tendria que hacer un deep copy 😎.

find encontrará el primer elemento del arreglo que cumpla la condición y retornará ese valor, algo importante es que a diferencia de . filter que crea un arreglo con todos los valores que cumplen una condición, en el caso de . find solo extraerá el valor del primero que cumpla la condición.

Me armé un algoritmo para poder jugar con la constante a buscar, dependiendo de lo que escribas en ella te dirá si existe o no 😃

const numbers = [1,30,49,29,10,13]

let rta = 'not exist in list';

for (let index = 0; index < numbers.length; index++) {
    const element = numbers[index];
    if (element === 30 ){
        rta = element;
        break;
    }
}
const find = 2

console.log('for', rta);
let rta2 = 'not exist in list';

const find_searcher = numbers.find(item => item === find);
if (find_searcher === find){
    console.log('find', find_searcher)
}else{
    console.log('find', rta2)
}

const winners = [
{name: “Norma”,
age: 23,
numberOfPrize: 1,
},
{name: “Guadalupe”,
age: 21,
numberOfPrize: 2,
},
{name: “Antonio”,
age: 28,
numberOfPrize: 3,
},
];

const answ = winners.find(item => item.numberOfPrize === 1)
console.log(answ);

const answF = winners.filter(item => item.numberOfPrize === 1);
console.log(answF)

//OUTPUT
// { name: ‘Norma’, age: 23, numberOfPrize: 1 }
//[ { name: ‘Norma’, age: 23, numberOfPrize: 1 } ]

Mis apuntes 😅

//find-findIndex-9

const claves = ['permi', 'Nopermi'];



let rtz = undefined

for (let index = 0; index < claves.length; index++) {
    const element = claves[index];
    if (element === 'permi') {
        rtz = element
        break;
    }
}

console.log('for', rtz);

const rtz2 = claves.find(item => item === 'permi');
console.log('find', rtz2);


const rtz3 = claves.findIndex(item => item === 'permi')
console.log('rtz3', rtz3);

Esta es la forma en la que yo hice el Ejercicio

const search = products.find(item => item.id === '🍔');
const searchIndex = products.findIndex(item => item.id === '🍔');

search !== undefined?
console.log(`Se encontró su ${search.name}`):
console.log('No se encontró su pedido');
console.log(`Su pedido se encuentra en la orden ${searchIndex + 1}`);

FindIndex: retorna el indice del elemento (regresa la posicion del elemento en el array) y que cumpla con la condicion de busqueda al igual que find

Find: retorna el primer elemento que cumple con la condicion

  • A diferencia de Filter, Find retorna el objeto / elemento directamente y Filter retorna un Array con el / los elementos

  • Find retorna solo el primer elemento que cumple la condicion

  • Si no encuentra un elemento que cumple la condificon retorna undefined

Método find: Evalua el array y retorna un objeto (no un array)

const numbers = [1, 30, 49, 29,10,13];

let rta2 = numbers.find(item => item === 30)
console.log('Find:', rta2);