Map

Resumen
.
Lo más sencillo:

¿Qué hace el .map()? TRANSFORMAR.

.map() es INMUTABLE por lo tanto no modifica el array original, sino que crea uno nuevo con la “transformación” aplicada.
.
Además, mantienes el mismo length que el array original, te devuelve en el nuevo array la misma cantidad que el array que le aplicaste el método.
.
Código de la clase:

const products = [
            { title: 'Burger', price: 121 },
            { title: 'Pizza', price: 202 },
        ];
        const app = document.getElementById('app');
        const list = products.map(product => {
            return `<li>${product.title} - ${product.price}</li>`;
        })

        app.innerHTML = list.join('');

El método join() une todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena y devuelve esta cadena.

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected "Fire,Air,Water"

console.log(elements.join(''));
// expected  "FireAirWater"

console.log(elements.join('-'));
// expected "Fire-Air-Water"

Éxitos 😃

Esta imagen ilustra muy bien los 3 metodos mas usados para la manipulación de arrays

Importante: Array.map siempre necesita que se devuelva algo en la función.
En una arrow function si no se usan paréntesis se conoce como un return implícito, en otras palabras, devuelve automáticamente el resultado de la operación Esto solo funciona con cosas sencillas.
Si necesitas usar más de una línea de código para devolver el resultado es mejor que uses { código } y return () para que no tengas problemas.

Diferencia práctica entre .forEach()y .map()

Por si llegan a preguntárselo, si, éstos métodos son muy parecidos, ya que ejecutan una función sobre cada elemento de un array, pero hay una diferencia fundamental: .forEach() no crea o devuelve, por defecto, un nuevo array con los elementos modificados, en cambio .map() si.

Map lo que te permite es iterar sobre cada elemento del array y segun lo que hayas indicado que haga, te devuelve un nuevo array con los valores modificados.

Por lo tanto sería un metodo inmutable para transformar los valores de un array

Mala Practica en React con map

Usar el index del map

👉Representa varios elementos en React con el array.map() . Las claves deben ser únicas para que React pueda manejar el seguimiento adecuado de ese elemento o componente. Si tuviera que utilizar el índice como clave, esa clave puede ser un duplicado en algunos casos, lo que debe evitarse.
Imagine tener una matriz de elementos a través de los cuales va a representar .map y usar el índice como claves. Además, imagine agregar al medio o eliminar un elemento del medio de la matriz. La clave terminará siendo la misma que antes, y React asumirá que es el mismo elemento / componente idéntico que antes.
😡Esto podría provocar efectos no deseados y debe evitarse.

Parámetros

• callback
  Función que producirá un elemento del nuevo array, recibe tres argumentos:
• currentValue
  El elemento actual del array que se está procesando.
• index
  El índice del elemento actual dentro del array.
• array
  El array sobre el que se llama map.
• thisArg
  Opcional. Valor a usar como this al ejecutar callback.

En la clase de forEach, probé con map y me dio el mismo resultado sin tener que usar join. Fue algo así:

const list = listBurger.map(product => app.innerHTML += `<li> ${product.name} - ${product.price} </li>`)

Acotando que listBurger es el array. Si se cambia el map por el forEach, el resultado me da lo mismo. En este caso particular en el cual no se necesita un nuevo array, o el objeto modificado, map y forEach hacen casi lo mismo en el document con solo cambiar una palabra por otra. Sin embargo, si analizamos la constante ‘list’, con un método regresa undefined, mientras que con map, regresa el array con el html que estamos agregando.

NodeList con map()

una de las diferencias entre map() y forEach() es que si queremos recorrer una NodeList con map no se puede en cambio foreach() si puede recorrer una NodeList

Map transforma los elementos de un array según la lógica de negocios y retorna un nuevo array con el mismo numero de elementos del array original

.push = mutable
.map = inmutable

El método map iterará sobre cada elemento de un arreglo y devuelve un nuevo arreglo que contiene los resultados de llamar a la función callback en cada elemento. Esto lo hace sin mutar el arreglo original.

const frutas = ["🍌", "🍏", "🍓"];

const nuevoArray = frutas.map((item) => {
    return item;
});

console.log(nuevoArray);

Una función de callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

En este video lo podrán seguir profundizando:

