DEV Community

Cover image for Manipulación de Arrays en JavaScript 😎Part 1
Roger
Roger

Posted on

Manipulación de Arrays en JavaScript 😎Part 1

#javascript #webdev #programming #tutorial

Manipulacion de Arrays en JavaScript

👋 Hola, el día de hoy te voy a explicar como manipular arreglos en JavaScript. Veremos varios de los principales conceptos que tu debes conocer para poder manipular arreglos en JavaScript, esto es de mucho beneficio al momento de trabajar con algunas librerías tando del lado del cliente como del servidos. Esta es la primer parte, aquí veremos los siguientes conceptos:

Índice

Y muchos mas.
Espero que te guste y te ayude a aprender mas sobre JavaScript. Recuerda que puedes guardar este post para que lo puedas leer en tu futuro, comencemos 🚀.

ForEach

Vamos a iniciar con el primer método, este es forEach, forEach nos permite recorrer un arreglo y ejecutar una función por cada elemento del arreglo. Recuerda que en JavaScript podemos tener un arreglo con diferentes tipos de datos, como números, booleans, objetos, arrays, etc.
Como por ejemplo este arreglo:

[🐥, 🐄, 🥔, 🌽]
Enter fullscreen mode Exit fullscreen mode

Puedes utilizar estos métodos y también utilizar for pero estos métodos que nos da JavaScript son mas eficientes y con una mejor sintaxis. Aquí las diferencias:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
numbers.forEach((number) => console.log(number))
// vs

for (let i = 0; i < numbers.length; i++) {
  const item = numbers[i]
  console.log(item)
}
Enter fullscreen mode Exit fullscreen mode

Como puedes ver estamos haciendo lo mismo para la sintaxis cumbiamba bastante, y se complica mas cuando se deben hacer operaciones mas complejas.

Ahora si pasemos al código, vamos a crear un array de letras, con los elementos que quieras. Primero utilizaremos for para recorrer este array

const letras = ['a', 'b', 'c', 'd']

for (let i = 0; i < letras.length; i++) {
  const item = letras[i]
  console.log(item)
}
Enter fullscreen mode Exit fullscreen mode

Como puedes ver tenemos en total 5 líneas de código, esto mismo se puede hacer de una manera mucho mas fácil con los métodos de array. Vamos a tomer letras y ejecutar .forEach() ahí tenemos una arrow function, es la función que se ejecuta en cada uno de los elementos, y le decimos que queremos en cada uno de los items:

const letras = ['a', 'b', 'c', 'd']

letras.forEach((item) => console.log(item))
Enter fullscreen mode Exit fullscreen mode

Como puedes ver a diferencia de utilizar for ahora hemos hecho exactamente lo mismo, pero con una mejor sintaxis y en tan solo 1 linea de código. El forEach ya nos entrega cada elemento.

Ahora esto quizá lo entiendas mejor llevándolo a la practica es por eso que ahora crearemos un archivo index.html y crearemos una pequeña pagina en la cual pondremos un script y un div:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Metodos de Arrays</title>
  </head>
  <body>
    <div id="app"></div>

    <script></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Dentro de nuestro script, vamos a poner unos productos, el fin de esto es renderizarlos utilizando forEach, ahora crearemos los productos:

const productos = [
  {
    nombre: 'Camisa',
    precio: 50,
  },
  {
    nombre: 'Pantalon',
    precio: 100,
  },
  {
    nombre: 'Zapatos',
    precio: 150,
  },
]
Enter fullscreen mode Exit fullscreen mode

Ahora que tenemos los productos, primero debemos seleccionar el div en donde queremos renderizar nuestros productos:

const app = document.getElementById('app')
Enter fullscreen mode Exit fullscreen mode

Recuerda que todo este código lo debes introducir en tu etiqueta script, se tiene que ver algo así:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Metodos de Arrays</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      const productos = [
        {
          nombre: 'Camisa',
          precio: 50,
        },
        {
          nombre: 'Pantalon',
          precio: 100,
        },
        {
          nombre: 'Zapatos',
          precio: 150,
        },
      ]
      const app = document.getElementById('app')
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Yo lo estoy poniendo por partes para que sea mas fácil de entender, continuemos.

