Página principal

17 dicas de otimização de Javascript para conhecer em 2021

Autor: Blessing Hirwa || Versão original

Mesmo utilizando Javascript há bastante tempo, às vezes podemos não estar atualizados quanto aos novos recursos que ele oferece, e que podem resolver problemas sem escrever mais código. Essas técnicas podem ajudar a escrever de forma limpa e otimizada, além de ajudá-lo a se preparar para entrevistas.

1. If com várias condições

Podemos armazenar valores em um array e podemos usar o método includes para fazer a verificação da condição:


                //formato mais longo
                if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl'){ 
                  //executar
                }
                //formato mais curto
                if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
                  //executar
                }

2. If...else abreviado

Este é um atalho para quando temos condições if-else que não contêm lógicas extensas. Podemos usar os operadores ternários para simplificar.


                // formato mais longo
                let test= boolean;
                if (x > 100) {
                    test = true;
                } else {
                    test = false;
                }
                
                //formato mais curto
                let test = (x > 10) ? true : false;
                
                //ou podemos encurtar ainda mais:
                let test = x > 10;
                console.log(test);

É possível também aninhar a condição:


                let x = 300,
                let test2 = !(x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
                console.log(test2); // "greater than 100"

3.Checagem de null, undefined, e variáveis vazias

Quando criamos novas variáveis, às vezes queremos verificar se seu valor não é null ou undefined. JavaScript tem um atalho muito bom para realizar essas funções.


               // formato mais longo
               if (first !== null || first !== undefined || first !== '') {
                   let second = first;
               }
               // formato mais curto
               let second = first || '';

4.Verificações de valor nulo e atribuição de valor padrão

Formatos breves para estabelecer um valor designado em caso de null


               let first = null,
               let second = first || '';
               console.log("verificação de null",second); // resultado será ''

5.Verificações de valor undefined e atribuição de um valor padrão


               let first = undefined;
               let second = first || '';
               console.log("verificar undefined check", second); // resultado será ""

6. Laço forEach abreviado

Este é um atalho útil para iteração:


                // formato mais longo
                for (var i = 0; i < testData.length; i++)

                // formato mais breve
                for (let i in testData) or  for (let i of testData)

7. Retornos de comparação

Usar a comparação na instrução de retorno evitará 5 linhas de código e as reduzirá para 1 linha.


                // formato mais longo
                let test;
                function checkReturn() {
                    if (!(test === undefined)) {
                        return test;
                    } else {
                        return callMe('test');
                    }
                }
                var data = checkReturn();
                console.log(data); //resulta em test
                
                function callMe(val) {
                    console.log(val);
                }
                
                // formato mais breve
                function checkReturn() {
                    return test || callMe('test');
                }

8. Chamada de função curta

Podemos alcançar esses tipos de funções usando o operador ternário.


                // formato mais longo
                function test1() {
                  console.log('test1');
                };
                function test2() {
                  console.log('test2');
                };
                var test3 = 1;
                if (test3 == 1) {
                  test1();
                } else {
                  test2();
                }
                
                // formato mais breve
                (test3 === 1? test1:test2)();

9. Forma breve de usar Switch

Podemos salvar as condições nos objetos de valor-chave e podem ser usados com base nas condições.


                // formato mais longo
                switch (dado) {
                  case 1:
                    test1();
                  break;
                
                  case 2:
                    test2();
                  break;
                
                  case 3:
                    test();
                  break;
                  // E assim em diante...
                }
                
                //  formato mais breve
                var dado = {
                  1: test1,
                  2: test2,
                  3: test
                };
                
                dado[condicao] && dado[condicao]();

10. Abreviação de string multi-linha

Quando estamos lidando com uma string de várias linhas no código, podemos fazer isso da seguinte maneira:


                //formato mais longo

                const data = 'abc abc abc abc abc abc
	'
                    + 'test test,test test test test
	'
                
                //formato mais breve
                
                const data = `abc abc abc abc abc abc
                         test test,test test test test`

11. Formato breve de retorno implícito

Com o uso das arrow functions, podemos retornar o valor diretamente, sem precisar escrever uma instrução de retorno.


                // formato mais longo
                function getArea(diameter) {
                  return Math.PI * diameter
                }
                
                // formato mais breve
                getArea = diameter => (
                  Math.PI * diameter;
                )
                
                // formato em uma linha
                getArea = diameter => Math.PI * diameter;

12. Formato breve para condicional de busca

Se tivermos que verificar o tipo e, com base no tipo, precisamos chamar métodos diferentes, temos a opção de usar vários else if ou usar o switch. Mas há uma forma abreviada que também pode ser utilizada.


                // formato mais longo
                if (type === 'test1') {
                  test1();
                }
                else if (type === 'test2') {
                  test2();
                }
                else if (type === 'test3') {
                  test3();
                }
                else if (type === 'test4') {
                  test4();
                } else {
                  throw new Error('Invalid value ' + type);
                }
                
                // formato mais breve
                var types = {
                  test1: test1,
                  test2: test2,
                  test3: test3,
                  test4: test4
                };
                
                var condicao = types[type];
                (!condicao) && throw new Error('Invalid value ' + type); condicao();

13. Object.entries()

Esse recurso ajuda a converter o objeto em um array de objetos.


                const data = { test1: 'abc', test2: 'cde', test3: 'efg' };
                const arr = Object.entries(data);
                console.log(arr);
                /** Resultado:
                [ [ 'test1', 'abc' ],
                  [ 'test2', 'cde' ],
                  [ 'test3', 'efg' ]
                ]
                **/

14. Object.values ()

Este também é um novo recurso introduzido no ES8 que executa uma função semelhante a Object.entries (), mas sem a parte das chaves, retornando apenas o valor:


                const data = { test1: 'abc', test2: 'cde' };
                const arr = Object.values(data);
                console.log(arr);
                // Resultado:
                // [ 'abc', 'cde']

15. Repita uma string várias vezes

Para repetir os mesmos caracteres várias vezes, podemos usar o laço for e adicioná-los ao mesmo laço, mas há um atalho para isso:


                // formato mais longo 
                let test = ''; 
                for(let i = 0; i < 5; i ++) { 
                  test += 'test '; 
                } 
                console.log(test); // test test test test test 
                
                // formato mais breve
                'test '.repeat(5);

16. Abreviação para potência

Abreviação para escrever uma função de potência exponencial:


                //formato mais longo
                Math.pow(2,3); // 8
                
                //formato mais breve
                2**3 // 8

17. Separadores numéricos

Agora você pode separar facilmente os números com apenas um _. Isso facilitará a vida dos desenvolvedores que trabalham com grandes números.


                // sintaxe antiga
                let number = 98234567
                
                // nova sintaxe
                let number = 98_234_567

Para se atualizar com os recursos mais recentes da mais nova versão do JavaScript (ES2021 / ES12):

  1. replaceAll (): retorna uma nova string com todos os resultados de um padrão substituídos pelo novo padrão.
  2. Promise.any (): Percorre um iterável de objetos Promise e, conforme uma promessa é respondida com sucesso, retorna apenas essa única promessa com o valor.
  3. weakref: Este objeto contém uma referência fraca para outro objeto sem impedir que esse objeto seja coletado como lixo.
  4. FinalizationRegistry: Permite solicitar um retorno de chamada quando um objeto é coletado como lixo.
  5. Visibilidade privada: modificador para métodos e accessors. Métodos privados podem ser declarados com #.
  6. Operadores lógicos: && e ||
  7. Intl.ListFormat: Este objeto permite a formatação de listas sensíveis ao idioma.
  8. Intl.DateTimeFormat: Este objeto permite a formatação de data e hora sensível ao idioma.