14 Exemplos de código limpo e encurtamento de código Javascript
Tags: frontend, javascript, programming, develop
Published: 2022-04-22 20:12:57

1 - [Obtendo vários elementos do DOM](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction).

```
❌
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](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export)

```
❌
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](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).

```
❌
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](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects).

```
❌
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.](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Indexed_Collections)

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

✅
let [a, b] = foo;
```

7 - Use operadores lógicos para condicionais simples. [Link útil.](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)

```
if (foo) {
  facaAlgo();
}

OU
foo && facaAlgo();
```


8 - [Passando parâmetros condicionalmente](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator).

```
❌
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](https://medium.com/@davidsen/clean-code-object-calisthenics-f6f4dec07c8b) 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 ](https://www.linkedin.com/in/stefany-repetcki/)e [github ](https://github.com/StefanyRepetcki)❤️