(https://www.youtube.com/watch?v=tP8JiVUiyDo)

.map

Genera un nuevo array transformado y deja al array original inmutable.

Tenía ganas de tomar el curso desde que salió, pero por temas de tiempo no pude hasta unos días después del lanzamiento, a mi paracer ya le hacía falta un curso así a Platzi. Hasta ahora muy bien explicado todo. 💚

si lo hago así, sin generar un nuevo elemento tambien funciona y se simplifica el código

 const show=document.querySelector(".showArray");

        const arreglo=[
            {Name:'peter',
             age:23,
             adress:'Av 23 Fort laudardale'},
             {Name:'jhon',
             age:18,
             adress:'32 Road'},
             {Name:'Mary',
             age:20,
             adress:'5 av, Fl'}
        ]
           arreglo.map(person=>{
            show.innerHTML+=`
            <div>
             <li>${'mi nombre es '+person.Name}</li>
             <li>${person.age}</li>
             <li>${person.adress}</li>
           </div>    
           `
           })

asi lo hice en React:

import "./App.css";

function App() {
  const products = [
    { title: "Burger", price: 121 },
    { title: "Pizza", price: 202 },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>hola</h1>
        <ul>
          {products &&
            products.map((product) => (
              <li>
                {product.title} - {product.price}
              </li>
            ))}
        </ul>
      </header>
    </div>
  );
}

Y asi renderiza

Este video de otro profesor de platzi, esta buenisimo para explicar map de una forma mas grafica: https://www.youtube.com/watch?v=tP8JiVUiyDo

Puede que a alguien le sirva este código:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lista de productos</title>
  </head>
  <body>
    <div class="app">
      <h1>Lista de Productos</h1>
      <ul class="app__list"></ul>
    </div>
    <script>
      const products = [
        { id: 1, product: "Producto 1", price: 100, state: true },
        { id: 2, product: "Producto 2", price: 200, state: false},
        { id: 3, product: "Producto 3", price: 300, state: true},
        { id: 4, product: "Producto 4", price: 400, state: false},
        { id: 5, product: "Producto 5", price: 500, state: true}, 
      ];

      const listaUl = document.querySelector(".app__list");

      const element = products.map(({ id, product, price, state }) => {
        const item = `
          <li>
            <label>
              <input
                type="checkbox"              
                value=${id}
                name=${product}
                class=item${id}__checkbox
                ${state? 'checked' :''}
              />
              <span>Product: ${product}</span>
              <span>Precio: ${price}</span>
            </label>
          </li>
          `;
        return item;
      });

      listaUl.insertAdjacentHTML("beforeend", element.join(""));
    </script>
  </body>
</html>

Entrega esta respuesta:

MAP

• Crea un nuevo array con los resultados de la transformación del orginal
• Se obtiene el mismo numero de elementos del array original

const letra = ['a','b','c'];

const newLetra = letra.map(item => item + '--')

console.log('Original', letra);

console.log('New', newLetra);

MAP

// Tarea

const tienda = [
  {celular: 'iPhone', precio: '800$'},
  {celular: 'xiaomi', precio: '200$'}
];
const app = document.querySelector('#app');

const list = tienda.map(producto => {
  return `<li>${producto.celular} - ${producto.precio} </li>`
})

app.innerHTML = list.join('');

Ejercicio completo y renderizado

const d = document 
const products = [
    {title:'Burger',price:200},
    {title:'Pizza',price:320}
]

//RECORRER Y RENDERIZAR CON MAP
const $principal = d.getElementById('app')
const $desorderList = d.createElement('ul')
$principal.appendChild($desorderList)

const newList = products.map(e=>`<li>${e.title} costara: ${e.price}</li>`)
$desorderList.innerHTML=`${newList.join("")}`

Sobre cada elemento iterado lo transformara, en algo mas

/*Multiplicar los numeros x 2*/
//MAP
let numbers = [1,5,3,61,2,10,30,5,4]

let x2 = numbers.map((e)=>{
    return e*2
})

console.log(x2)


//CONSTRUYENDO MAP
// La variable global
const s = [23, 65, 98, 5];

Array.prototype.myMap = function(callback) {
  const newArray = [];
  // Cambia solo el código debajo de esta línea
		for(let i = 0; i < this.length; i++){
		let element = callback(this[i])
		  newArray.push(element)   
  }

  // Cambia solo el código encima de esta línea
  return newArray;
};

const new_s = s.myMap(function(item) {
  return item * 2;
});


console.log(new_s)

Aquí hay algo bastante importante que es como funciona por debajo la función map, funcionan con el Patrón de diseño Iterator , donde se utiliza un objecto el iterador como mecanismo para recorrer una colección de elementos o contenedor de forma secuencial para acceder a su contenido, nos permite iterar la colección sin tener que conocer la estructura del contenedor.
el iterador utiliza una interface
el iterador tiene dos métodos:

• hasNext()

• next()

let myArray = new IterableList[1,2,3,4,5];
let iterator =  myArray.iterator()

while(iterator.hasNext()){
	console.log(iterator.next())
}

😮 Map genial

// array 
const letters = ['a', 'b', 'c', 'd', 'e']

// MAP
const neeArray =  letters.map(item => item + '++')
 console.log('New arrat from map', newArray);

Muy bien explicado todo hasta ahora. Muy buen profe, vengo realizando varios cursos con él.