10 hacks em Javascript que os developers devem conhecer

por Diogo Salaberri, Technical Project Manager @ Xpand IT

JavaScript é uma linguagem que tem muitas funcionalidades e “poderes”. Pode-se começar com muito pouco e fazer bons truques, sendo também possível ir a fundo na linguagem e descobrir diversas mais-valias que lá estão.

Convenhamos cá, entre nós, que o conhecimento básico já ajuda muito nas tarefas mais comuns do dia-a-dia. Porém, enfrentamos por vezes questões de performance ou outras melhorias que nos levam a recorrer a ferramentas mais avançadas.

Com o tempo e prática vamos descobrindo pequenos atalhos na linguagem para tornar o nosso dia-a-dia mais rápido e simples. Neste artigo vou partilhar alguns hacks em javascript que te podem ser muito úteis, quer estejas a começar como web developer ou à procura de melhorar o teu código.

1 – Shortcuts condicionais

O JavaScript permite o uso destes shortcuts para tornar o código mais legível. Podem ser usados para substituir estruturas IF/ELSE ou até no retorno de funções.

// if

if(address) {

    console.log("Here is your address");

}

// shortcut

address && console.log ("Here is your address");


// if else

if (name) {

    return name;

} else {

    return 'No name founded.';

}


// shortcut

return (name || 'No name founded.');

2 – Operador ~~

Podemos fazer uso do operador ~~ invés de Math.floor(). Ganhamos um pouco em performance, já para não falar que é muito mais fácil de trabalhar e memorizar o operador.

// Math

Math.floor(10.356789);

// Operator

~~(10.356789);

3 – Redimensionar um Array com array.length

Podemos ajustar o tamanho do Array sempre através do Array.length. Muitas vezes cortar ao meio ou até deixá-lo vazio.

let array = [1, 2, 3, 4, 5, 6];

console.log(array.length); // 6

array.length = 3;

console.log(array.length); // 3

console.log(array); // [1, 2, 3]

4 – Merge de arrays a baixo custo

Ao fazer merge de arrays, principalmente quando eles forem muito grandes, há um gasto alto ao optar por usar Array.concat(), muito porque o concat() vai criar um terceiro Array como resultado da operação. Neste caso podemos usar Array.push.apply(array1, array2), que basicamente coloca o segundo Array dentro do primeiro.

let array1 = [1, 2, 3];

let array2 = [4, 5, 6];

array1.push.apply(array1, array2);

console.log(array1); // [1, 2, 3, 4, 5, 6]

5 – Valor default com ||

Ainda usando os shortcuts, podemos ter valores default em caso de inconsistência nas variáveis ou parâmetros.

let originalName = 'My real name';

let originalAge = null;

let name = originalName || "Generic name.";

let age = originalAge || 99;

console.log(name); // My real name

console.log(age); // 99

6 – Calcular o array.length em grandes estruturas

Quando iteramos sobre arrays, podemos ganhar um pouco de performance fazendo uma espécie de cache do array.length. Em vez de “calcular” a cada iteração, podemos utilizar o valor antes e usar sempre a mesma variável no loop. Este hack em javascript é especialmente útil em estruturas muito grandes.

let array = [1, 2, 3, 4];

// no "cache"

for (var i = 0; i < array.length; i++) {

    console.log(array[i]);

}

// "caching"

var length = array.length;

for (var i = 0; i < length; i++) {

    console.log(array[i]);

}

7 – Explora mais o console

Podemos, e até devemos, explorar mais os poderes do console. Conhece alguns exemplos nesta documentação do Mozilla. (Usa os exemplos a seguir na consola do navegador).

console.log("This is the outer level");

console.group("First group");

console.log("In the first group");

console.group("Second group");

console.log("In the second group");

console.warn("Still in the second group");

console.groupEnd();

console.log("Back to the first group");

console.groupEnd();

console.debug("Back to the outer level");


console.time("answer time");

alert("Click to continue");

console.timeLog("answer time");

alert("Do a bunch of other stuff...");

console.timeEnd("answer time");

8 – Aceder o Array usando slice()

É possível usar o método slice() para aceder ao Array em posições mais estratégicas, como as últimas, buscando uma ou mais posições. Conseguimos isso utilizando parâmetros negativos.

var array = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

console.log(array.slice(-1)); // ['g']

console.log(array.slice(-2)); // ['f', 'g']

console.log(array.slice(-3)); // ['e', 'f', 'g']

console.log(array); // ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

9 – Validar Falsy ou Truly com o operador

Podemos obter ‘false’ ou ‘true’ usando o operador. Lembro que os valores 0, “”, null, undefined, NaN, assim como false vão resultar em false.

console.log(!!0, !!"", !!null, !!"Hii", !!undefined, !!NaN, !!false, !!true)

// false false false true false false false true

10 – Number para String e String para Number rapidamente

É possível converter um Number numa String e uma String num Number rapidamente.

// Number to String

var numberSample = 10

numberSample = numberSample + ""

console.log(numberSample) // 10

console.log(typeof(numberSample)) // string


// String to number

var stringSample = "10"

stringSample =+ stringSample

console.log(stringSample) // 10

console.log(typeof(stringSample)) // number

Conclusão

Aqui ficam algumas dicas para aprimorar trechos do teu código. Mas não fiques por aqui! Encontra novas formas de resolver os teus desafios. Começa pelo simples e ouve algumas opiniões de outros developers. Existem múltiplas formas de resolver os problemas. Há sempre mais hacks em javascript para descobrir!