14 Exemplos de código limpo e encurtamento de código Javascript

1 - Obtendo vários elementos do DOM.

❌
const a = document.getElementById('a');
const b = document.getElementById('b');
const c = document.getElementById('c');
const d = document.getElementById('d');

✅
const [a, b, c, d] = ['a', 'b', 'c', 'd'].map(document.getElementById)

2 - Exportando várias variáveis

❌
export const foo;
export const bar;
export const kip;

✅
export const foo, bar, kip;

3 - Atribuir um valor à mesma coisa condicionalmente usando operadores ternários.

❌
a > b ? foo = 'maça' : foo = 'banana';

✅
foo = a > b ? 'maça' : 'banana';

4- Atribuir condicionalmente o mesmo valor a uma propriedade de objeto específica.

❌
c > d ? a.foo = 'maça' : a.bar = 'maça';

✅
const key = c > d ? 'foo' : 'bar';
const a[key] = 'maça';

5 - Declarar e atribuir variáveis ​​das propriedades do objeto.

❌
const a = foo.x, b = foo.y;

✅
const { x: a, y: b } = foo;

6 - Declarar e atribuir variáveis ​​de índices de array.

❌
let a = foo[0], b = foo[1];

✅
let [a, b] = foo;

7 - Use operadores lógicos para condicionais simples. Link útil.

if (foo) {
  facaAlgo();
}

OU
foo && facaAlgo();

8 - Passando parâmetros condicionalmente.

❌
if(!foo){
  foo = 'maça';
}
bar(foo, kip);

✅
bar(foo ?? 'maça', kip);

9 - Lidar com muitos 0s.

❌
const SALARIO = 150000000;
const TAXA = 15000000;

✅
const SALARIO = 150_000_000;
const TAXA = 15_000_000;

ou
const SALARIO = 15e7;
const TAXA = 15e6;

10 - Atribuindo a mesma coisa a várias variáveis.

❌
a = d;
b = d;
c = d;

✅
a = b = c = d;

11 - Simplifique a lógica de uma condição.

❌
if(fruta) {
    if (banana) {
        return "comer banana";
    }
}

✅
if(fruta && banana) {
    return "comer banana";
}

12 - Devolução Antecipada. Não utilize a palavra else! Uma das regras do clean code.

❌
if (fruta) {
    maca();
} else {
    banana();
}

✅
if (fruta) {
    return maca();
}
return banana();

13 - Os métodos de encadeamento devem retornar o mesmo tipo ou o mesmo contexto.

pessoa.trim() // retorna string. Aceitável
pessoa.trim().toUpperCase() // retorna string. Ainda aceitável
pessoa.trim().toUpperCase().replace('STEFANY', username) // return string. Ainda aceitável
pessoa.trim(),toUpperCase().replace('STEFANY', username).split(' ') // array de retorno, violou a regra de um ponto por linha

14 - Não abrevie nome de variáveis

❌
let i = 22;
const n = 'stefany';

✅
let idade = 22;
const nome = 'stefany';

Espero que tenha ajudado!:) Deixo aqui meu linkedin e github ❤️

Comments

[Hudson Carolino]

Gostei bastante dos exemplos demonstrado! 👏🏻👏🏻

[Huann Almeida]

Amei o conteúdo! 👏🏻👏🏻👏🏻

[Stefany Repetcki]

Obrigada Huann 😀