Se você tem trabalhado na área de desenvolvimento web nos últimos anos, deve ter ouvido comentários de agora JavaScript tem suporte nativo a Classes. Bom, tudo começou com o ECMAScript 6, antes dele esse artigo não fazia o menor sentido e já que ele é tão importante, vale uma revisão do que foi o ECMA6.

ECMAScript 6

Resumidamente é apenas uma versão do JavaScript lançada em 2015.

Essa nova versão do JavaScript trouxe diversas novas funcionalidades que auxiliam no desenvolvimento de aplicações mais complexas, uma vez que se houve um aumento no interesse por desenvolver aplicações com Node.js.

Como se pode observar no gráfico de quantidade de busca pelo termo Node.js no Google o ponto mais alto de busca foi em 2014, véspera do lançamento oficial do ECMA 6 e tem se mantido em alta desde então.

Classes

Pergunta: Então quer dizer que antes do ECMA6 não era possível aplicar um comportamento de classes em JavaScript?

Resposta: Sim, era possível!

Simulando uma classe com prototype

Bom, antes do ECMA6 era possível simular o comportamento de uma classe usando o prototype.

Basicamente prototype é um objeto dentro do objeto que você está utilizando e esse objeto também contém o seu próprio prototype e assim por diante.

Como podem ver, ao invés de trabalhar diretamente com classes, utilizavamos funções e definíamos métodos para elas. Para quem está aprendendo, se torna um pouco mais complexo já que o conceito de classe está abstraído no prototype. Entretanto, ao fim se utilizava da mesma forma que se fosse uma classe, instanciando um novo objeto e chamando seus métodos.

Declarando uma classe pós ECMA6

Ao invés de criarmos explicitamente uma function, declaramos uma Class, de forma muito mais simples.

Vale notar que tanto o utilizando a keyword class ou a keyword function, ao executarmos o typeof(User) ambos retornam como resultado function . Confirmando que por trás da keyword class nada mais é que a implementação de uma função da forma antiga.

Heranças

Com a chegada das classes no JavaScript, também vieram algumas outras funcionalidades desse tipo muito conhecido no universo da programação orientada a objetos. Uma delas é a Herança.

A implementação da Herança em JavaScript é com a keyword extends. Da mesma forma que se utiliza em Java.

Getter / Setter

Diferente de algumas linguagens de programação, JavaScript decidiu fornecer uma nomenclatura específica para declarar getters e setters.

Note que os métodos getters e setters são acessados como se fossem atributos da classe e não métodos propriamente, um comportamento diferente do que estamos acostumados.

Métodos estáticas

Outra das novas funcionalidades são os métodos estáticos das classes. Simplesmente utilizando a tag static antes do método ele já se torna estático.

Bom, essas são só algumas funções que vieram com o ECMA6 e especificamente utilizadas juntamente com as Classes em JavaScript. O site http://es6-features.org/ contém descrições sobre todas as novas funcionalidades dessa versão.

O que achou? Curtiu? Dá aquele like e deixa um comentário :)

Se você já precisou trabalhar com eventos do browser, principalmente os de resize, scrool e movimento do mouse você já deve ter percebido que eles são emitidos com mais frequência do que você precisa. Os padrões throttle e debounce são formas de controlar a frequência de captura desses eventos pelo seu código e é isso que será explicado aqui. O que são as funções Throttle e Debounce? O que elas fazem? Quando e por que devemos usa-las no nosso código?

Throttle

Principal função desse pattern é controlar a quantidade de vezes que um trecho de código será executado em um dado tempo. Sendo assim, podemos fazer com que a função x = x + 1 não seja executada mais de uma vezes dentro de 1 segundo.

Casos de uso para esse pattern são as funções de callback para os eventos resize e scroll do browser. A própria documentação da Mozilla para os eventos sugere a utilização dele, inclusive fornece o código da sua implementação.

Debounce

Apesar de ter a mesma função que o Throttle, controlar a execução de uma função. O Debounce aumenta o tempo de espera caso a chamada será acionada em um curto espaço de tempo. Sendo assim, conseguimos executar uma função após não ter sido chamada a um determinado tempo.

Casos de uso para esse pattern são chamadas assíncronas para campos com auto-complete e funções de callback de click elementos HTML. Pensando no funcionamento de um auto-complete, caso a cada digito for feito uma requisição HTTP para o servidor, a informação que irá chegar para o usuário será desatualizada. Logo, esperamos ele parar de digitar para realizar a busca.

Implementação

Ambas as funções podem ser encontradas já prontas nas bibliotecas Lodash e undescore.js. Sendo necessário executar apenas _.debounce(() => {}, 100) ou _.throttle(() => {}, 100) . Mais simples que isso não tem, certo?

Caso você não queira importar toda uma biblioteca para usar apenas 1 ou 2 funções, o lodash já pensou nisso e ele permite que você instale de forma individualmente suas funções via npm: debounce e throttle.

Mas já que estamos aqui, vamos implementar um caso de uso desses patterns, usarei a implementação do lodash para os exemplos.

mousemove

O evento mousemove, como o próprio nome diz, é emitido pelo browser a cada movimentação do mouse. Caso você precise capturar ele e realizar alguma operação de callback, em alguns segundos de utilização do sistema, você terá enchido o navegador de chamadas de funções. Esse é um bom exemplo para aplicarmos o debounce e o throttle.

