# JavaScript .map(): todo sobre el método

El método `.map()` de JavaScript permite iterar a través de cada elemento en un array y ejecutar acciones específicas manteniendo el array original intacto.

## ¿Qué es JavaScript `.map()`?

El método `.map()` de JavaScript crea un nuevo array aplicando una **función de devolución de llamada** a cada elemento del array original. Este método transforma cada valor del array original guardando el resultado en un array independiente. Un aspecto clave es la inmutabilidad, lo que supone que el array original no se modifica de ningún modo durante el proceso.

El método `.map()` suele utilizarse para **transformar todos los elementos de un array**. Por ejemplo, puede elevar al cuadrado los elementos, formatear textos, filtrar objetos y realizar muchas otras adaptaciones. Por ello, resulta útil cuando se quiere realizar una modificación no destructiva de los datos. El método contribuye también a un código claro y fácil de entender.

## La sintaxis de JavaScript `.map()`

La sintaxis del método .map() está compuesta por una llamada de función (callback function) en un array:

```javascript
const newArr = originalArr.map(function(element, index, array) {
    // Code
});
```

- **`originalArr`** es el array en el que se va a aplicar el método `.map()`;
- **`element`** es el elemento actual que se procesa durante la iteración;
- **`index (optional)`** es el índice del elemento actual en el array y
- **`array (optional)`** es el array original.

Fíjate en el siguiente ejemplo:

```javascript
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
    return number * number;
});
console.log(squaredNumbers); // Output: [1, 4, 9, 16, 25]
```

La función de devolución de llamada que se pasa como argumento a JavaScript `.map()` toma cada elemento del array original `number` y lo eleva al cuadrado. Después, se obtiene un nuevo array, el cual consiste en los cuadrados de los elementos del array original.

## Ejemplos de `.map()`

Con el método `.map()`de JavaScript se pueden realizar muchas operaciones en los elementos de un array. A continuación, te describimos los escenarios más habituales:

### Filtrar datos

Al combinar `.map()` con el método `.filter()`, se crea un array que solo contiene los valores para los que la condición dada es verdadera.

```javascript
const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0).map(num => num * 2);
// Output: [4, 8]
```

En este ejemplo se crea un array `numbers` que contiene valores del 1 al 5. Después, se aplica el método `.filter()`. El criterio de filtrado determina que el número módulo 2 debe ser igual a 0, lo que es cierto para los números pares. El resultado es un nuevo array que contiene sólo los elementos divisibles por 2. El resultado intermedio es, por tanto, `[2, 4]`. A continuación utilizamos el método `.map()` sobre el array para duplicar cada elemento. El resultado final es un array cuyos elementos pueden dividirse dos veces por 2, es decir, `[4, 8]`.

### Renderizar listas en librerías de JavaScript

React es una de las [librerías y de los frameworks JavaScript más populares](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/frameworks-javascript-y-librerias-populares/). La función `.map()` resulta útil para representar listas en React, pero recuerda que React utiliza la **sintaxis JSX**.

```javascript
import React from "react";
import ReactDOM from "react-dom";
const colors = ["red", "green", "blue", "yellow", "orange"];
const ColorsList = () => (
    <div>
        <ul>{colors.map(color => <li key={color}> {color} </li>)}</ul>
    </div>
);
const rootElement = document.getElementById("root");
ReactDOM.render(<ColorsList />, rootElement);
```

En el anterior ejemplo se importan los módulos `React` y `ReactDOM` y se define un array llamado `colors`, el cual contiene diferentes nombres de colores. La **función de componente funcional de React**, `ColorsList`, utiliza el método JavaScript `map`() para generar un elemento `<li>` para cada color. El atributo `key` permite que React pueda realizar actualizaciones eficientes en el DOM sin tener que volver a renderizar toda la lista. Por último, la componente `ColorsList` se renderiza en el DOM con `ReactDOM.render` y el resultado se añade al elemento del DOM con el ID `root`.

### Formatear elementos en un array

El método `.map()` es una forma sencilla de formatear elementos como cadenas de texto según necesidades específicas.

```javascript
const names = ["Alice", "Bob", "Charlie"];
const formattedNames = names.map(name => name.toLowerCase());
// Output: ["alice", "bob", "charlie"]
```

En este caso se combina `.map()` con el método `toLowerCase()` para convertir cada nombre en minúsculas. El resultado es el nuevo array `formattedNames`, que contiene los nombres en minúsculas. En el array original `names` no se produce ningún cambio.


This is a markdown version of: [https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/javascript-map/](https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/javascript-map/) for AI/LLM consumption.