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`;
Top comments (0)