As they say, the less you know the better you sleep.
Eai galera, eu estava passando por aí e pensei em fazer um tutorialzinhio sobre o método Array.prototype.map() do JavaScript, é sempre bom relembrar o básico não é mesmo? Então vamos para mais um tópico gigantesco!
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Bom, vamos lá, a primeira questão é porque usar map?
Antigamente, quando as trevas reinavam sob a face do Javascript, para criar uma cópia de um Array, era preciso várias linhas de código, o que acabava fazendo com que ficasse um pouco difícil quando se tratava de correção de bugs, por exemplo, para iterar todos os elementos de um Array retornando um novo com o resultado, era necessário fazer uma algo macumba desse tipo:
MAS, em 2011, a luz brilhou novamente sob esse universo, nos abençoando com os métodos map(), filter() e reduce() (Futuramente, farei tutorial de todos e colocarei hiperlinks aqui) e "pelos poderes de grayskull", nós podemos fazer a mesma coisa bem mais rápido e fácil, dessa forma:
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Agora que já introduzi vocês, vamos entender como que funciona o método map
O método map() é invocado a partir de um array (como já sabemos) e recebe uma função de callback, uma função que é passada dentro de outra função e que no nosso caso será executada para cada valor de nosso Array, retornando assim um NOVO ARRAY com os resultados. No caso do map, ele possui 3 parâmetros em seu callback, que são esses aqui ó
Levando em consideração que:
- O parâmetro
valorAtualé obrigatório e representa o item da iteração atual. - O parâmetro
indiceé opcional e representa o índice do item da iteração atual. - O parâmetro
arraytambém é opcional e representa o próprio array ao qual os itens pertencem.
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Vamos para um exemplo:
Neste tópico só utilizaremos o primeiro parâmetro, criaremos um Array e então vamos multiplicar os valores deles por 7 (Porque não 7? eu gosto de 7) e para facilitar o entendimento iremos criar nossa função de callback antes.
Bom, agora é fácil, basta criar uma nova variável (ou constante) para armazenar os valores do map() e depois dar um
console.log() para ver o resultado
Obviamente se quisermos diminuir o código, podemos fazer simplesmente assim, utilizando Arrow Functions:
Arrow Functions basicamente nos permitem escrever funções de uma maneira mais curta, foram introduzidas no ES6 e funcionam basicamente assim:
Podemos ver ali, que no último caso
const hello = (arg) => `return `Hello ${arg}` nós não precisamos usar a palavra return, pois ela nos retorna o valor implicitamente, o XABLAU é colocar isso dentro do map()
Força guerreiro, estamos chegando ao final, só falta uma coisa para entendermos melhor, utilizar o nosso SHARINGAN e ver o que está acontecendo por trás dos panos, que é basicamente o seguinte: Para cada valor, o callback é executado armazenando o resultado na mesma posição de um novo Array
Podemos visualizar com nossos incríveis poderes de programador o que aconteceu por trás dos panos ^^
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Bom galera, por hoje é só, eu estava com vontade de postar algo e achei que isso fosse ser legal, espero que eu tenha ajudado alguém e até a próxima
Beijos a todos ♥
――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――
Última edição:
