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. Los campos obligatorios están marcados con *