3 Truques Inteligentes 💡 de JavaScript (JS) que todo dev deve saber 📚

JavaScript ✨ - linguagem de programação mais popular para o desenvolvimento web, permitindo que os desenvolvedores criem uma interface de usuário frontal e lógica de back-end. 👨‍💻

1. Passando argumentos como objetos


const criaProduto = ({ nome, descricao, preco }) => {
    // Crie o produto
};

criaProduto({
    nome: "Pizza Pepperoni",
    descricao: "Quentinha e deliciosa",
    preco: 15.99,
});

  • A ordem dos parâmetros não importa mais, permitindo que você se concentre no fornecimento de código de alta qualidade, em vez de verificar repetidamente a definição da função.

  • Este método comunica a intenção de maneira clara, pois as chamadas de função especificam o valor de cada propriedade.

2. Usando geradores para criar IDs sequenciais


function customIDGenerator() {
    var i = 0;
    while (true) {
        yield i++;
    }
} 

const generateID = customIDGenerator();

console.log(generatorID.next().value); // 0
console.log(generatorID.next().value); // 1
console.log(generatorID.next().value); // 2

  • Com os geradores sendo introduzidos no ES6, nunca foi tão fácil gerar sequências infinitas e não repetíveis!

  • Se você não sabe o que são geradores, são funções que empregam uma avaliação preguiçosa usando o yield palavra-chave para processar e retornar dados, sob demanda.

  • Com esse truque, você não precisa mais confiar em variáveis globais / de classe para lembrar o estado!

3. Formate a saída JSON com espaços


const perfil = {
    name: "Mary",
    age: 28,
    dateJoined: "30-11-2022",
};

JSON.stringfy(profile, null, 2);

/*
{
    "name": "Mary",
    "age": 28,
    "dataJoined": "30-11-2022"
}
*/

  • Uma ferramenta simples, porém muito eficaz, para exportar JSON legível, fornecendo a quantidade de espaços a serem usados para recuo no terceiro parâmetro.

  • O segundo parâmetro é o replacer e pode ser uma função que controla o stringify-ing process, ou pode ser uma matriz; nesse caso, indica o nome das propriedades que devem ser incluídas na saída stringificada.

  • Você pode ler mais sobre como o stringfy funciona aqui.

Se quiser, adicione mais truques e idéias 💡 de JS nos comentários. 🐱‍👤

danilocfhá 2 anos

Uma outra dica simples, para quando precisamos checar length de alguma variável:

Ao invés de checar como varExemplo.length > 0 ou varExemplo.length !== 0, podemos usar simplesmente !!varExemplo.length.

Também pode-se usar !varExemplo.length ao invés de varExemplo.length === 0.

let varExemplo = 'oi'

varExemplo.length > 0
-> true

!!varExemplo.length
-> true

varExemplo.length === 0
-> false

!varExemplo.length
-> false
Drafenoushá 2 anos
Muito boa a resposta, mas eu faço um pouco diferente. Como o if pecisa ser sempre boolean, se a gente passar o number 0, ele automaticamente entende que é false. Então: ```JavaScript const arr = [] const test1 = arr.length ? 'existe valor em arr' : 'não existe valor em arr' console.log(test1) // 'não existe valor em arr' (pois length vai ser = 0) arr.push('foo') const test2 = arr.length ? 'existe valor em arr' : 'não existe valor em arr' console.log(test2) // 'existe valor em arr' (pois length vai ser > 0) ``` Dessa forma você não precisa aplicar o operador `!!arr.length` para validar se tem elementos dentro do array, apenas `arr.length`
danilocfhá 2 anos
Sim! Realmente não precisa do `!!` para usar direto em if's
jevrtonhá 2 anos

Simplesmente dicas incríveis, tanto na Tab em si quanto nos comentários, estarei salvando para usos futuros :D

ottohá 2 anos

A primeira dica é de ouro na minha opinião. O destructuring assignment é uma das coisas que torna o código enxuto e limpo, um exemplo ótimo seria quando tratamos das props de um componente ou dos objetos req e res de uma API no back-end. Temos vários outros usos, mas acredito que entender esse princípio logo no começo, faz muita diferença pra escrever e ler códigos! :smile:

Drafenoushá 2 anos

Esse de criar um gerador sequencial achei muito bom... Eu já tinha visto o yield mas nunca soube a respeito de seu uso, muito bom mesmo.

Acredito que a estrutura fica bem melhor do que colocar todo um método dentro de um for(let i; i <= 10; i++) hahahaha

Acredito que sua maior usabilidade seja no backend, pois quando se trata de aplicação da regra de negócio, é sempre melhor manter o frontend passivo e o backend com essa carga, assim concentra a possibilidade de erros em um lugar só e evita a possibilidade de falso positivo para o client-side.

Muito bom, obrigado pelo conteúdo! :)