# JavaScript .map(): tudo sobre o método

O método `.map()` do JavaScript permite iterar através de cada elemento num array e executar ações específicas, mantendo o array original intacto.

## O que é JavaScript `.map()`?

O método `.map()` do JavaScript cria um novo array aplicando uma **função de retorno de chamada** a cada elemento do array original. Este método transforma cada valor do array original, guardando o resultado num array independente. Um aspeto fundamental é a imutabilidade, o que significa que o array original não é alterado de forma alguma durante o processo.

O método `.map()` é normalmente utilizado para **transformar todos os elementos de uma matriz**. Por exemplo, pode elevar ao quadrado os elementos, formatar textos, filtrar objetos e realizar muitas outras adaptações. Por isso, é útil quando se pretende realizar uma modificação não destrutiva dos dados. O método também contribui para um código claro e fácil de compreender.

## A sintaxe do JavaScript `.map()`

A sintaxe do método .map() é composta por uma chamada de função (callback function) em uma matriz:

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

- **`originalArr`** é a matriz na qual o método `.map()` será aplicado;
- **`element`** é o elemento atual que é processado durante a iteração;
- **`index (optional)`** é o índice do elemento atual na matriz e
- **`array (optional)`** é a matriz original.

Veja o seguinte exemplo:

```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]
```

A função de retorno de chamada passada como argumento para JavaScript `.map()` pega cada elemento da matriz original `number` e eleva-o ao quadrado. Em seguida, obtém-se uma nova matriz, que consiste nos quadrados dos elementos da matriz original.

## Exemplos de `.map()`

Com o método `.map()`JavaScript, é possível realizar muitas operações nos elementos de uma matriz. A seguir, descrevemos os cenários mais comuns:

### Filtrar dados

Ao combinar `.map()` com o método `.filter()`, cria-se uma matriz que contém apenas os valores para os quais a condição dada é verdadeira.

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

Neste exemplo, é criado um array `numbers` que contém valores de 1 a 5. Em seguida, é aplicado o método `.filter()`. O critério de filtragem determina que o número módulo 2 deve ser igual a 0, o que é verdadeiro para os números pares. O resultado é uma nova matriz que contém apenas os elementos divisíveis por 2. O resultado intermédio é, portanto, `[2, 4]`. Em seguida, usamos o método `.map()` na matriz para duplicar cada elemento. O resultado final é uma matriz cujos elementos podem ser divididos duas vezes por 2, ou seja, `[4, 8]`.

### Renderizar listas em bibliotecas JavaScript

React é uma das bibliotecas e frameworks JavaScript mais populares. A função `.map()` é útil para representar listas no React, mas lembre-se de que o React usa a **sintaxe 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);
```

No exemplo anterior, os módulos `React` e `ReactDOM` são importados e é definido um array chamado `colors`, que contém diferentes nomes de cores. A **função do componente funcional do React**, `ColorsList`, usa o método JavaScript `map`() para gerar um elemento `<li>` para cada cor. O atributo `key` permite que o React faça atualizações eficientes no DOM sem precisar renderizar toda a lista novamente. Por último, o componente `ColorsList` é renderizado no DOM com `ReactDOM.render` e o resultado é adicionado ao elemento do DOM com o ID `root`.

### Formatar elementos numa matriz

O método `.map()` é uma forma simples de formatar elementos como cadeias de texto de acordo com necessidades específicas.

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

Neste caso, combina-se `.map()` com o método `toLowerCase()` para converter cada nome em minúsculas. O resultado é o novo array `formattedNames`, que contém os nomes em minúsculas. No array original `names` não ocorre nenhuma alteração.


This is a markdown version of: [https://www.ionos.com/pt-pt/digitalguide/paginas-web/desenvolvimento-web/mapa-javascript/](https://www.ionos.com/pt-pt/digitalguide/paginas-web/desenvolvimento-web/mapa-javascript/) for AI/LLM consumption.