Desmistificando o Map do Javascript

O objetivo desse pequeno artigo é desmistificar de vez a função map do javascript, porém antes precisamos pontuar algumas questões.

Para ter certeza que você conseguirá usar a função map, vamos entender primeiro o que é um callback.

Callback é uma função que é tipicamente passada como parâmetro de outra função para ser utilizada em algum momento no seu contexto.

Ex.:

// forma de uso 1
function callback() {
console.log("Evento realizado.")
}

window.addEventListener('click', callback)

// forma de uso 2 com função anônima
window.addEventListener('click', function() {
console.log("Evento realizado.")
})

// forma de uso 3 com função anônima e arrow functions
window.addEventListener('click', () => {
console.log("Evento realizado.")
})

Agora que já entendemos o que é um callback, podemos prosseguir para aprender sobre o map.

Resumo do Map

A função map do javascript é utilizada para percorrer cada item de um array, recebe uma função como callback ou apenas utiliza uma função anônima como no exemplo acima, que recebe o item como parâmetro para ser utilizado. O map retorna um novo array como as modificações da função de callback aplicadas.

Exemplo:

// No exemplos pegaremos todos os número do array e multiplicaremos por 2

var arr = [1, 2, 3, 4, 5]
var newArr = arr.map(item => item * 2)

console.log(newArr)
// newArr agora é [2, 4, 6, 8, 10]

Com o map, você pode tanto fazer modificações em arrays existentes, organizar informações, incluir listas de itens em elementos html e etc...

Para aprender mais utilizações do map, consulte a documentação aqui.

imagem: reprodução.