Método find vs. método filter

Clase 9 de 30 • Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Juan Castro

teacher•

:bulb: Recomendación: mira esta clase al menos 3 veces.

:one: La primera para disfrutar viendo mi sufrimiento.
:two: La segunda para hacer lo mismo que yo sabiendo desde antes qué errores van a salir y por qué... pa no andar con tanto estrés
:three: Y una tercera vez para tratar de romper todo, hacer experimentos locos y aprender de verdad

NO TE RINDAS si los métodos de los arrays te parecen difíciles. Todas y todos pasamos por lo mismo. Es un cambio de pensamiento muy fuerte. Duele al principio. Pero luego se pone más fácil. Y los encontraremos por todas partes en el futuro así que es indispensable invertir un buen tiempo en tratar de dominarlos.

Miguel Angel Hernandez Colombo

student•

como hacer esto si no tengo tanto tiempo? :,(

Juan Castro

teacher•

2x?

silfredo mario

student•

Métodos de los Arrays. ![](

Andrés Felipe Eslava Zuluaga

student•

Excelente aporte

Kevin J. Zea Alvarado

student•

Pienso que cabe mencionar dos puntos importantes aquí: .

El método filter itera por todos los elementos de un arreglo, mientras que find regresa el primer elemento que cumpla con la condición. Por lo tanto, si sólo se está buscando un elemento, el método más óptimo es find, ya que, apenas encuentre al elemento, dejará de iterar por los demás.
Aprender manipulación de arreglos me ha ayudado mucho en mi carrera como desarrollador. Te hace más profesional y con conocimientos sobre el tema. Les recomiendo mucho que tomen el curso de Manipulación de Arrays en JavaScript y comprendan y practiquen cada método.

Igualmente, si tienen duda de algún tema de Desarrollo Web, estaré encantado de apoyarles. 💚

Alberto Montero

student•

Excelente curso, me ha ayudado muchísimo para mejorar mi lógica

Ricardo Rey

student•

Así es, yo lo realice declarando directamente dentro del find() una arrow function. Se me hizo mucho más fácil entenderlo así.

function identificarCupon(cuponUsuario) {
  return listCoupons.find((couponElement) => {
    if (couponElement.name == cuponUsuario) {
      return couponElement;
    }
  }).discount;
}

Yuliam Rivera González

student•

10 minutos en ésta clase fueron 7 horas en la tierra!!! 🤯

Juan Castro

teacher•

"Cuando aprendes la diferencia entre find y filter"

Iván Camilo Jaramillo García

student•

lej comparto chico!

marco antonio

student•

Si tu cara fue

Para intentar explicar como funciona find o filter decidí emular el método find para que cualquiera pueda entender como funciona internamente espero les sirva

const ListaDeCupones = new Array();

ListaDeCupones.push({codigo: 'abc20', descuento: 20});
ListaDeCupones.push({codigo: 'xyz50', descuento: 50});
ListaDeCupones.push({codigo: 'blackFriday',descuento: 15});


function find(funcion) { // funcionamiento interno de find
  let elemento = undefined;
  ListaDeCupones.forEach((valor) => {
    if (funcion(valor)) elemento = valor;});
  return elemento;}


function imprimirDescuento(precio, cupon) {
  	if (!cupon || cupon.descuento > 100) {
    console.warn('datos invalidos');
    return;}

  const precioFinal = (precio * (100 - cupon.descuento))/ 100;
  console.log(`el precio es ${precio} pero solo pagaras ${precioFinal}`);}


const cupon_BlackFriday = 'blackFriday';
const cupon_lala = 'lala';


function validarCupon(cupon) {
  return cupon.codigo == cupon_lala;}

const cupon = find(validarCupon);

imprimirDescuento(200, cupon);

Aaron Santiago Loyo Zabala

student•

Paul Gutierrez Velasco

student•

Logré que convivieran los descuentos manuales con los cupones. 😁

Codepen: https://codepen.io/paulgutv/full/bGvxreE

<h2>Calculadora de descuentos</h2>
<label for="price">Precio original: S/.</label>
<input id="price" type="number">
<label for="discount">Descuento: </label>
<input id="discount" type="number">
<label for="coupon">Cupón: </label>
<input id="coupon">
<button id="calculate">Calculate</button>
<p id="result"></p>

const price = document.querySelector("#price");
const discount = document.querySelector("#discount");
const result = document.querySelector("#result");
const calculate = document.querySelector("#calculate");
const coupon = document.querySelector("#coupon");

calculate.addEventListener("click", calculateDiscount);

// CUPONES

const couponList = [];
couponList.push({
  name: "OFERTA50",
  discount: 50
});
couponList.push({
  name: "OFERTA30",
  discount: 30
});

// FUNCIÓN CALCULAR

function calculateDiscount() {
  // SIN VALORES VACÍOS

  if (
    (!price.value && !discount.value) ||
    (!price.value && !coupon.value) ||
    (!discount.value && !coupon.value)
  ) {
    result.innerText = "Introduce dos valores";
    return;
  }

  // DESCUENTO NO MAYOR A 100

  if (discount.value > 100) {
    result.innerText = "El descuento no puede ser mayor de 100%";
    return;
  }

  // FUNCIÓN FILTRO DE CUPONES

  function filterDiscount(couponElement) {
    return couponElement.name == coupon.value;
  }

  const couponArray = couponList.find(filterDiscount);

  if (couponArray) {
    discount.value = couponArray.discount;
  } else {
    if (coupon.value) {
      result.innerText = "Cupón no válido";
      discount.value = "";
      return;
    }
  }

  // CÁLCULO DE DESCUENTO

  result.innerText = "S/. " + (price.value * (100 - discount.value)) / 100;
}

Javier Luján Blanco

student•

Una de las cosas más claras que tengo cada día, es que hay que leer documentación, muuuucha documentación.

Juan Castro

teacher•

No importa dónde o cómo aprendas programación, SIEMPRE vamos a tener que leer documentación. :D

Yerson Felipe Ramirez Garnica

student•

Gente curso de array para que puedan profundizar :) https://platzi.com/cursos/arrays/

Johangly Sucre

student•

Muchas gracias!

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes del Curso de Manipulación de Arrays en JavaScript. :D

Clase: Find y FindIndex

Find

Es parecido a filter, find solo va a retornar un objeto que cumpla con un condicional.

A diferencia de filter, find va a devolver el objeto del array como tal y no un nuevo array. Siempre va a devolver el primer elemento que hizo mach con la condición, en caso de no encontrar nada va a devolver un undefind.

Find es bueno usarlo cuando tenemos objetos o array cuyos atributos o elementos nos se repiten.

Ejemplo

Sin find

const numbers = [1, 30, 49, 29, 10, 13];
let rta = undefined;
for (let index = 0; index < numbers.length; index++) {
    const element = numbers[index];
    if (element === 30) {
        rta = element;
        break;
    }
}

Con find

const rta2 = numbers.find(item => item === 30);
console.log('find', rta2);

FindIndex

Con este devolvemos la posición en la que se encuentra el elemento. En caso de no encontrar el elemento nos devuelve un -1.

Lo usamos utilizando un arrow function al igual que find.

Código de la clase

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 numbers = [1, 30, 49, 29, 10, 13];
let rta = undefined;
for (let index = 0; index < numbers.length; index++) {
    const element = numbers[index];
    if (element === 30) {
        rta = element;
        break;
    }
}
// console.log('for', rta);

const rta2 = numbers.find(item => item === 30);
// console.log('find', rta2);

const rta3 = products.find(({id}) => id === '🍔')
// console.log('rta3', rta3);

const rta4 = products.findIndex(({id}) => id === '🍔')
console.log('rta4', rta4);

Clase: Filter

¿Qué hace?

Este se puede usar en conjunto con otros métodos del prototipo Array.

Filter nos va a ayudar a filtrar los elementos de un array con base a una condición, los elementos que cumplan con la condición van a ser parte del nuevo array. Filter es immutable, no cambia el array original crea uno nuevo con los elementos que cumplan con la condición.

La cantidad del nuevo array va a variar según los elementos que cumplan con la condición dada, puede variar pero siempre siendo el máximo la cantidad de elementos que contiene el array original, incluso puede ser un array vacío.

Ejemplo

Sin filter

const words = ['spray', 'limit', 'elite', 'exuberant'];

const newArray = [];
for (let index = 0; index < words.length; index++) {
    const item = words[index];
    if (item.length <= 6) {
        newArray.push(item);
    }
}

Con filter

const rta = words.filter(item => item.length >= 6);

Otro ejemplo

const orders = [
    {
        customerName: 'Nicolas',
        total: 60,
        delivered: true,
    },
    {
        customerName: 'Zulema',
        total: 120,
        delivered: false,
    },
    {
        customerName: 'Santiago',
        total: 180,
        delivered: true,
    },
    {
        customerName: 'Valentina',
        total: 240,
        delivered: true,
    },
    {
        customerName: 'Nicolas',
        total: 1400,
        delivered: false,
    },
];

const rta2 = orders.filter(item => item.delivered && item.total >= 100);
const search = query => orders.filter(
    ({customerName}) => customerName.includes(query) 
);
console.log(search('V'));

Base de datos

Cuando se trata de una base de datos lo mejor es dejar que el filtro lo haga el lenguaje de bases de datos, en el caso de no tener una estas podemos hacerlo directamente con un lenguaje de programación.

Iván Sergio Adamo

student•

"Al principio es doloroso, pero les va a gustar"

Raúl Adolfo Sánchez Rodríguez

student•

Principales diferencias entre filter( ) y find( ) _

Alejandrina Pérez Lugo

student•

Me costó mucho trabajo entender el método find/Filter 😅 Y me salía pero me faltaba decirle al valor del input que se reemplazara por la variable donde guarde el método que filtra el arreglo, necesito más ejercicios, pero por el momento ya salió :D

Jorge A. Torres

student•

Estuvo potente

Gualberto Montiel

student•

Kevin Alexis Rondon Gonzalez

student•

Juan no mentía cuándo dijo "si es tu primera vez va a doler muchísimo" fue verdad dolió y bastante.

Fernanda Vidal

student•

Hola a todos <3 Por acá les comparto mi solución utilizando find :D

Yosber Emmanuel Guerrero Colmenares

student•

Espero mis apuntes les ayuden de algo. Aún me falta entender muchísimo, pero espero sea de ayuda para alguien jasjda.

const cuponInput = document.querySelector('#cupon'); // Input del usuario
const calcularEnviar = document.querySelector('#calcular'); // Boton de cálculo
const cuponResultado = document.querySelector('.descuento'); // Saldrá error si el cupon no existe.
const precioDescuento = document.querySelector('.precio'); // Elemento donde se mostrará el descuento.
var precioProducto = 100; // Precio del producto.


// Como lo hice de un objeto directamente.

// var cupones = {
//     TACHIRAFOREVER: 20,
//     DESCUENTO9310: 10,
//     VIPTACHIRA: 40,
// }

// function calcularDescuento() {
//     let cuponData = cuponInput.value;
//     if (!cuponData){
//         cuponResultado.innerText = 'No has colocado nada.';
//     } else {
//         var descuento = cupones[cuponData]
//         precioDescuento.innerText ='Total a pagar $' +  precioProducto * (100 - descuento) / 100;
//     } 
// }

// Creamos el array que contendrá los cupones.
var arrayCupones = [];

// Agregamos los cupones al array.
arrayCupones.push({
    cuponName: 'TACHIRAXSIEMPRE',
    descuento: 20,
});
arrayCupones.push({
    cuponName: 'TACHIRA',
    descuento: 10,
});
arrayCupones.push({
    cuponName: 'TACHIRITA',
    descuento: 25,
});

// Inicializamos la función que se ejecutará cuando los usuarios den click.

function calcularDescuento() {
    /* 
    Creamos una función interna que evaluará si un valor de la llave que estamos evaluando coincide con lo que el usuario escribió.

    Ejemplo, tenemos un objeto llamado carro, queremos comprobar que la marca sea Ford, entonces esta funcion evaluara que el valor de la llave "Marca" coincida con el del 'input' que en este caso seria 'Ford'.

    var carro = {
        marca: 'Ford',
        modelo: 'XYZ'
    }
    */
    function evaluarObjetoCupon(cuponObjeto) {
        return cuponObjeto.cuponName == cuponInput.value;
    }

    /* 
    Ahora dentro de la variable cuponObtenido guardaremos el método find aplicado al array directamente, este método se caracteriza por buscar el primer elemento que cumpla con la condición que le demos, en este caso que concida con el input del usuario.

    La condición que debe cumplir se evaluará en la función que antes definimos. A diferencia de filter, que itera todos los elementos del array y guarda todos los elementos que cumplan la condición en un nuevo array, este devolverá directamente lo que encuentre como resultado, que en este caso es el objeto.

    */
    var cuponObtenido = arrayCupones.find(evaluarObjetoCupon);

    /* 
    Evaluamos mediante un if si existe el objeto, en caso de ser verdadero guardaremos el valor del descuento, que en este caso se encuentra bajo la llave 'descuento'.

    Ahora modificaremos el texto del elemento que se supone que le mostrará al usuario cuanto deberá pagar.
    */
    if (cuponObtenido) {
        var descuento = cuponObtenido.descuento;
        precioDescuento.innerText ='Total a pagar $' +  precioProducto * (100 - descuento) / 100;
    } else {
        /*
        En caso de ser falso, mostramos el objeto que dice que el cupon no existe.
        */
        cuponResultado.innerText = 'El cupón no existe.';
    }
}
/*
    Agregamos el metodo de escucha para capturar cuando los usuarios den click al botón y ejecutaremos la función calcularDescuento.
*/
calcularEnviar.addEventListener('click', calcularDescuento);

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deportivo Tachira - Tienda Oficial</title>
    <link rel="shortcut icon" href="https://a.espncdn.com/combiner/i?img=/i/teamlogos/soccer/500/4818.png" type="image/x-icon">
    <link rel="stylesheet" href="cupones.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
    <div class="producto"><div class="imagen"><img src="D_NQ_NP_782024-MLV54945874652_042023-O.png"></div>
    <div class="informacion">
        <p class="price">100$</p>
        <p>¡Celebra el espíritu invicto del fútbol venezolano con la camiseta del Deportivo Táchira Fútbol Club, el orgullo de toda una nación futbolera! Esta icónica camiseta no solo es un pedazo de tela, sino una manifestación palpable de la pasión y el éxito que este equipo ha traído a Venezuela.
        </p>
        <p>Con su diseño audaz en los colores distintivos del equipo, el amarillo y negro resplandecen con gloria y determinación. La camiseta del Deportivo Táchira no solo es una prenda deportiva, sino un símbolo de resiliencia y triunfo en los campos de juego.</p>

        <label for="cupon">Cupon</label>
        <input id="cupon" type="text">

        <button id="calcular">Calcular descuento</button>
        <button id="pagar">Comprar</button>
        <p class="descuento"></p>
        <span class="precio"></span>
        <script src="cupon.js"></script></div>   </div>
</body>
</html>

CSS
h1 {
    font-family: 'Roboto', sans-serif;
    text-align: center;
}
.imagen {
    display: flex;
    width: 50%;
    overflow: hidden;
}
.imagen img {
    width: 100%;
    object-fit: contain;
    height: 500px;
}
.informacion {
    width: 50%;
    flex-direction: column;
}
.producto {
    display: flex;
}

label {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
}

input {
    width: 40%;
    margin-bottom: 10px;
    display: block;
    border-radius: 10px;
    height: 35px;
    border: 1px solid black;
    padding-left: 10px;
    padding-right: 10px;
}

button {
    padding: 10px 20px 10px 20px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    border: none;
    background-color: black;
    color: white;
    border-radius: 10px;
    font-weight: 500;
}
#pagar {
    background-color: yellow;
    color: black;
}
.informacion p {
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    max-width: 600px;
}

.informacion .price {
    font-family: 'Roboto', sans-serif;
    font-weight: 800;
    font-size: 40px;
}
span {
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
}

Raúl Adolfo Sánchez Rodríguez

student•

Repasa las 3 soluciones desarrolladas en la clase de hoy con las siguientes láminas

¿Quieres repasar los métodos FILTER y FIND?

Te dejo algunos links que me han servido para entenderlos: Método filter - enlace 1 Método filter - enlace 2 Método find - enlace 1 Método find - enlace 2

Diferencias entre FIND y FILTER

Diego Vergara

student•

Amo los Arrays, aqui mi funcion

const calcularDescuento = (event) => {
  event.preventDefault()
  const price = event.target.precio.value
  const cupon = event.target.cupon.value
  console.log(price, cupon)

  if (!price || !cupon) {
    console.log('error no hay valores')
    event.target.querySelector('.message').innerHTML = 'No ingresaste cupon o precio'
    return

  }
  const matchedCupon = cupones.find((item) => cupon == item.name)
  if (matchedCupon) {

    event.target.querySelector('.message').innerHTML = `El precio te queda en ${precioConCupon(price, matchedCupon)}`

  } else {
    event.target.querySelector('.message').innerHTML = 'El cupon no existe'

  }



}