El método MAP en Javascript explicado con ejemplos

El método map crea un nuevo array a partir del ya existente, y a cada elemento de ese nuevo array le aplica una función especifica.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
El array original no se ve modificado.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
var numeros = [4,4,4,4,4]
var numeros2 = numeros.map(raiz)
function raiz(num){
  return Math.sqrt(num);
}
console.log(numeros2) // output: [2,2,2,2,2]
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Simplemente debemos escribir el array al cual queremos aplicarle el método map seguido de la notación punto y dentro de los parentesis la funcion que se ejecutará. En nuestro caso es la operación matemática de raíz cuadrada.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
La función que aplica map a cada uno de los elementos es un Callback (llamada de vuelta). Es decir que Javascript aplicará la función a cada elemento uno por uno, una vez que finalice con un elemento comenzará con el otro y así sucesivamente. La función no se aplicará a todos los elementos al mismo tiempo.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Ese call back recibe 3 valores:
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
  1. El elemento del array
  2. El indice del array
  3. Y el objeto que representa este array
¿A qué nos referimos con esto? Los «arrays» son objetos tipo lista, en los cuales podemos aplicar operaciones de recorrido y de mutación.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
¿Qué es un objeto? Es una colección de propiedades.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Cuando hablamos de mutación  nos referimos a un cambio o una modificación del mismo.
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
Ejemplo:

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

var personas = [
    { nombre«luis»apellido«fernandez» },
]
personas.map(union);
function union(item) {
    var nombreCompleto = [item.nombre, item.apellido].join(» «);
    return nombreCompleto;
}

⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

Tenemos el objeto «personas» el cual contiene un elemento con un nombre y apellido, lo que queremos lograr es unir esas cadenas (string) en un nuevo objeto. Así que le aplicamos a personas.map(union) siendo «union» la función que se va a ejecutar.

Esta función selecciona con «item» ambas propiedades y las une con la función «join» y retorna el nombre completo, el cual nos da como resultado: «luis fernandez» dentro de un nuevo array es decir un objeto sin modificar el anterior.

Dejar un comentario

Tu dirección de correo electrónico no será publicada.