Según la documentación de Mozilla:
El método map() crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.
Este método ejecuta una misma función para cada elemento del array en que se aplica, se va ir añadiendo un elemento a un nuevo array según el resultado de ejecutar dicha función con cada elemento como parámetro.
Por que el return sirve allí para reemplazar el "H3" por el "H4"
Veamos esta función
const cambio = (elemento) => {
if (elemento === 3) {
return 5;
} else {
return elemento;
}
};
Si el elemento que se usa como parámetro es 3, se cambiará por 5. Si no es el caso se conservará el mismo elemento. Con los condicionales se evalúa el elemento y dependiendo del elemento se retorna un valor u otro.
Podemos generar un nuevo array al que se aplique este cambio (de 3 a 5), de esta manera
elementos = [1,2,3,4,3,2,1,0,3];
const cambio = (elemento) => {
if (elemento === 3) {
return 5;
} else {
return elemento;
}
};
nuevos = [];
for (let i = 0;i < elementos.length;i++) {
nuevos.push(cambio(elementos[i]));
}
console.log(nuevos);
Esto es un poco largo, entonces podemos hacer uso de map()
. Como ya dije esta va aplicar la función que se use como parámetro sobre cada elemento y se va añadir el resultado de esta llamada al nuevo array que se genera.
elementos = [1,2,3,4,3,2,1,0,3];
const cambio = (elemento) => {
if (elemento === 3) {
return 5;
} else {
return elemento;
}
};
nuevos = elementos.map(cambio);
console.log(nuevos);
Esto es básicamente lo que pasa con el ejemplo que pones, si el elemento sobre el que es la iteración actual es "H3"
se va a añadir "H4"
al nuevo array generado, en otro caso se añade el mismo elemento (por eso es que se retorna el mismo elemento).
Con map()
se puede usar cualquier tipo de función, solo tiene que quedar claro que al nuevo array se va a añadir el valor retornado por la función que se use como parámetro.