Concrete Logo
Hamburger button

12 ótimas técnicas para reduzir seu código Javascript

  • Blog
  • 17 de Julho de 2017
Share

*Este post foi originalmente publicado (em inglês) no Medium Hackernoon. Acesse aqui.

Antes de começar, devido a uma série de comentários polarizados (como amei ou odiei o artigo), gostaria de deixar claro que as reduções são úteis às vezes, mas às vezes não. Depende do contexto usado, então não considere que o código reduzido é sempre a melhor opção! Ok?

Dito isso, escrevi este post como uma fonte de pesquisa para quem quer aprender técnicas de redução de código em JavaScript, dicas que fui aprendendo ao longo do anos. Para te ajudar a entender melhor o que está acontecendo, decidi incluir as versões reduzidas e as normais.

1. Null, Undefined e Empty Checks

Quando criamos novas variáveis, às vezes queremos conferir se o valor da variável a qual você está se referindo não é null ou undefined. Eu diria que isso é bem comum para desenvolvedores JavaScript.

Versão normal

Versão reduzida

Não acredita em mim? Teste você mesmo! (só colar no Chrome Dev Tools e clique):

 

2. Object Array Notation

Versão normal

let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";

Versão reduzida

let a = ["myString1", "myString2", "myString3"];

3. If true… else

Este é um ótimo redutor de código para quando você quer fazer alguma coisa se o teste for true, se não faça alguma coisa usando ternary operator.

Versão normal:

Versão reduzida:

Se você acredita em alguma característica weak typing do JavaScript, isso pode também ajudar em um código mais conciso. Por exemplo, você pode reduzir o fragmento do código anterior por:

4. Declarando variáveis

Acho que esta é a redução mais usada na comunidade, até porque sabemos que os usuários de JavaScript usam hoist para a declaração de variável. É um padrão legal declara todas as variáveis no começo e no meio.

Versão normal:

Versão reduzida:

5. Operadores de atribuição

Operadores de atribuição são usados para atribuir valores para as variáveis JavaScript. Sem dúvidas você usa aritmética todo dia sem pensar (não importa qual linguagem você use. Se Java, PHP, C++… é essencialmente o mesmo princípio).

Versão normal:

Versão reduzida:

Outros operadores reduzidos: dado que x=10 e y=5, a tabela abaixo explica os operadores de atribuição:

6. Objeto RegExp

Exemplo para evitar o uso de objeto RegExp.

Versão normal:

Versão reduzida:

8. If Presence

Isso pode ser trivial, mas merece uma menção. Quando fazemos “if checks” os operadores de atribuição às vezes podem ser omitidos.

Versão normal:

Versão reduzida:

Aqui tem outro exemplo. Se “c” NÃO é igual a verdadeiro, então faça algo.

Versão normal:

Versão reduzida:

9. Argumentos de função variável

A redução literal do objeto pode ser um pouco difícil de se acostumar, mas os desenvolvedores mais experientes geralmente preferem ao invés de uma série de funções e variáveis misturadas. Você pode argumentar qual técnica é mais curta, mas eu gosto de usar a notação literal de objeto como um claro substituto para funções como construtores.

Versão normal:

Versão reduzida (parece longa só porque eu tenho o console.log’s nela):

10. charAt()

Você pode usar a função eval() para isso, mas essa técnica de redução de suporte é muito mais limpa que uma evolução e você vai ganhar aplausos dos colegas que já te zuaram pelas suas habilidades amadoras de código.

Versão normal:

Versão reduzida:

11. Short function calling

Assim como na primeira, você pode usar ternary operators para fazer funções reduzidas de calling baseadas em uma condicional.

Versão normal:

Versão reduzida:

12. Exponentes em base decimal

Você deve ter visto esta por aí… É essencialmente um jeito mais bonito de escrever sem os zeros. 1e7 essencialmente significa 1 seguido por 7 zeros  – isso representa a décima base (JS interpreta como um flutuador) igual a 10.000.000.

Versão normal:

Versão reduzida:

E é isso! Ficou alguma dúvida ou tem algo a dizer? Aproveite os campos abaixo.

É desenvolvedor web e quer trabalhar em um time fantástico? Clique aqui.