đź‘‹Â Opa, Gabriel e Pedro aqui e seja bem-vindo para mais um episĂłdio da nossa newsletter semanal, a Challenge House. Toda quinta-feira, temos a solução de um desafio JavaScript que foi divulgado no inĂcio da semana.
đź‘‹ Opa, Gabriel e Pedro aqui e seja bem-vindo para mais um episĂłdio da nossa newsletter semanal, a Challenge House. Toda quinta-feira, temos a solução de um desafio JavaScript que foi divulgado no inĂcio da semana. | ||||||||||||||||||||||||
Vem com a gente que lá vem história… | ||||||||||||||||||||||||
🏠Challenge House sendo desvendada | ||||||||||||||||||||||||
No inĂcio da semana, compartilhamos o desafio Transformando um Array em um Objeto contador. | ||||||||||||||||||||||||
Sem mais demora, a solução em formato de código é essa aqui: | ||||||||||||||||||||||||
| ||||||||||||||||||||||||
Ao vivo e Ă cores | ||||||||||||||||||||||||
Não acredita que o código ali em cima funciona? Criamos uma execução dele no CodePen para você poder ver de perto. Basta rodar 👇 | ||||||||||||||||||||||||
🤓 Por que na minha máquina funciona? | ||||||||||||||||||||||||
Não adianta viver de CTRL + C e CTRL + Z. É preciso entender como o código ali em cima funciona e o motivo dele funcionar. Vamos lá? | ||||||||||||||||||||||||
1. Inicializando o nosso objeto contador | ||||||||||||||||||||||||
Na primeira linha da nossa função, já declaramos o nosso objeto contador, por meio da variável objectCounter. Ela será usada para popular toda nossa estrutura mais a frente. | ||||||||||||||||||||||||
2. Ordenando o nosso array | ||||||||||||||||||||||||
Um dos desafios era que o objeto contador estivesse ordenado em ordem crescente. | ||||||||||||||||||||||||
Assim, é mais fácil já garantir que o array fornecido esteja em ordem para que não seja fazer algum esforço extra no final. | ||||||||||||||||||||||||
Caso nunca tenha visto o método .sort() do JavaScript, aqui vai uma referência da MDN: | ||||||||||||||||||||||||
3. Iterando o nosso array | ||||||||||||||||||||||||
Para fazer a lógica de criar um objeto contador seguindo as regras, é necessário iterar pelo array fornecido para saber o valor de item por item. | ||||||||||||||||||||||||
A estrutura utilizada para criar um loop foi o .forEach(): | ||||||||||||||||||||||||
4. Pegando as keys já existentes | ||||||||||||||||||||||||
Agora já dentro do nosso loop, criamos a variável objectCounterKeys para ter acesso as keys existentes no objeto objectCounter. | ||||||||||||||||||||||||
Observe que fazemos isso utilizando a seguinte sintaxe: | ||||||||||||||||||||||||
| ||||||||||||||||||||||||
Aqui, utilizamos o método .keys() da classe Object. Uma vez que passamos um objeto como argumento, será retornado um array com as keys do respectivo objeto. Para ilustrar, temos: | ||||||||||||||||||||||||
| ||||||||||||||||||||||||
5. Criando ou incrementado uma key | ||||||||||||||||||||||||
Para finalizar, temos a seguinte estrutura condicional: | ||||||||||||||||||||||||
| ||||||||||||||||||||||||
Uma vez que objectCounterKeys é um array, podemos utilizar o método .includes(): | ||||||||||||||||||||||||
Com ele, verificamos se o item atual do nosso loop está incluso no array de keys do objeto. Caso esteja incluso, pegamos aquela key e incrementamos 1 no seu valor. Caso não exista, iremos criar a key e atribuir o valor 1. | ||||||||||||||||||||||||
Se vocĂŞ pensou de outra maneira e fez o um cĂłdigo diferente, irĂamos adorar saber a solução tambĂ©m. Sinta-se a vontade para chamar a gente no instagram da Challenge House ou comentar nesse texto. | ||||||||||||||||||||||||
Fazer um comentário | ||||||||||||||||||||||||
Se vocĂŞ achou o conteĂşdo dessa newsletter interessante, pense com carinho em fazer alguma dessas coisas: | ||||||||||||||||||||||||
1. ❤️ Compartilhar com os amigos - é com a sua ajuda que iremos levar o Challenge House para cada vez mais pessoas. | ||||||||||||||||||||||||
Compartilhar conteĂşdo | ||||||||||||||||||||||||
2. ✉️ Se inscrever na nossa newsletter - se ainda não é, iremos ficar muito felizes com a sua inscrição. | ||||||||||||||||||||||||
Seguir meu Canal | ||||||||||||||||||||||||
Até segunda-feira, | ||||||||||||||||||||||||
Gabriel e Pedro đź‘‹ |