Solucionado: Transformando um Array em um Objeto contador

👋 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:

function challengeFunction(array) {
  /*
    Iremos inicializar o nosso objeto contador que será receberá os valores
    e retornado no final de tudo.
  */
  const objectCounter = {};

  /*
    Como é preciso que as 'keys' do objeto estejam em ordem crescente, 
    já iremos ordenar o nosso array desde o início.
  */
  array = array.sort((a, b) => a - b);
 
  /*
    Para poder fazer a criação do nosso objeto com cada item do array,
    será preciso fazer uma iteração em cima dele para ter acesso a cada item.
  */
  array.forEach(item => {
   
    /*
      Com 'Object.keys(objectCounter)', temos um array somente com as keys do respectivo objeto.
      Usaremos isso para verificar caso já exista uma key criada para aquele item.
    */
    const objectCounterKeys = Object.keys(objectCounter);

    /*
      Aqui acontece a verificação de procurar se o item atual do loop já existe no nosso 'objectCounter'.
      Nesse caso, é preciso utilizar o '.toString', porque todos os items do objectCounterKeys estão como string.
      Caso já exista, somamos mais um no valor da respectiva key.
      Caso contrário, criamos uma nova key no 'objectCounter' e damos o valor 1.
    */
    if (objectCounterKeys.includes(item.toString())) { 
      objectCounter[item] += 1;
    } else { 
      objectCounter[item] = 1; 
    }
  });

  /*
      Depois de toda lógica acima, apenas devolvemos o objeto com a estrutura.
  */
  return objectCounter;
}

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:

const objectCounterKeys = Object.keys(objectCounter);

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:

const lunch = {
  rice: 100,
  beans: 100,
  eggs: 150
};

Object.keys(lunch);
/* ["rice", "beans", "eggs"] */

5. Criando ou incrementado uma key

Para finalizar, temos a seguinte estrutura condicional:

if (objectCounterKeys.includes(item.toString())) {
  objectCounter[item] += 1;
} else { 
  objectCounter[item] = 1; 
}

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.

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.

  2. ✉️ Se inscrever na nossa newsletter - se ainda não é, iremos ficar muito felizes com a sua inscrição.

Até segunda-feira,

Gabriel e Pedro 👋