Find y FindIndex

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: '🥞'
  },
];

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

Sé que probablemente no me van a leer, pero en serio estoy disfrutando mucho este curso. Me agrada mucho el profe, y sus explicaciones son claras, cortas y muy entendibles.
Hoy he leído muchas críticas negativas contra Platzi en Twitter, y sinceramente no entiendo porqué. Al final del día, es una empresa que vende cursos. El que los compramos, somos los que decidimos qué hacemos con ese conocimiento, o si nos va a servir.
¿Puedo encontrar este conocimiento en línea y gratis? Seguramente sí. Pero algo que no valoran es la estructuración de los cursos, el idear una ruta que te lleve a aprender poco a poco. Si lo haces por tu cuenta, seguramente también tendrás éxito, pero por lo menos para mí, es muy importante la estructura, la ruta.
En fin, nunca paren de aprender.

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 😺

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 😎.

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.

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

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)

Los hot cakes mas caros de mi vida

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

Asi seria otro ejemplo, bueno con un ID con numeros :

const products = [
    {
        name: 'pizza',
        price: 10,
        id: 1
    },
    {
        name: 'Hotdog',
        price: 1,
        id: 2
    },
    {
        name: 'Hamburger',
        price: 15,
        id: 3
    },
    {
        name: 'Chinesse food',
        price: 100,
        id: 4
    },
];
const respuesta3 = products.find(item => item.id === 4);
console.log('el id del producto es: ',  respuesta3);

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)
}

Hacemos la respues tan concreta como queramos,

const numbers = [1,30,49,29,10,13];
let sum = 0 ;
function fil (num) {
    for (let index = 0; index < numbers.length; index++) {
        const element = numbers[index];
    
        if (numbers[element] ==  num) {
            return console.log('El numero esta en el array, es el numero ' + num) 
            sum += 1
        }
        if (sum == 0) {
            return console.log('El numero No esta, es el numero ' + num) 
        }
    }
}

fil(30)

find() : Recorre el array y retorna la primera coincidencia del elemento que se busca.

findIndex() : Retorna el índice del primer elemento de un array que cumpla con la función de prueba proporcionada. En caso contrario devuelve -1.
sort() : Ordena los elementos del array y retorna el arreglo ordenado. Los elementos se ordenarán en orden ascendente (de la A a la Z) por defecto.

yo digo que las clases deberian tener la opcion del like

Metodo .find() y .findIndex()

• Es un metodo similar a filter, con la diferencia de que find retorna un objeto, el que compla con la condicion dada, y findIndex retorna la posicion de dicho objeto.

const numbers = [12, 4, 6, 77, 23, 12, 53];
let rta = undefined;

for (let i = 0; i < numbers.length; i++) {
    const element = numbers[i];
    if (element === 4) {
        rta = element;
        break;
    }
}
console.log('find con loop for: ', rta);

// .find()
const rta1 = numbers.find(number => number === 4);
console.log('rta: ', rta1);

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 rta2 = products.find(element => element.id === '🥞');
console.log('rta2: ', rta2);

const rta3 = products.findIndex(element => element.id === '🥞');
console.log('rta3: Index:', rta3);

Siempre ayuda mucho comentar el código para que vayamos entendiendo que hace cada cosa,
Aquí mi aporte 😃

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

const answer = numbers.find((number) => number == 30);
console.log(answer);

//con objetos

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

//devuelve el primer objeto que cumple con la condicion
const answer2 = products.find((product) => product.id == "🥞");
//me dice la posicion del primer objeto que cumple con la condicion
const answerIndex = products.findIndex((product) => product.id == "🥞");

console.log("answer2", answer2);
console.log("findIndex", answerIndex);

Muuy bueno el curso hasta ahora. Justo lo que necesitaba. Gracias 😄

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.

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}`);

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);