Front End

21 fev, 2018

Truques do JavaScript para Hipsters

Publicidade

O JavaScript é uma linguagem incrível e sua popularidade comprova isso. Depois que foi lançada a ECMAScript 2015 (popularmente conhecida como ES6), a linguagem ficou ainda mais moderna, prática e mais próxima do que já temos em outras linguagens de programação (como é o caso da sintaxe de classes, por exemplo).

Como a brincadeira no título deste artigo já indica, hoje quero passar alguns truques da linguagem que podem facilitar a sua vida e deixar seu código mais enxuto e elegante.

Observação: Todos os códigos que serão mostrados aqui podem ser testados online aqui ou no console do seu navegador de preferência.

Códigos em condicionais

Acredite ou não, podemos otimizar os nossos condicionais. Imagine, por exemplo, este código:

if (condicao) {
  console.log('a condição é verdadeira');
}

Para este caso, podemos eliminar o if e fazer a validação toda em uma linha só:

condicao && console.log('a condição é verdadeira');

Códigos em condicionais 2

Agora vamos para o caso onde temos um if-else. Para cada um deles, temos uma execução diferente de um objeto, como por exemplo:

const obj = {
  metodo1(){return 'a'},
  metodo2(){return 'b'}
}

if (condicao) {
  obj.metodo1();
} else {
  obj.metodo2();
}

Podemos utilizar o operador condicional ternário para otimizar este trecho:

const metodo = (condicao ? 'metodo1' : 'metodo2');
obj[metodo]();

Ou então tudo de uma vez:

condicao ? obj.metodo1() : obj.metodo2();

Cache do tamanho do array em um loop

Essa dica é muito prática para evitar problemas de performance ao trabalhar com arrays de grandes dimensões. Quando utilizamos um array dentro de um loop, geralmente fazemos o seguinte:

for(var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

Este código funciona perfeitamente, mas corremos o risco do array ser muito grande. Isso acontece porque a cada iteração, o tamanho do array é calculado novamente. Para evitar este problema, basta fazer um cache deste valor:

var tamanho = array.length;
for(var i = 0; i < tamanho; i++) {
  console.log(array[i]);
}

Ou então, tudo em uma tacada só:

for(var i = 0, tamanho = array.length; i < tamanho; i++) {
  console.log(array[i]);
}

Debug no navegador

Há vários truques legais para debug. Ao invés de utilizarmos a função console.log() para debugar o código, podemos utilizar a palavra reservada debugger. Quando este código for executado no navegador, a execução será interrompida toda vez que alcançar o termo no código:

if (variavel > 0.5) {
  debugger; // jeito bacana
  console.log(variavel); // jeito ruim
}

Além de tornar o código mais efetivo para debug, nos livramos do risco de esquecer estes logs na aplicação e elas acabarem indo para a produção (sejamos francos, quem nunca deixou uma mensagem de log do console escapar em um projeto web?).

Strings em números

O JavaScript já faz uma série de interpretações para inferir qual é o tipo da variável e realizar as operações. É por esse motivo que as vezes nos deparamos com situações deste tipo:

console.log('1' + 1); // 11
console.log('1' - 1); // 0

Não vamos entrar no mérito de como tudo isso funciona, mas gostaria de aprender um truque para converter strings que representam números em números. Para isso, basta usar o operador de soma (+):

function transformaEmNumero(stringNumerica) {  
  return +stringNumerica;
}

console.log(transformaEmNumero('1234')); // 1234  

Bem legal, né? Reforçando que, para qualquer outra string que não seja um número, o valor será NaN (Not a Number).

console.log(transformaEmNumero('iMasters')); // NaN

Valores padrões para variáveis

No ES6, fomos presenteados com a funcionalidade de valores padrões em parâmetros de funções e isso facilitou muito a nossa vida, nos permitindo remover uma série de condicionais do nosso código. Quando estamos trabalhando com variáveis, podemos fazer algo semelhante:

const input = coletaInputDoUsuario() || 'vazio'; 

Neste exemplo, utilizamos o operador lógico OU (||) para atribuir um valor padrão a variável input. Caso a função coletaInputDoUsuario() não retorne nada, o valor “vazio” é atribuído. Antes do ES6 chegar, o pessoal geralmente utilizava esse truque dentro das funções.

Conclusão

Esta foi apenas uma amostra dos diversos truques bacanas que podemos fazer com o JavaScript. A linguagem está ficando cada vez mais completa a cada nova versão da especificação ECMAScript, então mais truques continuarão surgindo.

Para quem já tem uma boa noção do ES6+, este artigo tem algumas outras dicas envolvendo concatenação de arrays, clones de objetos e desestruturamento de objetos junto ao async/await. Se quiser aprender mais sobre o assunto, indico este livro e este curso!

E se você conhece mais alguma artimanha bacana da linguagem, compartilhe nos comentários!