Guía del método map() de JavaScript

En esta guía, aprenda a usar el método map() en JavaScript: conéctelo con filter() y reverse(), mapee condicionalmente, aprenda los parámetros opcionales, cómo funciona, todo a través de casos de uso práctico y ejemplos.

Introducción

La iteración a través de secuencias se puede usar para acceder y mostrar elementos de la secuencia, pero la mayoría de las veces, se hace para ejecutar una operación en cada uno o algunos de los elementos.

{.icon aria-hidden=“true”}

Nota: Aplicar una función a cada elemento de una secuencia y devolver el resultado transformado a una nueva secuencia se conoce como mapeo, donde cada elemento de la secuencia original, Ex, se asigna a un elemento potencialmente transformado de la nueva secuencia, Exi.

Como la mayoría de los lenguajes, JavaScript tiene una implementación eficiente de la operación de mapa, y está integrado en la clase Array.

En esta guía, aprenderá cómo trabajar con el método map() de JavaScript y cómo funciona, en ejemplos prácticos de código.

Método map() de JavaScript

Repasemos la sintaxis for-loop y veamos cómo podemos aplicar ciertos métodos a cada elemento. Supongamos que tenemos un conjunto de puntajes y deseamos agregar 5 puntos a cada uno para ayudar a aumentar los puntajes:

1
2
3
4
5
6
7
8
const mathScores = [39, 50, 45, 41, 50]; 
let newScores = [];
  
for (let i = 0; i < mathScores.length; i++) {
    newScores.push(mathScores[i] + 5);
}

console.log(newScores); // [44,55,50,46,55]

En el código anterior, recorrimos la matriz mathScores, agregando 5 a cada miembro, y luego empujamos las nuevas puntuaciones a la matriz newScores.

¡Este es un procedimiento bastante estándar, y bastante similar a lo que hace map()!

El método Array.map() itera a través de una matriz y aplica una función de devolución de llamada en cada elemento, devolviendo los elementos resultantes en una nueva matriz.

Sintaxis

La sintaxis del método es bastante sencilla:

1
2
3
const newArray = oldArray.map((currentValue, index, array)=>{
    // Do stuff with currentValue
})

El índice y la matriz son opcionales y se pueden usar para acceder al índice del valor actual y la propia matriz original.

  • newArray - La nueva matriz que se devuelve después de aplicar la función map().
  • oldArray - La función map() opera en la matriz original y no la altera.
  • currentValue - El valor que la función map() está procesando en el paso X, donde la función define lo que sucede en el paso X.
  • index - El índice del valor actual.
  • matriz - Un parámetro opcional que apunta a la matriz original.

Para una experiencia visual intuitiva, puede intentar registrar estos valores y simplemente devolver el original sin ningún cambio:

1
2
3
4
5
6
7
8
const mathScores = [39, 50, 45, 41, 50];
  
mathScores.map((currentValue, index, array) => {
    console.log('Current value:' + currentValue);
    console.log('Index:' + index);
    console.log('Array:' + array);
    return currentValue;
})
1
2
3
4
5
6
7
"Current value:39"
"Index:0"
"Array:39,50,45,41,50"
...
"Current value:50"
"Index:4"
"Array:39,50,45,41,50"

