# Como usar o método JavaScript .map()

O método JavaScript `.map()` permite iterar sobre cada elemento de um array e realizar ações específicas, enquanto o array original permanece inalterado.

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

O método JavaScript `.map()` cria um novo array aplicando uma **função de callback** a cada elemento do array original. Ele transforma cada valor do array original, armazenando o resultado em um array separado. Um aspecto chave é a imutabilidade, o que significa que o array original permanece inalterado.

O método `.map()` é frequentemente usado para **transformar todos os elementos de um array**. Por exemplo, ele pode quadrar elementos, formatar textos, filtrar objetos ou realizar uma variedade de outras modificações. Assim, o JavaScript `.map()` é útil quando se deseja uma alteração não destrutiva dos dados, resultando em um código limpo e compreensível.

## Sintaxe do método JavaScript `.map()`

A sintaxe do método `.map()` consiste em uma chamada de função (Callback-Function) em um Array:

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

- **`originalArr`**: O array ao qual o método `.map()` é aplicado
- **`element`**: O elemento atual que está sendo processado durante a iteração
- **`index (opcional)`**: O índice do elemento atual no array
- **`array (opcional)`**: O array original

Vamos ver um exemplo concreto:

```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 callback, que é passada como argumento para o método JavaScript `.map()`, pega cada elemento do array original `number` e o eleva ao quadrado. Assim, obtemos um novo array composto pelos quadrados dos elementos do array original.

## Exemplos de aplicação do método JavaScript`.map()`

Com o método JavaScript `.map()`, é possível realizar uma ampla variedade de operações nos elementos de um array. Aqui estão alguns dos cenários mais comuns:

### Filtrar dados

Ao combinar `.map()` com o método `.filter()`, você poderá criar um array 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]
```

No exemplo acima, o array `numbers` contém os valores de 1 a 5. Em seguida, aplicamos o método `.filter()`. O critério de filtro determina que o número deve ser divisível por 2, o que se aplica aos números pares. O resultado é um novo array contendo apenas os elementos divisíveis por 2, ou seja, `[2, 4]`. Em seguida, utilizamos o método `.map()` no array para dobrar cada elemento. O resultado final é um array cujos elementos são o dobro dos valores filtrados, ou seja, `[4, 8]`.

### Renderizar listas em bibliotecas JavaScript

React é um dos [frameworks e bibliotecas JavaScript mais populares](https://www.ionos.com/digitalguide/websites/web-development/popular-javascript-frameworks-and-libraries/ "Os mais populares frameworks e bibliotecas JavaScript"). A função `.map()` é útil para renderizar listas em React. Note 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);
```

Como pode ser observado, importamos os módulos `React` e `ReactDOM` e criamos um array chamado `colors` com diferentes nomes de cores. O **componente funcional React** `ColorsList` utiliza o método JavaScript `.map()` para gerar um `<li>` para cada cor. O atributo `key` permite a atualização eficiente pelo React. Por fim, o componente `ColorsList` é renderizado no DOM com `ReactDOM.render`, e a saída é adicionada ao elemento DOM com o ID `root`.

### Formatar elementos no array

O método `.map` em JS é uma maneira simples de formatar elementos, como strings, conforme desejado.

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

No exemplo acima, combinamos `.map()` com o método `toLowerCase()` para converter cada nome para letras minúsculas. O resultado é o novo array `formattedNames`, que contém os nomes em minúsculas. O array original `names` permanece inalterado.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/javascript-map/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/javascript-map/) for AI/LLM consumption.