Ahora vamos a hacer el uso de forEach para recorrer nuestros productos, y luego ejecutar la lógica para introducir los elementos dentro del div:

productos.forEach((producto) => {
  app.innerHTML += `
        <div>
            <h2>${producto.nombre}</h2>
            <p>$${producto.precio}</p>
        </div>
    `
})
Enter fullscreen mode Exit fullscreen mode

Pero de esta manera igual estamos recorriendo objetos, como puedes ver, estamos renderizando el nombre y el precio para que el usuario lo pueda ver. Si ejecutamos nuestro html veremos lo siguiente:

Resultado

Ya lograste iterar y dar un resultado, utilizando métodos de array.

Ahora como reto para ti es:

  • Crear un arreglo de productos, los cuales deben tener: nombre, precio, debe indicar si es un producto nuevo o no y si el producto lo han pedido (indicado con un input checkbox).

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Map

Ahora aprenderemos map el elemento mas útil para hacer transformaciones, varios lenguajes de programación lo utilizan y también algunos frameworks. El map lo que hace es transformar, el array original en un nuevo array, pero con los elementos transformados.

[🥚, 🐄, 🐥, 🥖]

//Map

[🍟, 🍔, 🍗, 🥪]
Enter fullscreen mode Exit fullscreen mode

Al utilizar map, siempre tenemos el mismo numero de elementos que el array original, si el original contenía 4 elementos el nuevo array también contendrá 4 elementos.

Vamos al código, vamos a crear un array de números, y lo que queremos es que nos devuelva un array con los números multiplicados por 2 pero que este se guarde en otra constante:

const numeros = [1, 2, 3, 4, 5]

const numeroMultiplicados = numeros.map((numero) => numero * 2)
Enter fullscreen mode Exit fullscreen mode

Si hacemos un console.log() de numeros y otro de numerosMultiplicados veremos que numeros sigue siendo el mismo pero que dentro de numerosMultiplicados tenemos un nuevo array con los numeros multiplicados. Ya que map genera un nuevo array con la transformación.

Ahora veremos un ejemplo dentro de html haciendo lo del ejercicio anterior pero ahora utilizando map:

const app = document.getElementById('app')
const producto = productos.map((producto) => {
  return `
        <div>
            <h2>${producto.nombre}</h2>
            <p>$${producto.precio}</p>
        </div>
    `
})
app.innerHTML = producto.join('')
Enter fullscreen mode Exit fullscreen mode

Map Reloadaed

En pocas palabras map es un método que transforma, pero ahora veremos un poco mas profundo map.

Ahora vamos a utilizar map, en un archivo de .js y tendremos un array de productos, con un nombre, precio y si esta disponible:

const productos = [
    {
        nombre: 'Camisa',
        precio: 50,
        disponible: true,
    },
    {
        nombre: 'Pantalon',
        precio: 100,
        disponible: true,
    },
    {
        nombre: 'Zapatos',
        precio: 150,
        disponible: false,
    },
    {
        nombre: 'Bicicleta',
        precio: 200,
        disponible: true,
    },
]
Enter fullscreen mode Exit fullscreen mode

Ahora map puede funcionar para transformar, podemos tomar todos los objetos de un array para transformarlos en lo que quiera.

Vamos a suponer que de este array solo quiero saber el precio, entonces si hacemos un map:

productos.map((producto) => producto.precio)
Enter fullscreen mode Exit fullscreen mode

Ya no tenemos un array de objetos, ahora tenemos un array de números, y puedes hacer un console.log() para verlo:

console.log('Productos: ', productos)
precios = productos.map(producto => producto.precio)
console.log('Precios: ',precios)
Enter fullscreen mode Exit fullscreen mode

Veremos algo como esto:

Productos:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Pantalon', precio: 100, disponible: true },
  { nombre: 'Zapatos', precio: 150, disponible: false },
  { nombre: 'Bicicleta', precio: 200, disponible: true }
]
Precios:  [ 50, 100, 150, 200 ]
Enter fullscreen mode Exit fullscreen mode

Como vemos sigue cumpliendo con lo visto, nos devolvió un array con 4 elementos, porque en el array de productos tenemos 4 objetos.

