Jornada Frontend

O Javascript está em grande crescimento e cada dia que se passa temos métodos auxiliares que nos ajudam todos os dias.

Antes dos novos métodos serem integrados oficialmente, eles eram implementados por bibliotecas externas.

Em 2015 no ECMAScript 6 foi introduzido alguns métodos auxiliares, como:

  • forEach();
  • map();
  • filter();
  • find();
  • every();
  • some();
  • reduce();

Nossa Dener em 2011 foram introduzidos, faz tempo né?
Exato, porém apenas em 2015 que foi realmente implementados forEach(), map(), filter(), find(), every(), some() e reduce() com JavaScript.

Esses novos métodos foram inseridos para deixar nosso código mais legíveis, performaticos, reduzindo a complexibilidade retirando os efeitos colaterais das formas que o código eram feitos antes.

Como é usado o loop no Javascript

Tarefas repetitivas na vida de um desenvolvedor é percorrer registros em uma lista.

E nessas horas de muitas repeti√ß√Ķes podem surgir muitos problemas dependendo o tamanho do c√≥digo.

O Loop oferece um jeito fácil e rápido de executar uma ação repetidas vezes. Porém cuidado de como vai utiliza-lo, pois pode trazer uma complexibilidade bem ruim para o código.

Em muitos projetos me deparo com o loop for,  não é errado usar-lo, porém os outros métodos são mais legíveis no momento.

 

Esse código mostra todas as frutas sendo iteradas no console.log(), no meu ponto de vista não é uma forma amigável de se entender perto dos novos métodos que temos hoje.

Usando o forEach deixo o código mais legível, veja a baixo:

 

 

ForEach Javascript

Já que dei o primeiro exemplo com forEach vamos falar um pouco mais dele, será o primeiro método que veremos agora.

Ele  muito bom para iterar elementos de um Array.

Imagine que estamos em um restaurante e chegou 5 pedidos do aplicativo.

Precisa ser apresentando na tela do Chefe para efetuar o preparo dos pedido.

 

 

No exemplo a cima vimos que o let recebeu um Array de pedidos.

Depois foi iterado pelo forEach, dentro dele desestruturamos o valor (“pedido”) ( { nome, alimento, bebida } ) e logo em seguida mostramos os pedidos no console com o posicionamento de cada Array utilizando o index.

O forEach ser√° nosso melhor amigo para iterar Array, mas tome muito cuidado ao utilizar-lo.

Se você der push com mais elementos para o exemplo iterado ( pedidos ), esse valor será ignorado nesse mesmo forEach.

Ent√£o antes de iterar o mesmo determine os valores para ser valido no callback.

Map Javascript

O método Map além de iterar todo o Array ele é muito bom para editar o iterado ( resumindo o Array ).

Imagine que precisamos verificar um valor do Array. Usaremos o mesmo exemplo do restaurante.

Precisamos verificar se temos coxinha em nosso estoque, se não tiver ele envia para o Chefe da cozinha avisando que estão escolhendo o pedido e já podem preparar a bebida escolhida.

 

Como vimos o iterador Map do Javascript, executa a ação e logo no callback já retorna a resposta modificada.

Filter Javascript

Agora vamos falar sobre o que tem o nome mais óbvio, nosso famoso Filter.

Como o nome já diz, esse método deve ser utilizado quando temos a necessidade de filtrar nossa lista.

Imagine que precisamos filtrar todos os pedidos que contém apenas Refrigerante nas bebidas, para agilizar os pedidos.

 

Perceba que fizemos diferente dos outros exemplos, salvamos o filtro de array em outra let.

Essa let, ficou mais leve pois só tem pessoas que pediram refrigerante.

Conseguimos abstrair os dados e utiliza-los em outras atribui√ß√Ķes.

Find Javascript

Nome bem subjetivo também, mas ele procura e te retorna 1 o primeiro valor encontrado da array.