Se você estiver no celular, fique apertando na aba de Result que tem as descrições de cada evento. Caso esteja no computador, basta mover o mouse também na aba Result. Em poucos segundos você poderá notar a diferença entre a utilização dos debounce e do throttle.

Conclusão

Lembre-se, sempre que for trabalhar com funções que podem ser executadas multíplas vezes seguidas em pouco tempo, seja por eventos do browser ou por requisições HTTP, vale a pena considerar o uso das funções throttle ou debounce para evitar problemas futuros de performance.

O que achou do artigo? Foi algo útil? Valeu a pena a leitura? Deixa um comentário de critica/melhoria e não esquece de clicar no ícone de palmas!

Provavelmente você já enfrentou um problema com arrays em JavaScript e precisou manipular o conteúdo dentro dele, seja com .map, .reduce , .filter, .find, .every, .each ou qualquer outro métodos que exista no universo dos Arrays. Agora, e quando precisamos manipular Arrays e o atributo chave são as datas, o que fazer? Bom, é isso que vou tentar explicar nesse artigo :)

Pergunta: Esse tipo de atividade não deveria ser feita no banco de dados?

Resposta: Depende. Em alguns casos é menos custoso trazer os dados um pouco mais cru do banco e então, seja no servidor com Node.js ou no Browser, podendo manipular conforme sua necessidade, evitado que sejam feitas diversas requisições ao servidor ou ao banco de dados..

Bom, menos papo e mais código, mas antes do conteúdo vale lembrar o fluxo de leitura :)

moment.js

Bom, não podemos falar de manipulação de datas em JavaScript sem comentar do moment.js, certo? Certo! 😡

Para quem não conhece, moment.js é uma biblioteca que foi desenvolvida para lidar com datas e horários em JavaScript. Farei apenas um overview sobre essa biblioteca que chegou em 2011 e está aí fazendo sucesso até hoje.

Tudo começa com o objeto .moment() que seria o equivalente ao new Date() que é nativo do JavaScript e esse objeto te permite validar, formatar e manipular qualquer data, em qualquer formato de uma forma muito simples.

moment('2018-05-01', 'YYYY-MM-DD').format('DD/MM/YYYY')
>> 01/05/2018

Lembrando que ele também sabe lidar com fusos horários.

A estrutura dos dados

Todos os exemplos nesse artigo irão utilizar a seguinte estrutura de dados:

filter

O método .filter cria um novo array com todos os elementos do array para qual a função de filtragem fornecida retorne true

Array.prototype.filter()

Problema: Quero selecionar todos os personagens que apareceram após o Rio

Sempre que for manipular uma data com o moment, é necessário transforma-la em um objeto moment(), isso é feito simplesmente fornecendo a String e o formato que a data se encontra.

A função .isAfter() valida se um objeto moment é depois de outro objeto moment.

Na sessão query da documentação do moment, é possível visualizar todos métodos disponíveis para validação condicional de objetos moment, como: .isBefore(), .isBetween(), .isMoment(), isSameOrBefore() .

map

Ok, já vimos como busca no Array mas e se precisarmos alterar o conteúdo do objeto? Bom, pra isso existe o .map

O método map invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como resultado.

Array.prototype.map() - JavaScript | MDN

Problema: Preciso do dia da semana que cada data representa.

Aqui usamos a função .format() que deve ser uma das mais utilizadas e mais completa função da biblioteca. Para utiliza-la, basta definir para qual formato você deseja que a data seja convertida.

A função .format() é a mais completa em opções para exibição de dadas.

every / some

E se precisarmos validar a consistência dos nossos dados? Uma abordagem é usando o every ou o some

Para os seguintes exemplos, foi alterado os dados iniciais para que tenha uma data inválida vinculada a Raquel Murillo.

every

O método every testa se todos os elementos do array passam pelo teste implementado pela função fornecida.

Array.prototype.every()

O método .isValid() é chamado a partir de um objeto moment e ele informa se a data está num formato válido considerando o formato definido. A partir da versão 2.3.0 foi adicionado um terceiro parâmetro para definir se a validação leva em consideração até os delimitadores.

some

O método some() testa se alguns dos elementos no array passam no teste implementado pela função atribuída.

Array.prototype.some()

Como foi possível ver, enquanto que o método every retorna true se todos os dados são compatíveis com a regra, o método some retorna true se algum dado é compatível com a regra (Não necessariamente todos).

find

Pode acontecer de você querer retornar apenas o primeiro item que for compatível com sua necessidade, para esses casos nós usamos o find.

O método find() retorna o valor do primeiro elemento do array que satisfizer a função de teste provida. Caso contrario, undefined é retornado.

Array.prototype.find()

O retorno desse código é apenas o Professor, isso por que seguindo a ordem dos itens, o professor é o primeiro que aparece antes do Rio. Essa é a principal diferença do .find para o .filter . Enquanto um retorna o primeiro item que encontrar, o outro retorna todos.

Conclusão

Nesse artigo, vimos como juntar as principais funções de manipulação de Array com a biblioteca moment.js. Talvez isso nunca tenha sido uma necessidade para você, mas se um dia for, espero ter contribuído para a solução do problema.

O que achou do artigo? Foi algo útil? Valeu a pena a leitura? Deixa um comentário de critica/melhoria que ficarei felizão.