17-05-2022
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!