JavaScript: 10 dicas práticas
Tags: ptbr, javascript, webdev, beginners
Published: 2020-05-02 02:49:14

Estou sempre à procura de novas maneiras de ser mais eficiente. E o JavaScript está sempre cheio de surpresas agradáveis. As vezes não estamos escrevendo a versão mais moderna do JavaScript e por isso, precisamos relembrar alguns truques.

## 1. Transforme o objeto "arguments" em um array

O objeto de **arguments** é um objeto semelhante a um array acessível dentro de funções que contém os valores dos argumentos passados ​​para essa função.

Mas ele não se comporta como os outros arrays, podemos acessar os valores e obter o comprimento, mas nenhum outro método de array pode ser usado nele.

Felizmente, podemos convertê-lo em um array normal:

```js
var argArray = Array.prototype.slice.call(arguments);
```

## 2. Some todos os valores de um array

Meu instinto inicial foi usar um loop, mas isso seria um desperdício:

```js
var numbers = [3, 5, 7, 2];
var sum = numbers.reduce((x, y) => x + y);
console.log(sum); // retorna 17
```

## 3. Condicionais de curto-circuito.

Temos o seguinte código:

```js
if (hungry) {
    goToFridge();
}
```

Podemos torná-lo ainda mais curto usando a variável com a função:

```js
hungry && goToFridge()
```

## 4. Use condições lógicas OR

Eu costumava declarar minhas variáveis ​​no início da minha função apenas para evitar **undefined**, caso algo desse errado:

```js
function doSomething(arg1){ 
		// se `arg1` não estiver definido, 32 será usado
    arg1 = arg1 || 32;
}
```

## 5. Operador de vírgula

O operador de vírgula (,) avalia cada um de seus operandos (da esquerda para a direita) e retorna o valor do último operando:

```js
let x = 1;

x = (x++, x);

console.log(x);
// saída esperada: 2

x = (2, 3);

console.log(x);
// saída esperada: 3
```

## 6. Usando ".length" para redimensionar um array

Você pode redimensionar ou esvaziar um array:

```js
var array = [11, 12, 13, 14, 15];  
console.log(array.length); // 5  

array.length = 3;  
console.log(array.length); // 3  
console.log(array); // [11,12,13]

array.length = 0;  
console.log(array.length); // 0  
console.log(array); // []
```

## 7. Troque valores com a desestruturação de arrays

A sintaxe de atribuição de desestruturação é uma expressão JavaScript que possibilita extrair valores de arrays ou propriedades de objetos em variáveis ​​distintas:

```js
let a = 1, b = 2
[a, b] = [b, a]
console.log(a) // -> 2
console.log(b) // -> 1
```

## 8. Faça um "shuffle" nos elements de um array

> Every day I'm shufflin', Shufflin', shufflin'

```js
var list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(list.sort(function() {
    return Math.random() - 0.5
})); 
// [4, 8, 2, 9, 1, 3, 6, 5, 7]
```

## 9. Os nomes de propriedades podem ser dinâmicos

Você pode atribuir uma propriedade dinâmica antes de declarar um objeto:

```js
const dynamic = 'color';
var item = {
    brand: 'Ford',
    [dynamic]: 'Blue'
}
console.log(item); 
// { brand: "Ford", color: "Blue" }
```

## 10. Filtrando valores exclusivos

Para todos os fãs de ES6, podemos criar um novo array contendo apenas os valores únicos usando o objeto **Set** com o operador **Spread**:

```js
const my_array = [1, 2, 2, 3, 3, 4, 5, 5]
const unique_array = [...new Set(my_array)];
console.log(unique_array); // [1, 2, 3, 4, 5]
```

## Finalizando

Ser responsável é muito mais importante do que ser eficiente. Seu site precisa funcionar em todos os navegadores.

Você pode usar ferramentas como [Endtest](https://endtest.io/) para testar em vários navegadores.

Você tem dicas ou truques sobre JavaScript para compartilhar?

# Créditos

- [10 Practical JavaScript Tricks](https://dev.to/zandershirley/10-practical-javascript-tricks-2b7h), escrito originalmente por [Zander Shirley](https://dev.to/zandershirley).