Saltar al contenido principal

Ejercicio 13: Función que Filtra una Lista de Productos en Oferta

Aprende a usar funciones para filtrar listas de productos. Ideal para principiantes que desean construir funcionalidades tipo "ofertas" o "búsquedas".

El objetivo principal es aprender a trabajar con funciones que devuelven objetos y cómo utilizar funciones flecha para filtrar datos en un arreglo.

Actividad​

  1. Crea un arreglo de objetos llamado productos, donde cada objeto represente un producto con las propiedades nombre y enOferta (esta última debe ser un valor booleano).
  2. Crea una función flecha llamada filtrarEnOferta que tome el arreglo productos como argumento.
  3. Dentro de la función, usa el método filter para devolver un nuevo arreglo que contenga solo los productos que están en oferta (enOferta debe ser true).
  4. Llama a la función y guarda el resultado en una variable llamada productosEnOferta.
  5. Muestra productosEnOferta en la consola.

Solución​

Paso 1: Crear el archivo index.html​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Función que Filtra una Lista de Productos en Oferta</title>
  </head>
  <body>
    <h1>Ejercicio 13: Función que Filtra una Lista de Productos en Oferta</h1>
    <p>Los cambios se muestran en consola.</p>
    <script src="script.js"></script>
  </body>
</html>

Paso 2: Escribir el código en script.js​

JavaScript
// Crear el arreglo de productos
const productos = [
  { nombre: "Laptop", enOferta: true },
  { nombre: "Celular", enOferta: false },
  { nombre: "Tablet", enOferta: true },
  { nombre: "Monitor", enOferta: false },
];

// Definir la función flecha para filtrar productos en oferta utilizando el método filter de JavaScript
const filtrarEnOferta = (productos) =>
  productos.filter((producto) => producto.enOferta);

// Llamar a la función y guardar el resultado en una variable
let productosEnOferta = filtrarEnOferta(productos);

// Mostrar los productos en oferta
console.log("Productos en oferta:", productosEnOferta);
info

🔎 Revisa las siguientes secciones donde econtrarás más información sobre este tema: