5 Dicas para você saber no Javascript
Tags: codenewbie, portuguese, programming, javascript
Published: 2020-02-11 22:46:59



#### 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.

```javascript
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

```javascript
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:

```javascript
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:

```javascript
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 é:

```javascript
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:

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

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

```javascript
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:

```javascript

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

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

```

Com Spread Operator:

```javascript
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:

```javascript
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:

```javascript
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

```javascript
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

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