Se você quer aprender React, Vue ou Angular, antes de estudar o framework, precisa saber alguns conceitos básicos do JavaScript. Então, se você está fazendo isso, parabéns! Tomou uma decisão sábia e muito importante. Esses frameworks, são todos baseados em conceitos e métodos do JavaScript, como map(), filter() e reduce(), que aprenderemos a utilizar aqui.
Map, Filter e Reduce são três dos principais métodos de array do JavaScript, veremos como cada um deles funciona, utilizando exemplos.
O método map() do JavaScript
Suponha que você tenha um array onde armazenou alguns números e gostaria de realizar uma multiplicação neles. Mas você também não quer alterar os valores do array original.
É aqui que map() entra em cena. Neste exemplo, vamos pegar os valores do array e multiplicá-los por 5, atribuindo o array de resultado a uma nova variável.
let array = [1, 2, 3, 4, 5]
const multiply = (index) => {
return index * 5
}
let result = array.map(multiply)
console.log(result)
// [5, 10, 15, 20, 25]
O que aconteceu aqui?
Temos o array com 5 elementos, uma arrow function chamada multiply que recebe index como argumento e retorna seu valor vezes 5. Chamamos o método map() no array, onde ele realizará o cálculo de cada valor. Em seguida, ele formará um novo array com os valores calculados na variável result.
Importante: Observe que foi enfatizado não alterar o array original. Porque é justamente isso que torna o método map() diferente do método forEach(), que modifica/altera o array original com o array calculado.
O método filter() do JavaScript
Você usa esse método para filtrar o array com as condições fornecidas, tendo o resultado também em um novo array.
Suponha que você tenha um array com vários números e gostaria de ter em um novo array os números que podem ser divididos por 3.
let array = [3, 6, 9, 12, 20]
const divider = (index) => {
return index % 3 == 0
}
let result = array.filter(divider)
console.log(result)
// [3, 6, 9, 12]
O que aconteceu aqui?
Temos o array com 5 elementos, uma arrow function chamada divider que recebe index como argumento para verificar se ele é divisível por 3 e retorna seu valor para o novo array caso o retorno seja true, criando assim um novo array com os números divisíveis.
O método reduce() do JavaScript
Digamos que você tenha um array e queira saber a soma de todos os valores desse array. Você poderia fazer isso utilizando um forEach(), mas o reduce() foi construído justamente para esse tipo de tarefa, reduzir o seu array a um único valor executando a função desejada.
let array = [10, 20, 30, 30, 40, 50]
function sum(accumulated, index) {
return accumulated + index
}
let result = array.reduce(sum)
console.log(result)
// 203
O que aconteceu aqui?
O conceito é igual ao do map() e do filter() – mas aqui é importante entender o que acontece nos bastidores deste método. O reduce está recebendo dois argumentos accumulated e index, onde accumulated vai armazenando o valor acumulado da soma e index é o valor do índice.
Na primeira execução, o valor de accumulated é 0 e index contém o primeiro elemento do array, que é 10. Aqui, o reduce pega o valor de index adiciona no accumulated e segue para fazer a mesma coisa com o próximo índice, ou seja, 0 + 10 = 10, 10 + 20 = 30, até chegar no último índice do array.
Conclusão
Bom, esses foram os 3 método que eu gostaria de explicar e espero que tenha ficado claro como eles funcionam.
