DEV Community

Stefany Repetcki
Stefany Repetcki

Posted on

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

#frontend #javascript #programming #develop

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)
Enter fullscreen mode Exit fullscreen mode

2 - Exportando várias variáveis

❌ export const foo; export const bar; export const kip; ✅ export const foo, bar, kip;
Enter fullscreen mode Exit fullscreen mode

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

❌ a > b ? foo = 'maça' : foo = 'banana'; ✅ foo = a > b ? 'maça' : 'banana';
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

❌ const a = foo.x, b = foo.y; ✅ const { x: a, y: b } = foo;
Enter fullscreen mode Exit fullscreen mode

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

❌ let a = foo[0], b = foo[1]; ✅ let [a, b] = foo;
Enter fullscreen mode Exit fullscreen mode

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

if (foo) { facaAlgo(); } OU foo && facaAlgo();
Enter fullscreen mode Exit fullscreen mode

8 - Passando parâmetros condicionalmente.

❌ if(!foo){ foo = 'maça'; } bar(foo, kip); ✅ bar(foo ?? 'maça', kip);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

❌ a = d; b = d; c = d; ✅ a = b = c = d;
Enter fullscreen mode Exit fullscreen mode

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

❌ if(fruta) { if (banana) { return "comer banana"; } } ✅ if(fruta && banana) { return "comer banana"; }
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

14 - Não abrevie nome de variáveis

❌ let i = 22; const n = 'stefany'; ✅ let idade = 22; const nome = 'stefany';
Enter fullscreen mode Exit fullscreen mode

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

Top comments (3)

Collapse
 
huannvictor profile image
Huann Almeida •

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

Collapse
 
stefanyrepetcki profile image
Stefany Repetcki •

Obrigada Huann 😀

Collapse
 
hudsoncarolino profile image
Hudson Carolino •

Gostei bastante dos exemplos demonstrado! 👏🏻👏🏻