Tutorial JavaScript: Transformación con map()

La función map() en JavaScript es un método que se utiliza principalmente en arrays para aplicar una función a cada uno de los elementos de dicho array y crear un nuevo array con los elementos resultantes. Esto resulta útil cuando es necesario, por ejemplo, modificar, transformar o extraer información específica de cada elemento de un array para generar una nuevo array.

Sintaxis

La sintaxis general de la función map() es la siguiente:

let nuevoArray = arrayOriginal.map(funcionCallback(elemento, indice, array));

Donde:

• nuevoArray: Es el array resultante con los elementos modificados por la función callback.
• arrayOriginal: Es el array sobre el cual se invoca la función map().
• funcionCallback: Es la función que se aplica a cada uno de los elementos del array original, y puede recibir opcionalmente los siguientes parámetros:
  • elemento: Es el elemento actual del array que se está procesando.
  • indice: (Opcional) Es el índice del elemento actual del array.
  • array: (Opcional) Es el array original sobre el cual se invoca la función map().

Ejemplos

Elevar al cuadrado todos los elementos de un array de números

En este ejemplo, se elevan al cuadrado todos los elementos de un array de números utilizando la función map():

let numeros = [1, 2, 3, 4];
let numerosCuadrado = numeros.map( (x) => {
  return x * x;
});
console.log(numerosCuadrado); // [1, 4, 9, 16]

Alternativamente, con una función flecha:

let numeros = [1, 2, 3, 4];
let numerosCuadrado = numeros.map(x => x * x);
console.log(numerosCuadrado); // [1, 4, 9, 16]

Extraer un subconjunto de propiedades de un array de objetos

Suponiendo que se tiene un array de objetos que representan usuarios con diferentes propiedades, y se desea extraer solamente su nombre y apellido en un nuevo array:

let usuarios = [
  { id: 1, nombre: "Juan", apellido: "Pérez", edad: 30 },
  { id: 2, nombre: "María", apellido: "García", edad: 25 },
  { id: 3, nombre: "Laura", apellido: "López", edad: 28 }
];

let nombresCompletos = usuarios.map( (usuario) => {
  return `${usuario.nombre} ${usuario.apellido}`;
});

console.log(nombresCompletos); // ["Juan Pérez", "María García", "Laura López"]

Convertir un array de strings en un array de objetos

Dado un array de strings que representan los nombres de productos, se desea generar un array de objetos donde cada objeto tenga una propiedad nombre con el valor del nombre del producto y una propiedad id con un valor único para cada producto.

let productosNombres = ["Manzana", "Banana", "Naranja"];

let productos = productosNombres.map( (nombre, indice) => {
  return { id: indice + 1, nombre: nombre };
});

console.log(productos); 
/*
[
  { id: 1, nombre: "Manzana" },
  { id: 2, nombre: "Banana" },
  { id: 3, nombre: "Naranja" }
]
*/

En resumen, la función map() en JavaScript es una herramienta muy útil para aplicar transformaciones o extraer información de los elementos de un array de manera rápida y sencilla. Su flexibilidad y facilidad de uso la convierten en una de las funciones más utilizadas al trabajar con arrays en JavaScript.