,
28 tweets,
8 min read
Read on Twitter
Nessa mini-thread, você aprenderá técnicas de encadeamento do map(), filter() e reduce() para:
✅ Obter o total de pessoas que viram filmes da Disney, em um contexto
✅ Obter o preço a ser cobrado por horas trabalhadas
✅ Obter a idade de cães em uma escala humana
Vem comigo!👇
✅ Obter o total de pessoas que viram filmes da Disney, em um contexto
✅ Obter o preço a ser cobrado por horas trabalhadas
✅ Obter a idade de cães em uma escala humana
Vem comigo!👇
Nas threads passadas (links no último tweet), você aprendeu como os métodos map(), filter() e reduce() trabalham, individualmente.
Nessa mini-thread, através de 3 exemplos, exploraremos o poder desses métodos ao trabalharem juntos =)
Nessa mini-thread, através de 3 exemplos, exploraremos o poder desses métodos ao trabalharem juntos =)
🔥 Obtendo o total de pessoas que assistiram aos filmes da Disney, nos cinemas brasileiros
O array à seguir é um Ranking dos 10 filmes mais vistos nos cinemas do Brasil, até o momento:
O array à seguir é um Ranking dos 10 filmes mais vistos nos cinemas do Brasil, até o momento:
O objetivo é somar o total de pessoas que assistiram apenas aos filmes da Disney.
Com filter() e reduce(), isso pode ser feito sem dificuldades =)
Com filter() e reduce(), isso pode ser feito sem dificuldades =)
☝️ utilizei Destructuring Assignment no parâmetro da função de callback.
Se você ainda não conhece essa feature, escrevi uma thread focada nela, em que você aprenderá, através de exemplos, como ela funciona.
O link está nos últimos tweets =)
Se você ainda não conhece essa feature, escrevi uma thread focada nela, em que você aprenderá, através de exemplos, como ela funciona.
O link está nos últimos tweets =)
Qual é o raciocínio por trás desse código❓
1⃣ Filtrar apenas os filmes da Disney e copiá-los para um novo array:
1⃣ Filtrar apenas os filmes da Disney e copiá-los para um novo array:
2⃣ Iterar por todos os objetos desse novo array, obtendo de forma cumulativa, a soma das propriedades 'distributedBy':
🔥 Obtendo o preço a ser cobrado pelas horas trabalhadas em 2 dias da semana
Vamos imaginar que queremos fazer o seguinte:
1⃣ Agrupar dois dias de trabalho
2⃣ Converter a duração das tasks para horas, ao invés de minutos
Vamos imaginar que queremos fazer o seguinte:
1⃣ Agrupar dois dias de trabalho
2⃣ Converter a duração das tasks para horas, ao invés de minutos
3⃣ Filtrar todas as tasks com duração acima de 2 horas
4⃣ Multiplicar a duração de cada task pelo preço cobrado por hora
5⃣ Somar o preço total a ser cobrado
O objeto abaixo contém arrays com alguns projetos, organizados por dia da semana.
4⃣ Multiplicar a duração de cada task pelo preço cobrado por hora
5⃣ Somar o preço total a ser cobrado
O objeto abaixo contém arrays com alguns projetos, organizados por dia da semana.
Cada projeto contém quantos minutos foram investidos nele:
Com o encadeamento dos métodos map(), filter() e reduce(), podemos obter o preço a ser cobrado pelas horas trabalhadas nesses 2 dias:
Código confuso? Vamos examinar, passo-a-passo, a lógica desse encadeamento =D
1⃣ Agrupando dois dias de trabalho
Fazemos isso extraindo 'monday' e 'tuesday' para um novo array:
1⃣ Agrupando dois dias de trabalho
Fazemos isso extraindo 'monday' e 'tuesday' para um novo array:
2⃣ Convertendo a duração das tasks para horas, ao invés de minutos
Como o objetivo é obter um array do mesmo tamanho, mas com cada item transformado, usamos um map() para converter a duração para horas:
Como o objetivo é obter um array do mesmo tamanho, mas com cada item transformado, usamos um map() para converter a duração para horas:
3⃣ Filtrando todas as tasks com duração igual ou acima de 2 horas
Agora, queremos obter apenas as tasks que possuem duas ou mais horas.
Agora, queremos obter apenas as tasks que possuem duas ou mais horas.
Ou seja, o array original terá menos itens, um caso típico para o filter(), que retorna um novo array com apenas os itens que atendem à condição da função de callback:
4⃣ Multiplicar a duração de cada task pelo preço cobrado por hora
Suponhamos que o preço cobrado por hora seja R$ 150,00. Basta multiplicar as horas por esse valor.
Podemos, inclusive, modificar o nome da propriedade nesses novos objetos que estão sendo retornados:
Suponhamos que o preço cobrado por hora seja R$ 150,00. Basta multiplicar as horas por esse valor.
Podemos, inclusive, modificar o nome da propriedade nesses novos objetos que estão sendo retornados:
5⃣ Somar o preço total a ser cobrado
Agora que cada task possui o quanto deve ser cobrado, basta "reduzir" esses valores à um valor total:
Agora que cada task possui o quanto deve ser cobrado, basta "reduzir" esses valores à um valor total:
É claro que esse código pode ser mais legível e composto em pequenas funções de responsabilidade única.
Topa o desafio? =)
Topa o desafio? =)
🔥 Obtendo a idade de cães em uma escala humana
Suponhamos que temos um array com cães e gatos:
Suponhamos que temos um array com cães e gatos:
Nosso objetivo é:
1⃣ Separar os cães dos gatos
2⃣ Aplicar a fórmula de conversão para cada cão
3⃣ Fazer uma refatoração básica no código
1⃣ Separar os cães dos gatos
2⃣ Aplicar a fórmula de conversão para cada cão
3⃣ Fazer uma refatoração básica no código
1⃣ Separando os cães dos gatos
Queremos iterar sobre o array original, obtendo apenas os cães.
Já sabe qual dos 3 métodos pode ser utilizado?
Isso mesmo, filter() =)
Queremos iterar sobre o array original, obtendo apenas os cães.
Já sabe qual dos 3 métodos pode ser utilizado?
Isso mesmo, filter() =)
2⃣ Aplicando a fórmula de conversão para cada cão
Reza a lenda que 1 ano de um cachorro equivale à 7 anos de uma pessoa.
Cientificamente, não é tão simples assim. Mas vamos adotar essa fórmula para fins didáticos =)
Reza a lenda que 1 ano de um cachorro equivale à 7 anos de uma pessoa.
Cientificamente, não é tão simples assim. Mas vamos adotar essa fórmula para fins didáticos =)
Como queremos apenas transformar itens do array, o map() pode ser utilizado neste caso, adicionando novos objetos em um novo array.
A propriedade 'name' será mantida e 'age' será sobrescrita:
A propriedade 'name' será mantida e 'age' será sobrescrita:
3⃣ Fazendo uma refatoração básica no código
Podemos deixar esse código mais limpo e legível, quebrando-o em pequenas funções de responsabilidade única.
Primeiro, vamos extrair a função de callback que filtra apenas os cães e passá-la como referência, no argumento do filter():
Podemos deixar esse código mais limpo e legível, quebrando-o em pequenas funções de responsabilidade única.
Primeiro, vamos extrair a função de callback que filtra apenas os cães e passá-la como referência, no argumento do filter():
Vamos fazer a mesma coisa com a função que aplica a fórmula de conversão para cada cão.
Ao executar o código, além de continuar funcionando normalmente, é perceptível que ele está mais limpo, legível e testável:
Ao executar o código, além de continuar funcionando normalmente, é perceptível que ele está mais limpo, legível e testável:
Acha que esse conteúdo pode ajudar + pessoas❓
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
Te vejo na próxima 🔥
👉Retweeta👈 essa thread!
Linkei o início dela ali
em baixo, para facilitar =)
Te vejo na próxima 🔥
5 threads de referência:
Numeric Separators
🔗
Destructuring Assignment em Objetos
🔗
Explorando o map()
🔗
Explorando o filter()
🔗
Explorando o reduce()
Numeric Separators
🔗
Destructuring Assignment em Objetos
🔗
Explorando o map()
🔗
Explorando o filter()
🔗
Explorando o reduce()