¿Cómo funciona mapa()? {#cómo funciona el mapa}

La función map(), para todos los propósitos prácticos, necesita elementos para trabajar, pero si la matriz a la que está llamando map() está vacía, simplemente devolverá una matriz vacía. Se puede usar con funciones de flecha o funciones regulares:

Antes de ES6, normalmente definiría una devolución de llamada como:

1
2
3
4
5
6
const codes = [101, 201, 301, 303, 202];
let mathCodes = codes.map(function(code) {
    return `mth${code}`;
});
  
console.log(mathCodes); //["mth101","mth201","mth301","mth303","mth202"]

Sin embargo, con ES6, puede usar una función de flecha para hacer que el código sea más limpio:

1
2
3
4
5
6
const codes = [101, 201, 301, 303, 202]; 
let mathCodes = codes.map((code)=>{
    return `mth${code}`;
});
  
console.log(mathCodes); //["mth101","mth201","mth301","mth303","mth202"]

map() Ejemplos

¡Veamos un par de ejemplos de la función map()! Por ejemplo, calculemos la raíz cuadrada de cada número en la lista:

1
2
3
4
5
6
7
const numbers = [9, 36, 64, 144];
  
let squareRoots = numbers.map((number) => {
    return Math.sqrt(number);
});
  
console.log(squareRoots); // [3,6,8,12]

O bien, podríamos asignar cada elemento a su longitud:

1
2
3
const names = ["Bilbo", "Gandalf", "Nazgul"];
let lengths = names.map((name) => name.length);
console.log(lengths); // [5,7,6]

O bien, podríamos asignar cada objeto de estudiante a su nombre y apellido:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const students = [
    {firstName : "John", lastName: "Doe"},
    {firstName : "Stephen", lastName: "Matt"},
    {firstName : "Abigail", lastName: "Susu"}
];
  
let studentsNames = students.map(student => {
      return `${student.firstName} ${student.lastName}`;
})
  
console.log(studentsNames); // ["John Doe","Stephen Matt","Abigail Susu"]

Uno de los casos de uso más comunes para la función map() en el front-end es envolver datos en HTML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
let cont = document.getElementById('#container');
  
let users = [
    { firstName : "John", lastName: "Doe", age: 17 },
    { firstName : "Stephen", lastName: "Matt", age: 16 },
    { firstName : "Abigail", lastName: "Susu", age: 15 }
];
  
let singleUser = users.map((user)=>{
    // Let's add the firstname and lastname together
    let fullName = user.firstName + ' ' + user.lastName;
    return `
      <h3 class='name'>${fullName}</h3>
      <p class="age">${user.age}</p>
    `
});
  
container.innerHTML = singleUser;

map() ¿Vs otros métodos iteradores?

map() es un ejemplo de un método iterador en JavaScript, y es muy útil para comprender cuándo desea utilizar qué método iterador. Los métodos de iterador le permiten recorrer todos los objetos en una matriz para realizar operaciones específicas.

Al determinar si utilizar la función map(), es una buena idea considerar si es preferible otra técnica de iterador.

Estos son algunos de los métodos iteradores adicionales disponibles en JavaScript:

  • reduce(): Las operaciones de reducción son una de las operaciones más poderosas en la programación funcional, y generalmente implican reducir un vector a un escalar (una lista de valores, a uno solo). Esto puede ser sumar todos los valores en una matriz, encontrar el promedio, el mínimo o el máximo, o de cualquier otra manera reducir un conjunto de datos más largo a uno más pequeño, derivado del original.
  • filtro(): el filtrado le permite filtrar los elementos de una lista que no se ajustan a algunos criterios específicos y devolver una matriz de los elementos restantes que sí lo hacen.
  • forEach(): Similar a for...loop, forEach() ejecuta una función en cada elemento de una lista. Le permite recorrer una matriz y realizar un trabajo en cada elemento.

Hasta cierto punto, esto plantea la pregunta:

¿Cuál es la diferencia entre map() y forEach()?

map() frente a forEach()

Debido a que ambos métodos se ejecutan a través de una matriz y se utilizan para aplicar una función a cada miembro, los métodos map() y forEach() pueden parecer extremadamente similares.

La principal distinción entre estos dos métodos es que la función map() devuelve una nueva matriz, mientras que el método forEach() no lo hace - altera la matriz original.

Además, en cada iteración de la función map(), devolverá un elemento transformado. Con forEach(), no los devuelve, pero puede ejecutar funciones en esos elementos de cambio en el lugar. Sin embargo, ¡ni siquiera tiene que ejecutar una función en el elemento!

Esto hace que forEach() sea preferible cuando se trata de, por ejemplo, registrar valores, sin cambiarlos:

1
2
3
4
5
const characters = ['z', 'y', 'x', 'w'];
  
characters.forEach(character => {
    console.log(character);
});

Mientras que, si tu objetivo es cambiar elementos, se prefiere map().

Usar map() con otros métodos de matriz

El método map() proviene de la programación funcional, y con la programación funcional, los métodos de encadenamiento son tan naturales como respirar. El encadenamiento de operaciones funcionales es extremadamente común y puede proporcionar canalizaciones de operaciones muy complejas.

Echemos un vistazo a cómo puede encadenar map() con otros métodos funcionales de la clase Array.

Usar mapa() con filtro()

El filtrado suele ser la primera operación en una canalización, ya que es ineficaz ejecutar operaciones en elementos que podrían no estar incluidos en el resultado, a menos que los criterios por los que se filtra dependan de alguna otra operación en la canalización.

Una secuencia común de pasos es ‘filtrar()’ una matriz en función de ciertos criterios, y luego ‘mapear()’ los elementos restantes.

Vamos a crear una matriz de estudiantes para filtrar y mapear:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
const mathStudents = [
    {
      name: 'Jane',
      score: 60,
      enrollmentYear: 2019
    },
    {
      name: 'Emmy',
      score: 40,
      enrollmentYear: 2020
    },
    {
      name: 'John',
      score: 43,
      enrollmentYear: 2019
    },
    {
      name: 'Linda',
      score: 20,
      enrollmentYear: 2019
    }
]

Ahora, filtremos a los estudiantes en función de su año, y obtengamos solo la generación anterior, y luego mapeemos sus puntajes,

Asignaremos los puntajes a una calificación de "aprobado"/"no aprobado" para un formato más comprensible para los humanos:

1
2
3
4
5
6
7
8
9
const passingStudents = mathStudents
    .filter((student) => student.enrollmentYear < 2020)
    .map((student) => {
      if (student.score > 40) {
        return student.name + ': passing'
      } else return student.name + ': not passing'
    });

console.log(passingStudents); // ["Jane: passing","John: passing","Linda: not passing"]

Usando map() con reverse()

Puede haber momentos en los que necesite invertir una matriz antes o después de ejecutar otras operaciones. Esto se puede lograr fácilmente usando la función reverse():

1
2
3
4
5
const numbers = [21, 32, 43, 54, 65];
const newNumbers = numbers.map((number) => number * 2).reverse();
  
console.log(numbers); // [21,32,43,54,65]
console.log(newNumbers); // [130,108,86,64,42]

Hemos insertado la función reverse() al final del ciclo para que invierta la matriz resultante. Si tuviéramos que colocar la llamada reverse() antes de la llamada map(), en realidad invertiríamos la matriz original y el mapa de sus elementos, en lugar de invertir la nueva matriz resultante:

1
2
3
4
5
const numbers = [21, 32, 43, 54, 65];
const newNumbers = numbers.reverse().map((number) => number * 2);
  
console.log(numbers); // [65,54,43,32,21]
console.log(newNumbers); // [130,108,86,64,42]

Uso de map() en un objeto

La función map() también se puede usar en objetos después de obtener los valores, las claves o el par clave-valor utilizando los métodos estáticos de objetos (Object.keys(), Object.values() y Object .entradas()). Debido a que cada uno de estos métodos estáticos de objetos produce una matriz, map() puede simplemente encadenarse a cada uno:

1
2
3
4
const scores = { math: 50, English: 70, Physics: 45, Agric: 60 };  
let newScores = Object.values(scores).map((score) => score + 5);
  
console.log(newScores); // [55,75,50,65]

Conclusión

En esta guía, hemos echado un vistazo al método map() en JavaScript.

El método itera a través de una matriz, aplica una función a cada elemento de la matriz y devuelve la nueva secuencia de elementos como una nueva matriz. Hemos echado un vistazo a la sintaxis, los parámetros y el uso del método a través de ejemplos prácticos.

Además, hemos comparado el método map() con el método forEach() y exploramos cómo podemos encadenar map() con filter(), reverse() y objetos. bjetos.