Esto nos puede para limpiar datos o para filtrar datos, sirve para seleccionar datos de un array.

Ahora que pasa si lo que queremos es agregar un elemento el objeto, tenemos nombre, precio y disponible pero queremos agregar una propiedad que nos muestre el IVA del precio tomando en cuenta que el IVA es del 16% este 16% se debe agregar al precio original.

Pero no queremos transformar el array original, solo agregar un atributo sin modificar le array original. Esto si lo hacemos de la siguiente manera:

const precioIva = productos.map((producto) => {
  producto.iva = producto.precio * 0.16 + producto.precio
  return producto
})

console.log('Precios con IVA: ', precioIva)
Enter fullscreen mode Exit fullscreen mode

Vamos a ver el si se agrego el atributo a los objetos, pero igual queremos ver que el array original no se modifico:

console.log('Original: ', productos)
console.log('Precios con IVA: ', precioIva)
Enter fullscreen mode Exit fullscreen mode

Si vemos esto en la consola nos aparece lo siguiente:

Original:  [
  { nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
  { nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
  { nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
  { nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]
Precios con IVA:  [
  { nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
  { nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
  { nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
  { nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]
Enter fullscreen mode Exit fullscreen mode

Como vemos el original se ha cambiado, y se supone que map no es mutable, lo que sucede es que estamos creando una copia pero esta esta copiando una referencia de memoria y aquí cometemos ese error, debemos tener mucho cuidado con esto. Esto es muy común que pase con objetos ya que estos tienen referencia en memoria.

Para que esto no suceda en ves de retornar y hacer la modificación en el objeto vamos a asegurarnos de generar un nuevo objeto, vamos a utilizar el spred operator que nos entrega ECMAScript 6, esto se copia sin la referencia de memoria, y luego agregamos el valor que queremos agregar:

const precioIva = productos.map((producto) => {
  iva = producto.precio * 0.16 + producto.precio
  return {
    ...producto,
    iva 
  }
})
Enter fullscreen mode Exit fullscreen mode

Ahora si vemos el console.log nos aparecerá esto:

Original:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Pantalon', precio: 100, disponible: true },
  { nombre: 'Zapatos', precio: 150, disponible: false },
  { nombre: 'Bicicleta', precio: 200, disponible: true }
]
Precios con IVA:  [
  { nombre: 'Camisa', precio: 50, disponible: true, iva: 58 },
  { nombre: 'Pantalon', precio: 100, disponible: true, iva: 116 },
  { nombre: 'Zapatos', precio: 150, disponible: false, iva: 174 },
  { nombre: 'Bicicleta', precio: 200, disponible: true, iva: 232 }
]
Enter fullscreen mode Exit fullscreen mode

Como podemos ver esta ves no se modifico el arreglo original, esta es la forma en que debes trabajar con objetos y map a la ves, sin copiar la referencia de memoria.

Ahora como reto para ti es:

Crear un array con objetos cada objeto debe tener las siguientes propiedades: nombre, apellido, correo y sueldo. Tu tarea es agregar una nueva propiedad que nos muestre el sueldo en dólares, sin que se modifique el array original.

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Filter

Ahora veremos otro concepto, que es el de filter, este es una función que nos permite filtrar datos de un array, y nos devuelve un array con los datos que cumplen con la condición van a ser parte del nuevo array, por lo tanto filter es inmutable. Puede que el array ya lo halla transformado map, pero que ahora nosotros vamos a quererlo filtrar con base a una condición. por ejemplo:

[🍕,🍔,🍟,🌭,🍿,🥞,🧇,🍳,🥚,🥯,🍖,🍗,🥩,🍚]
// Filtrando la comida de la lista por comida vegana
[🍟,🍿,🍚]
Enter fullscreen mode Exit fullscreen mode

Este ejemplo nos muestra la comida que cumple con la condición de ser vegana y nos va a devolver un nuevo array, filter es un método que puede retornar hasta 0 elementos si es que ningún elemento cumple con la condición, pero nunca va a retornar mas elementos que el array original, a diferencia con map que retorna la misma longitud del array original.

Vamos a a ver esto en código para que quede mas claro, con un ejemplo con un array de números:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50]
Enter fullscreen mode Exit fullscreen mode

Ahora que pasa si queremos filtrar los números que son pares, para esto debemos utilizar el método filter, y la condición que queremos cumplir es que el numero sea par, para ver que un numero par su modulo % debe ser igual a 0, por lo tanto debemos hacer lo siguiente:

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50]

const pares = numeros.filter(numero => numero % 2 === 0)
console.log('Numeros Pares: ', pares)
Enter fullscreen mode Exit fullscreen mode

Si vemos el resultado en la consola, podremos ver lo siguiente:

Numeros Pares:  [
   2,  4,  6,  8, 10, 12, 14, 16,
  18, 20, 22, 24, 26, 28, 30, 32,
  34, 36, 38, 40, 42, 44, 46, 48,
  50
]
Enter fullscreen mode Exit fullscreen mode

Ahora vamos a otro ejemplo, ahora crearemos un array con nombres de personas, y queremos filtrar los nombres que empiezan con la letra A, para esto debemos hacer lo siguiente:

const nombres = ['Luis', 'Alan', 'Gerardo', 'Angel', 'Luisa', 'Sofia', 'Renata', 'Camila', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', 'Daniel', 'Jorge', 'Miguel', 'Daniela', 'Sandra', 'Ana', 'Maria', 'Sebastian', 'Juan', 'Javier', ]
Enter fullscreen mode Exit fullscreen mode

De este arreglo solo vamos a querer los nombres que comiencen con la letra 'A', así que utilizaremos un filter para filtrar los nombres que comiencen con la letra 'A' y lo guardaremos en una nueva constante:

const nombresA = nombres.filter(nombre => nombre.charAt(0) === 'A')
console.log('Nombres que empiezan con A: ', nombresA)
Enter fullscreen mode Exit fullscreen mode

Si vemos esto en nuestra consola veremos lo siguiente:

Nombres que empiezan con A:  [
  'Alan', 'Angel', 'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana'
]
Enter fullscreen mode Exit fullscreen mode

Y este no modifica el array original, si hacemos un console.log() de los nombres originales y los filtrados veremos lo siguiente:

Original [
  'Luis',   'Alan',      'Gerardo', 'Angel',     'Luisa',  'Sofia',
  'Renata', 'Camila',    'Juan',    'Javier',    'Daniel', 'Jorge',
  'Miguel', 'Daniela',   'Sandra',  'Ana',       'Maria',  'Sebastian',
  'Juan',   'Javier',    'Daniel',  'Jorge',     'Miguel', 'Daniela',
  'Sandra', 'Ana',       'Maria',   'Sebastian', 'Juan',   'Javier',
  'Daniel', 'Jorge',     'Miguel',  'Daniela',   'Sandra', 'Ana',
  'Maria',  'Sebastian', 'Juan',    'Javier',    'Daniel', 'Jorge',
  'Miguel', 'Daniela',   'Sandra',  'Ana',       'Maria',  'Sebastian',
  'Juan',   'Javier',    'Daniel',  'Jorge',     'Miguel', 'Daniela',
  'Sandra', 'Ana',       'Maria',   'Sebastian', 'Juan',   'Javier',
  'Daniel', 'Jorge',     'Miguel',  'Daniela',   'Sandra', 'Ana',
  'Maria',  'Sebastian', 'Juan',    'Javier',    'Daniel', 'Jorge',
  'Miguel', 'Daniela',   'Sandra',  'Ana',       'Maria',  'Sebastian',
  'Juan',   'Javier',    'Daniel',  'Jorge',     'Miguel', 'Daniela',
  'Sandra', 'Ana',       'Maria',   'Sebastian', 'Juan',   'Javier',
  'Daniel', 'Jorge',     'Miguel',  'Daniela',   'Sandra', 'Ana',
  'Maria',  'Sebastian', 'Juan',    'Javier',
  ... 30 more items
]
Nombres que empiezan con A:  [
  'Alan', 'Angel', 'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana',   'Ana',
  'Ana',  'Ana'
]
Enter fullscreen mode Exit fullscreen mode

Esto quiere decir que nuestro array original no se modifico.

En filter, podemos poner condiciones mas complejas, para esto vamos a utilizar el array de productos que utilizamos en map:

const productos = [
  {
    nombre: 'Camisa',
    precio: 50,
    disponible: true,
  },
  {
    nombre: 'Pantalon',
    precio: 100,
    disponible: true,
  },
  {
    nombre: 'Zapatos',
    precio: 150,
    disponible: false,
  },
  {
    nombre: 'Bicicleta',
    precio: 200,
    disponible: true,
  },
  {
    nombre: 'Mochila',
    precio: 250,
    disponible: false,
  },
  {
    nombre: 'Celular',
    precio: 300,
    disponible: true,
  },
  {
    nombre: 'Tablet',
    precio: 350,
    disponible: false,
  }
]
Enter fullscreen mode Exit fullscreen mode

Y ahora queremos hacer un filtro, de todos los productos que están disponibles, en este caso tenemos 4, debemos hacer lo siguiente:

const disponible = productos.filter(producto => producto.disponible)
Enter fullscreen mode Exit fullscreen mode

Solo ponemos producto.disponible porque esa propiedad ya es un boleano, si es true entonces el producto esta disponible, si es false entonces no esta disponible.

Si vemos esto en la consola nos aparece lo siguiente:

Productos disponibles:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Pantalon', precio: 100, disponible: true },
  { nombre: 'Bicicleta', precio: 200, disponible: true },
  { nombre: 'Celular', precio: 300, disponible: true }
]
Enter fullscreen mode Exit fullscreen mode

Ahora haremos algo mas complejo, queremos ver los productos que estén disponibles, pero que aparte tengan un precio mayor a 250, esto lo podemos hacer de la siguiente forma:

const disponible = productos.filter(producto => producto.disponible && producto.precio > 250)
Enter fullscreen mode Exit fullscreen mode

Si vemos esto en la consola veremos lo siguiente:

Productos disponibles y mayor a $250:  [ { nombre: 'Celular', precio: 300, disponible: true } ]
Enter fullscreen mode Exit fullscreen mode

En este caso solo tenemos 1 elemento que cumple con eso.

Y podemos hacer cosas aun mas complejas, pero siempre nos devuelve un array que cumpla con los elementos de la condición.

Ahora haremos algo mas complejo, vamos a hacer un buscador, para que nosotros introduzcamos una palabra o un nombre y este nos devuelva un array con los productos que tengan esa palabra o nombre, esto lo haremos de la siguiente forma:

const buscar = query => {
  return productos.filter(producto => {
    return producto.nombre.includes(query)
  })
}

console.log('Buscador: ',buscar('C'))
Enter fullscreen mode Exit fullscreen mode

En este caso estamos buscando los productos que contienen la letra C, y nos devuelve un array con los productos que cumplen con eso. En nuestra consola veremos algo como esto:

Buscador:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Celular', precio: 300, disponible: true }
]
Enter fullscreen mode Exit fullscreen mode

Pero como puedes ver nos devuelve los que contiene la letra 'C' mayúscula, y no todos los que contiene la letra 'c'. Para esto debemos mejorar nuestro buscador de la siguiente forma:

const buscar = query => {
  return productos.filter(producto => {
    return producto.nombre.toLowerCase().includes(query.toLowerCase())
  })
}

console.log('Buscador: ',buscar('c'))
Enter fullscreen mode Exit fullscreen mode

Si ahora vemos esto en la consola nos aparece lo siguiente:

Buscador:  [
  { nombre: 'Camisa', precio: 50, disponible: true },
  { nombre: 'Bicicleta', precio: 200, disponible: true },
  { nombre: 'Mochila', precio: 250, disponible: false },
  { nombre: 'Celular', precio: 300, disponible: true }
]
Enter fullscreen mode Exit fullscreen mode

Lo que hicimos es que todos los nombres los pasamos a letras minúsculas, y luego le decimos que debe incluir la letra que le pasamos, pero esta letra igual la pasamos a minúscula, para que todos los nombres estén en minúscula y pueda coincidir con la búsqueda. De esta forma no afecta como introduzcamos la letra a buscar.

Así que para terminar recuerda que filter sirve para filtrar la información por medio de una condición.

Ahora como reto para ti es:

  • Crear un arreglo de productos que tenga las siguientes propiedades vendedor, producto, precio, vendido. Debes crear un buscador que busque el vendedor que ha vendido el producto que le pasemos por parámetro, y debes hacer una validación del buscador, si un producto no ha sido vendido o si ese producto no existe.

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Reduce

Ahora veremos reduce, es un método que contienen los arreglos en JavaScript, y nos permite ejecutar funciones reducer una función de reducer, recibe 2 argumentos:

  1. El primero es un valor que esta siendo acumulado.
  2. El segundo es el valor que se esta iterando del arreglo.

La función debe devolver el nuevo elemento que ese va a estar acumulando. Nos permite no solo reducciones si no mas operaciones bastantes útiles. Veremos algunos ejemplos:

const reducer = (acumulador, valorActual) => nuevoAcumulador
Enter fullscreen mode Exit fullscreen mode

El nuevoAcumulador en la siguiente iteración tomo el argumento de acumulador, y así hasta que lleguemos al final del arreglo.

const reducido = [].reduce((acc, el) => acc + el, 0)
Enter fullscreen mode Exit fullscreen mode

Como vemos estamos ejecutando la función en un arreglo vacío, este recibe 2 argumentos, el primero es el reducer (acc, el) => acc + el, y el segundo es el valor inicial que va a tener el acumulador cuando comience la iteración, en este caso es 0. Este reducer devuelve la suma del acumulador y el elemento que esta iterando.

Ahora vamos a darle unos valores al arreglo y ver lo que nos devuelve en la consola:

const reducido = [1, 2].reduce((acc, el) => acc + el, 0)
console.log(reducido)
Enter fullscreen mode Exit fullscreen mode

En la consola nos devuelve el valor de:

3
Enter fullscreen mode Exit fullscreen mode

Para ver esto de una mejor forma podemos hacerlo de la siguiente forma:

const reducido = [1, 2].reduce((acc, el) => {
  console.log(`Acumulador: ${acc}, Elemento: ${el}, Suma: ${acc + el}`);
  return acc + el;
}, 0)
console.log('Resultado: ', reducido)
Enter fullscreen mode Exit fullscreen mode

Y en la consola veríamos lo siguiente:

Acumulador: 0, Elemento: 1, Suma: 1
Acumulador: 1, Elemento: 2, Suma: 3
Resultado:  3
Enter fullscreen mode Exit fullscreen mode

Ahora veremos este ejemplo con mas números:

const numero = [1, 2, 3, 4, 5]
const resultado = numero.reduce((acc,el) => {
    console.log(`Acumulador: ${acc}, Elemento: ${el}, Suma: ${acc + el}`)
    return acc + el
}, 0)
console.log('Resultado: ', resultado)
Enter fullscreen mode Exit fullscreen mode

Y en nuestra consola veremos lo siguiente:

Acumulador: 0, Elemento: 1, Suma: 1
Acumulador: 1, Elemento: 2, Suma: 3
Acumulador: 3, Elemento: 3, Suma: 6
Acumulador: 6, Elemento: 4, Suma: 10
Acumulador: 10, Elemento: 5, Suma: 15
Resultado:  15
Enter fullscreen mode Exit fullscreen mode

Esto nos puede servir para hacer la suma de todos los elementos de un arreglo.

Indexar objetos

Ahora, iremos al código, veremos un ejemplo con un arreglo de autos, tendremos, el nombre, el año y el color:

const autos = [
  { nombre: 'Mustang', año: 2015, color: 'Azul' },
  { nombre: 'Camaro', año: 2018, color: 'Naranja' },
  { nombre: 'Challenger', año: 2017, color: 'Negro' },
  { nombre: 'Ferrari', año: 2019, color: 'Rojo' },
  { nombre: 'Lamborghini', año: 2015, color: 'Amarillo' },
]
Enter fullscreen mode Exit fullscreen mode

Cuando tenemos un arreglo gigante de: 10k elementos, 100k elementos, 1millon de elementos, y queremos ir a buscar un elemento en particular del arreglo, podemos utilizar find, si lo llamamos una ves no tendremos ningún problema pero si lo llamamos varias veces, podemos destruir el performance de nuestra aplicación.

Lo que vamos a hacer es tomar este arreglo de autos y lo vamos a indexar:

const indexed = autos.reduce((acc, el) => ({
  ...acc,
  [el.nombre]: el,
}),{})

console.log(indexed)
Enter fullscreen mode Exit fullscreen mode

Si vemos en la consola nos aparecerá lo siguiente:

{
  Mustang: { nombre: 'Mustang', 'año': 2015, color: 'Azul' },
  Camaro: { nombre: 'Camaro', 'año': 2018, color: 'Naranja' },
  Challenger: { nombre: 'Challenger', 'año': 2017, color: 'Negro' },
  Ferrari: { nombre: 'Ferrari', 'año': 2019, color: 'Rojo' },
  Lamborghini: { nombre: 'Lamborghini', 'año': 2015, color: 'Amarillo' }
}
Enter fullscreen mode Exit fullscreen mode

Como podemos ver, ahora tenemos un objeto, que esta indexado por los nombres de los autos, así que si después quiero ir a buscar uno de los elementos, puedo utilizar el nombre del auto:

console.log(indexed['Challenger'])

// Output:
{ nombre: 'Challenger', 'año': 2017, color: 'Negro' }
Enter fullscreen mode Exit fullscreen mode

De esta manera podemos indexar los objetos que se encuentran dentro de nuestro arreglo utilizando el método de reduce.

Anidados

Ahora vamos a tomar un arreglo que contiene elementos anidados, esto ocurre cuando queremos hacer mezclas o algún endpoint nos devuelve un arreglo que contiene mas arreglos, ahora lo que queremos hacer es dejar el arreglo que sea plano, sin anidación, esto quiere decir:

anidado = [1, [2, 3, 4], 5, [6, 7, 8]]
noAnidado = [1, 2, 3, 4, 5, 6, 7, 8]
Enter fullscreen mode Exit fullscreen mode

Para transformarlo lo vamos a hacer de la siguiente manera:

const plano = anidado.reduce((acc, el) => acc.concat(el), [])
console.log('Anidados', anidado)
console.log('Plano', plano)
Enter fullscreen mode Exit fullscreen mode

Lo que estamos haciendo es concatenando el acumulador con el elemento, y este comenzara en un arreglo vacío. Si vemos esto en la consola tendremos el siguiente resultado:

Anidados [ 1, [ 2, 3, 4 ], 5, [ 6, 7, 8 ] ]
Plano [
  1, 2, 3, 4,
  5, 6, 7, 8
]
Enter fullscreen mode Exit fullscreen mode

Para ver que esta sucediendo podemos hacer un console.log de los elementos de la siguiente forma:

const plano = anidado.reduce((acc, el) => {
  console.table(`acc: ${acc}, el: ${el}, acc.concat(el): ${acc.concat(el)}`)
  return acc.concat(el)
}, [])

console.log('Resultado: ', plano)
Enter fullscreen mode Exit fullscreen mode

Y en la consola veremos lo siguiente:

acc: , el: 1, acc.concat(el): 1
acc: 1, el: 2,3,4, acc.concat(el): 1,2,3,4
acc: 1,2,3,4, el: 5, acc.concat(el): 1,2,3,4,5
acc: 1,2,3,4,5, el: 6,7,8, acc.concat(el): 1,2,3,4,5,6,7,8
Resultado:  [
  1, 2, 3, 4,
  5, 6, 7, 8
]
Enter fullscreen mode Exit fullscreen mode

Por lo tanto el método de reduce recibe una función llamada reducer la cual recibe como primer argumento el acumulador, y el segundo es el elemento que se esta iterando, y esta función devuelve el nuevo acumulador que se llama como argumento la siguiente forma, el método de reduce recibe como segundo argumento el cual es el valor inicial que tiene el acumulador:

  1. reducer = (acc, el) => nuevoAcc
  2. reduce(reducer, valorInicial)

Ahora como reto para ti es:

  • Crear un arreglo de videojuegos, y indexarlo por el nombre de los videojuegos, debe tener las propiedades de: nombre, precio, genero. Ejemplo: 
const games = [
  { nombre: 'Mario', precio: '$100', genero: 'Accion' },
  { nombre: 'Zelda', precio: '$200', genero: 'Accion' },
  { nombre: 'GTA', precio: '$300', genero: 'Accion' },
  { nombre: 'Fifa', precio: '$400', genero: 'Deporte' },
  { nombre: 'PES', precio: '$500', genero: 'Deporte' },
  { nombre: 'NFS', precio: '$600', genero: 'Deporte' },
]
Enter fullscreen mode Exit fullscreen mode
  • Tu segunda tarea es agregar una plataforma en una arreglo a cada videojuego, debes solo devolver el nombre del videojuego y la plataforma en un arreglo plano, ejemplo: 
const games = [
  {
    nombre: 'Mario',
    precio: '$100',
    genero: 'Accion',
    plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
  },
  {
    nombre: 'Zelda',
    precio: '$200',
    genero: 'Accion',
    plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
  },
  {
    nombre: 'GTA',
    precio: '$300',
    genero: 'Accion',
    plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
  },
  {
    nombre: 'Fifa',
    precio: '$400',
    genero: 'Deporte',
    plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
  },
]
Enter fullscreen mode Exit fullscreen mode

Muchas Suerte 🎉, no olvides compartir tu respuesta en los comentarios.

Ir A Indice 👆

Aquí termina la Parte 1, en las siguientes partes veremos las demás formas de manipular los arreglos de JavaScript.

Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉Tips y Tutoriales..

Top comments (4)

Collapse
 
rogerdimonte profile image
Roger •

Mi solucion al ejercicio de filter:

const productos = [
  {
    vendedor: "Juan",
    producto: "Televisor",
    precio: 500,
    vendido: true
  },
  {
    vendedor: "Ana",
    producto: "Radio",
    precio: 100,
    vendido: true
  },
  {
    vendedor: "Pedro",
    producto: "Televisor",
    precio: 600,
    vendido: false
  },
  {
    vendedor: "Ramon",
    producto: "PC",
    precio: 1000,
    vendido: true
  },
  {
    vendedor: "Pedro",
    producto: "Telefono",
    precio: 800,
    vendido: false
  },
]

const producto = (query) => {
  let [vendedor] = productos.filter(producto => producto.vendido && producto.producto === query ? producto.vendedor : null)
  if (vendedor.length === 0) {
    return "Producto no encontrado o no vendido"
  }
  return vendedor.vendedor + " vendio el producto " + vendedor.producto
}

console.log(producto("PC"))
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rogerdimonte profile image
Roger •

Aquí mi solución del ejercicio 2 de Reducer

const games = [
  {
    nombre: 'Mario',
    precio: '$100',
    genero: 'Accion',
    plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
  },
  {
    nombre: 'Zelda',
    precio: '$200',
    genero: 'Accion',
    plataforma: [['Nintendo', 'Nintendo Switch', 'Nintendo 3Ds'], ['Wii', 'Wii U']],
  },
  {
    nombre: 'GTA',
    precio: '$300',
    genero: 'Accion',
    plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
  },
  {
    nombre: 'Fifa',
    precio: '$400',
    genero: 'Deporte',
    plataforma: [['XBOX360', 'XBOX-ONE'], ['PS3', 'PS4', 'PS5'], 'PC'],
  },
]

const list = games.map(game => {
  plataforma = game.plataforma.reduce((acc, plat) => {
    return acc.concat(plat)
  }, [])
  return { 
    nombre: game.nombre,
    plataforma
  }
})
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rogerdimonte profile image
Roger •

Muchas gracias por tu aporte!!

Collapse
 
josepedrolorenzini profile image
Jose_Lorenzini •

Buenisimo - muchas gracias

Read next

jesterxl profile image

Thoughts on ThoughtWorks Radar 2024

Jesse Warden -

akpvt profile image

CMS: Payload CMS

akpvt -

mdarifulhaque profile image

2490. Circular Sentence

MD ARIFUL HAQUE -

sudhanshu_developer profile image

Mastering State Management with the useCallback( ) Hook in React.

Sudhanshu Gaikwad -