√Č bem parecido com o Filter, por√©m o Find eu utilizo muito quando temos a propriedade id em nosso Array.

 

Ele vai te retornar apenas 1 registro, ent√£o cuidado, se tivermos 2 itens iguais, ele vai retornar apenas o primeiro que encontrar.

Every Javascript

Esse método tem que pensar bem antes de sair usando, pois ele não cria uma nova Array e sim retorna um valor Booleano.

√Č bacana entender que, se voc√™ tem uma condi√ß√£o, ela vai tratar toda sua Array, assim podemos verificar se eles est√£o ok, ou n√£o. Sacou?

Vamos pensar com o Array de pedidos que já usamos. Nosso Chefe só pode fazer pedidos que tem o tipo de bebida = refrigerante.

Se for algum pedido de suco para esse Chefe ele não vai dar conta do serviço e na cozinha vai dar ruim!

 

Nesse Caso a cima, teremos o retorno falso, pois temos outros tipos de bebidas além de refrigerante.

Ent√£o nessa caso, o envio de pedidos para o Chefe n√£o chegaria.

Some Javascript

Essa aqui é um pouco parecida com o Every, pois tem uma diferença, ele pergunta se apenas 1 dos valores da Array equivale a sua condição.

Usando nosso Array de pedidos, imagine que nosso Chefe exige que apenas ao menos 1 dos pedido o alimento tem que ser pizza.

O retorno dele também é booleano, então bora para o código.

 

A primeira ocorrência que aconteceu já fomos alertados e recebemos o valor true.

Nessa caso 1 dos pedidos veio com alimento = Pizza, ent√£o j√° foi avisado para o Chefe que um dos pedidos tem Pizza.

Mas Dener, mas por que de verificar se tem apenas 1 pedido com Pizza?

Nessa caso suponhamos que o Chefe precisa saber se vem Pizza, pois ai ele vai ter que se preparar para trabalhar mais r√°pido, etc.

Reduce Javascript

O reduce é mais chatinho para explicar, fiquei pensando muito antes de montar esse tutorial devido ele, mas no final deu tudo certo!

A ideia dele é pegar todos os valores um Array e condensá-los  em um só.

Vou usar os preços e somar o total que teve nessa leva do pedido da nossa Array, borá ver!

 

 

Temos alguns pontos de aten√ß√£o aqui, no reduce passei um par√Ęmetro diferente que se chama next e no final dele o valor 0.

  • Total= ele verifica o pr√≥ximo valor a partir do que foi iniciado que no caso era 0.
  • 0 =¬† Foi meu valor inicial, poderia ser 30, 20, 22 ou 48, etc.

Por cada iteração, o valor pode ser alterado até a ultima iteração, no caso somei e fiz um balanço de todos os pedidos, legal né?

Conclus√£o

Portanto, tudo que vimos é muito utilizado nos dias de hoje, então já comece utilizar em seus projetos e tenha um código bonito, elegante e performático.

Veja as vers√Ķes do Javascript para voc√™ estudar mais e aplicar suas melhorias.

Se você gostou forEach(), map(), filter(), find(), every(), some() e reduce() com JavaScript, curta nossas páginas, baixe nossos materiais.

E se quiser ter mais sucesso faça o curso FullStack => Curso.

Ou se voc√™ quiser aprender mais sobre Front end… Baixe nosso Material Gratuito¬†ou aprenda mais sobre¬†html no youtube.

Deixe suas perguntas ai nos comentários que irei responder, e até a próxima forte abraço!

Forte abraço fique com Deus, Fui!

Summary
forEach(), map(), filter(), find(), every(), some() e reduce() - JavaScript ūüĒ•
Article Name
forEach(), map(), filter(), find(), every(), some() e reduce() - JavaScript ūüĒ•
Description
Aprenda os métodos Auxiliares para usar com array: forEach(), map(), filter(), find(), every(), some() e reduce() com JavaScript.
Author
Publisher Name
Dener Troquatte
Publisher Logo
Share This