Método map() em JavaScript: Transformando um Array Inteiro

POV: Você transformou cada item do array com map() e virou um mago 🤯

Partindo de um array com cinco notas, criamos um segundo array chamado "resultado" usando map(). Para cada nota da lista original, aplicamos uma lógica: se o resto da divisão por 2 for igual a zero, a nota é classificada como par; caso contrário, como ímpar. O map() percorre cada item automaticamente, aplica essa validação e devolve, no novo array, o resultado dessa transformação para cada posição — nota por nota, na mesma ordem da lista original.

"O map faz o quê? Ele vai recriar pra gente uma nova variável. Então eu vou colocar aqui criar notas, uma matriz de notas. Vou colocar nessa matriz de notas alguns números. Eu vou agora pegar aqui resultado, vou declarar uma outra matriz, só que utilizando o map."

🗺️ O que é o método map() em JavaScript?

O método map() é uma das funções de alta ordem mais poderosas do JavaScript . Ele cria um novo array aplicando uma função a cada elemento do array original . Diferente de push, pop, unshift e shift, o map() não modifica o array original — ele retorna um novo array com os resultados da transformação .

// array.map(função_callback)
const novoArray = arrayOriginal.map(elemento => {
    // Transformação
    return elemento * 2;
});
        

📊 Exemplo prático: map() com notas

Vamos aplicar o map() em um array de notas para classificar cada uma como par ou ímpar .

// Array original
const notas = [1, 2, 3, 4, 5];

// Usando map() para classificar
const resultado = notas.map(nota => {
    if (nota % 2 === 0) {
        return "A nota " + nota + " é par!";
    } else {
        return "A nota " + nota + " é ímpar!";
    }
});

console.log(resultado);
// Saída: ["A nota 1 é ímpar!", "A nota 2 é par!", "A nota 3 é ímpar!", "A nota 4 é par!", "A nota 5 é ímpar!"]
        

🔄 Como o map() funciona internamente

O map() percorre cada elemento do array na ordem, aplica a função de callback e constrói um novo array com os resultados .

// Array original
const numeros = [1, 2, 3];

// O map() faz internamente algo como:
const novoArray = [];
for (let i = 0; i < numeros.length; i++) {
    // Aplica a função em cada elemento
    const resultado = numeros[i] * 2;
    novoArray.push(resultado);
}
// novoArray = [2, 4, 6]
        

⚖️ map() vs for — Qual usar?

const resultado = [];
for (let i = 0; i < numeros.length; i++) {
    resultado.push(numeros[i] * 2);
}
            

const resultado = numeros.map(n => n * 2);
            

📚 Exemplos práticos de map()

1. Dobrando valores

const numeros = [1, 2, 3, 4, 5];
const dobro = numeros.map(n => n * 2);
console.log(dobro); // [2, 4, 6, 8, 10]
        

2. Formatando nomes

const nomes = ["joão", "maria", "pedro"];
const nomesFormatados = nomes.map(nome => {
    return nome[0].toUpperCase() + nome.slice(1);
});
console.log(nomesFormatados); // ["João", "Maria", "Pedro"]
        

⏱️ Capítulos do vídeo

• 00:00 — Introdução: O que o método map() faz (recriação de variáveis)
• 00:06 — Prática: Criando a matriz de notas inicial
• 00:16 — Implementação: Declarando a nova matriz resultado usando .map()
• 00:30 — Lógica: Como o map() percorre cada item do array original
• 00:44 — Condicional: Aplicando lógica (Par ou Ímpar) dentro da função de callback
• 01:00 — O papel do return: Salvando a transformação no novo array
• 01:12 — Resultado: Analisando a transformação final no console
• 01:24 — Conclusão: Diferença entre apenas recriar e manipular dados
• 01:34 — Encerramento e convite para inscrição no canal

🎯 Conclusão

O método map() é uma ferramenta essencial para qualquer programador JavaScript . Ele permite transformar arrays de forma elegante e funcional, sem modificar o dado original .

Neste artigo, você aprendeu:

• ✅ O que o método map() faz em um array
• ✅ Como o map() cria um novo array sem alterar o original
• ✅ Como aplicar uma condição dentro do map() com if e else
• ✅ Como usar o resto da divisão (mod) para saber se um número é par
• ✅ Como o map() percorre cada item automaticamente
• ✅ Por que map() substitui um loop manual em muitas situações

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre o Método Map() em JavaScript

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo