5 Dicas para você saber no Javascript

Sylvio Migliorucci — Tue, 11 Feb 2020 22:46:59 +0000

As mais frequentes dicas de código que é bom todo desenvolvedor Javascript conhecer para um código mais limpo e eficiente.

O operador Ternário

O operador Ternário tem como função substituir toda a sintaxe de IFs por algo mais básico, então não é necessário criar todo estado de IF com chaves {} e parênteses (), apenas substituindo if pelo ? e else como : , observado no exemplo abaixo.

let algumaCoisaTrue = true
if(algumaCoisaTrue){
    console.log("é true")
}else{
    console.log("Não é true")
}
//****** Versão Curta e rápida que pode ajudar******
let algumaCoisaTrue = true
algumaCoisaTrue ? console.log(“é true”) : console.log(“não é true”)

Outro Exemplo

let preco = 10;
if(preco > 10){
    console.log("Maior que 10")
}else{
    console.log("Menor que 10")
}

**** No formato de Operador Ternário ****
preco > 10 ? console.log('maior que 10') : console.log('menor que 10');

Shor-circuit evaluation

Baseado nos 3 operadores logicos

AND &&
OR ||
NOT !

O short-circuit evaluation tem como função usar OR || para uma curta validação nas sintaxes do javascript
exemplos:

const usingDatabase = "postgresql";
const yourDatabase = usingDatabase || "mysql";

De acordo com o exemplo caso o usingDatabase estivese como NULL ele usuaria a segunda forma de 'mysql' no caso, outro exemplo comum seria:

var a; // undefined (falsy value)
var b = null; // null (falsy value)
var c = undefined; //undefined (falsy value)
var d = 4; // number (NOT falsy)
var e = "five"; // assigment short circuits before reaching here

var f = a || b || c || d || e;
console.log(f);

você deve estar se perguntado se o 4 é o valor que estaria na variável f? Bom você acertou, pois os outros 3 valores estavam como NULL ou undefined

Outro exemplo muito comum que é utilizado no basico do React é:

const loading = true;
{
  loading && <ActivityIndicator size="large" color="#fff" />;
}

quando a variavel loading está true ela faz aparecer o componente <ActivityIndicator /> que é o loader padrão do React-Native que tambem é sempre true, causando um expressão sempre VERDADEIRA.

Destructuring Assignments

const {nome, telefone, endereco} = req.body

A Destructuring Assignments ou atribuição via desestruturação é uma expressão para extrair dados e conteúdos de arrays ou objetos em variaveis, muito utilizado tambem na importação de métodos específicos de bibliotecas, como no exemplo:

import { Text, Button, View } from "react-native";

Variaveis tambem podem atribuir esse valor separado da declaração dela:

var a, b;

[a, b] = [1, 2];
console.log(a); //1
console.log(b); //2

Spread Operator

O Spread Operator permite que objetos e arrays sejam expansíveis, sem a necessidade de uma primeira declaração de variaveis ou argumentos, em palavras mais simples, ele consegue converter um Array em argumentos de uma função, por exemplo:

Sem Spread Operator:


minhaFuncao(a,b,c){
    //logica aqui
}

const argumentosA = 1;
const argumentosB = 2;
const argumentosC =3;
minhaFuncao(argumentosA, argumentosB, argumentosC)

Com Spread Operator:

minhaFuncao(a,b,c){
    //logica aqui
}

const argumentos = [1, 2, 3];
minhaFuncao(...argumentos)

Array.find() de Maneira Curta

O método .find() é muito utilizado no JavaScript para encontrar determinada informação no meio de objetos e arrays, por isso nesse post uma forma básica de aplicar ele:

No exemplo, existe o seguinte array:

const pets = [
  {
    tipo: "Cachorro",
    nome: "Max"
  },
  {
    tipo: "Gato",
    nome: "Julian"
  },
  {
    tipo: "Gato",
    nome: "Eva"
  }
];

Objetivo é encontrar qual é o gato de nome Eva, mais rápido e simples possivel, por isso com apenas 2 linhas:

pet = pets.find(pet => pet.tipo === "Gato" && pet.nome === "Eva");
console.log(pet); // { tipo: 'Gato', nome: 'Eva' }

Template Literals

Template Literals ajudam muito para ordernar String que são enormes e precisam de informações dinâmicas com váriaveis dentro delas, e para o seu código não ficar assim

const texto = "Olá, meu nome é" + nome + ", tenho " + idade + " anos.";

O template literal usa de ${}, para concatenar toda String em apenas uma, ainda com o preenchimento de variaveis

const texto = `Olá, meu nome é ${nome}, tenho ${idade} anos`;

DEV Community: Sylvio Migliorucci