JavaScript: 10 dicas práticas

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:

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:

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:

if (hungry) {
    goToFridge();
}

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

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:

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:

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:

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:

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'

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:

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:

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 para testar em vários navegadores.

Você tem dicas ou truques sobre JavaScript para compartilhar?

Créditos

• 10 Practical JavaScript Tricks, escrito originalmente por Zander Shirley.