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 outras, 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 artigo 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:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') { let variable2 = variable1; }

Versão reduzida:

let variable2 = variable1  || '';

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

//null value example
let variable1 = null;
let variable2 = variable1  || '';
console.log(variable2);
//output: '' (an empty string)
 
//undefined value example
let variable1 = undefined;
let variable2 = variable1  || '';
console.log(variable2);
//output: '' (an empty string)
 
//normal value example
let variable1 = 'hi there';
let variable2 = variable1  || '';
console.log(variable2);
//output: 'hi there'

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:

let big;
if (x > 10) {
    big = true;
}
else {
    big = false;
}

Versão reduzida:

let big = x > 10 ? true : false;

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:

let big = (x > 10);

//further nested examples
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"

let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"

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:

let x;
let y;
let z = 3;

Versão reduzida:

let x, y, z=3;

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:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

Versão reduzida:

x++;
minusCount --;
y*=10;

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

x += y //result x=15
x -= y //result x=5
x *= y //result x=50
x /= y //result x=2
x %= y //result x=0

6. Objeto RegExp

Exemplo para evitar o uso de objeto RegExp.

Versão normal:

var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

if (likeJavaScript === true)

Versão reduzida:

if (likeJavaScript)

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

Versão normal:

let c;
if ( c!= true ) {
// do something...
}

Versão reduzida:

let c;
if ( !c ) {
// do something...
}

8. 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:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
    // do something...
}
myFunction( "String", 1, [], {}, true );

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

function myFunction() {
    console.log( arguments.length ); // Returns 5
    for ( i = 0; i < arguments.length; i++ ) {
        console.log( typeof arguments[i] ); // Returns string, number, object, object, boolean
    }
}
myFunction( "String", 1, [], {}, true );

9. 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 zoaram pelas suas habilidades amadoras de código.

Versão normal:

"myString".charAt(0);

Versão reduzida:

"myString"[0]; // Returns 'm'

10. Short Functions Calling

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

Versão normal:

function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3) 
{
    x();
} else 
{
    y();
}

Versão reduzida:

<span class="markup--quote markup--pre-quote is-other" data-creator-ids="anon"><code class="markup--code markup--pre-code">function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)(); // Short version!</code></span>

11. 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:

for (let i = 0; i < 10000; i++) {

Versão reduzida:

for (let i = 0; i < 1e4; i++) {

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

***

Artigo publicado originalmente: https://www.concrete.com.br/2017/07/17/reducao-codigo-javascript/