{"componentChunkName":"component---src-templates-blog-post-js","path":"/map-filter-e-reduce/","result":{"data":{"markdownRemark":{"id":"d6055a7f-90bc-54f7-a9de-83d3a5f6efdf","fields":{"slug":"/map-filter-e-reduce/"},"frontmatter":{"title":"Map, Filter e Reduce","description":"Vamos ver um pouco sobre Array Functions?!","date":"03 de Jul de 2020","thumbnail":"/assets/img/javascript.png"},"html":"

Map, filter e reduce são métodos do JavaScript para manipular arrays. Esses três métodos são os mais importantes para se manipular valores do seu array.

\n

Sem muitas delongas vamos ver como usar esses métodos e entender como eles funcionam !!!

\n

.map()

\n

A função map serve para \"varrer\" o nosso array modificar alguns valores e devolver um novo array de elementos. A função que manipula esses valores é uma callback, que nós mesmos criamos. Essa função callback precisa modificar e retornar esse valor modificado.

\n

array.map(function(elemento, indice, array){})

\n

Nossa função callback recebe três parâmetros:

\n
    \n
  1. Elemento - O Elemento atual do array
    2. \n
  2. Indice - O indice do elemento atual
    3. \n
  3. Array - O Array que chamou a função map
    4. \n
\n

É interessante lembrar que o map retorna um novo array, com a mesma quantidade de elementos que o array original.
\nQuando usamos o map ?! Um exemplo simples é quando precisamos multiplicar o valor dos elementos do nosso array por 2, por exemplo.

\n
const numeros = [1, 4, 5, 7, 3];\n\n//Vamos multiplicar todos nossos números por 2\nconst multiplicar = function(numero){\n  return numero * 2;\n}\n\nconst novosNumeros = numeros.map(multiplicar);\nconsole.log(novosNumeros)\n// [2, 8, 10, 14, 6]
\n

Simples né ?!

\n

Agora vamos usar o map em um caso um pouco mais complexo, vamos pegar nosso array de produtos e somar o valor de cada item ...

\n
const produtos = [\n  { nome: \"caneta\", qtd: 2, preco: 1.50 },\n  { nome: \"caderno\", qtd: 0, preco: 10.00 },\n  { nome: \"borracha\", qtd: 5, preco: 0.50 },\n]\n\nconst soma = function(produto){\n  const total = produto.qtd * produto.preco;\n  return { ...produto, total }\n}\n\nconst totais = produtos.map(soma)\nconsole.log(totais)\n/* \n [\n  { nome: \"caneta\", qtd: 2, preco: 1.50, total: 3 },\n  { nome: \"caderno\", qtd: 0, preco: 10.00, total: 0 },\n  { nome: \"borracha\", qtd: 5, preco: 0.50, total: 2.5 },\n]\n*/
\n

.filter()

\n

A função filter, como o próprio nome já diz, serve para filtrar nosso array. Ele retorna um novo array a partir de uma função callback que fará um teste em cada um dos elementos do array, para saber se o elemento fará ou não parte do novo array.

\n

Essa função callback deve retornar um booleano. Caso retorne true, o elemento fará parte do nosso array, caso retorne false, ele não entrará em nosso novo array.

\n

array.filter(function(elemento, indice, array){})

\n

Nossa função callback recebe três parâmetros:

\n
    \n
  1. Elemento - O Elemento atual do array
    2. \n
  2. Indice - O indice do elemento atual\\
    3. \n
  3. Array - O Array que chamou a função map
    4. \n
\n

Vamos filtrar nossa lista de alunos, e pegar apenas quem tirou nota maior ou igual a 6.

\n
const alunos = [\n  { nome: \"Raul\", nota: 5.99 },\n  { nome: \"Ana\", nota: 7.5 },\n  { nome: \"Cleber\", nota: 1 },\n  { nome: \"Joana\", nota: 10 } \n]\n\nconst maiorIgualA6 = function(aluno){\n  return aluno.nota >= 6;\n}\n\nconst passaram = alunos.filter(maiorIgualA6);\nconsole.log(pegaAlunos)\n/*\n  [\n    { nome: \"Ana\", nota: 7.5 },\n    { nome: \"Joana\", nota: 10 }\n  ]\n*/
\n

.reduce()

\n

A função reduce funciona de forma diferente você pode modificar os valores do seu array ou agrega-los (somar, dividir etc...).

\n

O grande diferencial é que o reduce pode retornar qualquer coisa(numero, string, array etc...).

\n\n

Vamos entender melhor como esse cara funciona.

\n

Assim como o map e filter, o reduce consegue manipular o valor de cada elemento do array. Mas o diferencial dele é que ele conta com um acumulador (o valor de todas as iterações até o momento).

\n

Vamos ver melhor como é montado o reduce:

\n

array.reduce(callback, valorInicial);

\n

Calback - Função que será executada em cada elemento do array, ela recebe quatro parâmetros:

\n
    \n
  1. acumulador - É o valor acumulado de cada iteração.
    2. \n
  2. valorAtual - O elemento atual do array
    3. \n
  3. indice - O indice do elemento atual do array
    4. \n
  4. array - Array do qual a função reduce foi chamada
    5. \n
\n

ValorInicial - Um valor a ser usado como o primeiro argumento para a primeira chamada do callback. É opcional definir um valor inicial ou não! Caso você não passe nada, o valor inicial do seu acumulador é o primeiro elemento do array.

\n

Você pode encontrar mais detalhes seguindo a documentação oficial.

\n

Vamos tentar entender isso tudo na prática !

\n

Como primeiro exemplo vamos multiplicar os valores de nosso array.

\n
const numeros = [1, 4, 5, 6, 8];\n\nconst multiplicador = function(acumulador, elementoAtual){\n  return acumulador * elementoAtual;\n}\n\nconst resultado = numeros.reduce(multiplicador)\nconsole.log(resultado)\n// 960
\n

Como vimos acima, nesse exemplo nossa função retornou um número.

\n

Vamos ver como foram cada uma das execuções:

\n\n

O resultado final é de 960 !

\n

Vamos a um exemplo usando objetos, o objetivo vai ser calcular a média do valor total de todos os itens

\n
const itens = [\n    { nome: \"camisa\", valor: 32 },\n    { nome: \"calça\", valor: 23 },\n    { nome: \"chinelo\", valor: 16 },\n    { nome: \"tenis\", valor: 7 },\n    { nome: \"bone\", valor: 4 },\n    { nome: \"bala\", valor: 3 },\n];\n\nconst calculatMediaTotal = function(acumulador, elementoAtual, indice, array){\n    if(indice  === array.length - 1) {\n        return acumulador / array.length;\n    } else {\n        return acumulador + elementoAtual.valor;\n    }\n}\n\nconst mediaTotal = itens.reduce(calculatMediaTotal, 0);\nconsole.log(mediaTotal)\n//13.666666666666666
\n

Vamos entender o que está acontecendo ...

\n

Eu passei um inicializador com o valor 0, pois como estamos lidando com um objeto, e no return da função estamos retornando apenas um valor numérico não conseguimos acessar acumulador.valor da segunda execução pra frente, o que causaria um erro em nossa aplicação.

\n

A propriedade array é o array que chamou a função reduce. O indice é o indice do elemento do nosso array.

\n\n

Após isso dividimos o valor do nosso acumulador pela quantidade de elementos em nosso array(array.length).

\n

Quanto masi praticar o uso do reduce, mais conseguimos entender melhor o funcionamento e quando utilizar o mesmo. Ele, dentre os outros é o mais complicadinho de se usar !!!!

\n

Vamos combinar os tres juntos ?!

\n

Podemos usar os três métodos em conjunto, para ter alguns resultados legais.

\n
const carrinho = [\n    { nome: 'caneta', qtde: 10, preco: 7.99 },\n    { nome: 'impressora', qtde: 0, preco: 649.50 },\n    { nome: 'caderno', qtde: 4, preco: 27.10 },\n    { nome: 'lapis', qtde: 3, preco: 5.82 },\n    { nome: 'tesoura', qtde: 1, preco: 19.20 }\n]\n\nconst qtdMaiorQueZero = elemento => elemento.qtde > 0;\nconst somaTotalCadaItem = elemento => ({ ...elemento, total: elemento.qtde * elemento.preco});\nconst precoTotal = (acumulador, elementoAtual) => acumulador + elementoAtual.total;\n\nconst total = carrinho\n    .filter(qtdMaiorQueZero)\n    .map(somaTotalCadaItem)\n    .reduce(precoTotal, 0)\n\n\nconsole.log(total)\n//224.96
\n

Aqui eu usei as arrow functions, para conseguir deixar o código mais enxuto.

\n

Vamos entender o que está acontecendo :

\n
    \n
  1. Filtramos nosso carrinho, pegando apenas os itens com quantidade maior que 0.
    2. \n
  2. Andamos por cada item do nosso array, retornamos o item com uma propriedade total, que contem o valor total desse item (quantidade * preço)
    3. \n
  3. Somamos o valor total de todos os itens e temos como resultado, o valor do nosso carrinho de 224.96
    4. \n
\n

Bom é isso galera, espero que o post de hoje consiga ajudar a entender melhor essas três funções importantes do JS. Deixe seu feedback construtivo 🤘🏽🤘🏽🤘🏽

\n

Nos vemos na próxima !!!

\n","timeToRead":6}},"pageContext":{"slug":"/map-filter-e-reduce/","previousPage":{"frontmatter":{"title":"O ciclo de vida dos componentes do React com os Hooks"},"fields":{"slug":"/o-ciclo-de-vida-dos-componentes-do-react-com-os-hooks/"}},"nextPage":null}}}