# Javascript
---
## Boas práticas
---
> Use nomes de variáveis que tenham significado e sejam pronunciáveis
### Ruim
```javascript=
const yyyymmdstr = moment().format('YYYY/MM/DD');
```
### Bom
```javascript=
const currentDate = moment().format('YYYY/MM/DD');
```
---
> Use o mesmo vocabulário para o mesmo tipo de variável
### Ruim
```javascript=
getUserInfo();
getClientData();
getCustomerRecord();
```
### Bom
```javascript=
getUser();
```
---
> Use nomes pesquisáveis
Nós iremos ler mais código que escrever.
É importante que o código que escrevemos seja legível e pesquisável
### Ruim
```javascript=
// Para que diabos serve 86400000?
setTimeout(blastOff, 86400000);
```
### Bom
```javascript=
// Declare-as como `const` global em letras maiúsculas.
const MILLISECONDS_IN_A_DAY = 86400000;
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);
```
---
## Simplifique condições Boolean
```javascript=
function phoneIsValid(user.phone) {
if (user.phone.length > 0) {
return true
} else {
return false
}
}if (phoneIsValid(user)) { ... }
```
---
## Simplifique condições Boolean (Versão Simplificada)
```javascript=
function phoneIsValid(user.phone) {
return (user.phone.length > 0)
}
// or
function phoneIsValid(user.phone) {
return !!user.phone.length
}
```
---
## Use OR para condições
```javascript=
function getUserName(user) {
if(user.name) {
return user.name
} else {
return 'Anonymous'
}
}
```
---
## Use OR para condições
```javascript=
function getUserName(user) {
return user.name || 'Anonymous'
}
```
---
### Variable Hoisting no JavaScript
> O que o código abaixo imprime no console?
```javascript=
var x = 2;
//global
function funcao() {
//local
console.log(x);
var x = 3;
console.log(x);
}
funcao();
```
---
> Concatenando strings direito
### Ruim
```javascript=
let result = "";
for (let i = 0; i < 1000; i++) {
let user = "user: " + i + "\n";
result += user;
}
console.log(result);
```
---
> Arrow functions
```javascript=
const materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
console.log(materials.map(material => material.length));
// expected output: Array [8, 6, 7, 9]
```
---
> Atribuição via desestruturação ou Object destructuring
```javascript=
var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2
// ES2016 - não implementado em Firefox 47a01
({a, b, ...rest} = {a:1, b:2, c:3, d:4});
```
---
> Convertendo para boolean usando "!!"
---
> Capturando milisegundos de uma data usando denovo o "+"
---
> Cacheando array.length em um loop
---
# hackmd
> Disponivel em hackmd.io
---
## Referências
https://medium.com/tableless/5-dicas-de-javascript-para-um-c%C3%B3digo-mais-limpo-a18f7c4a9ad
https://medium.com/trainingcenter/c%C3%B3digo-limpo-vers%C3%A3o-javascript-80adecafdbec
https://www.alura.com.br/artigos/variable-hoisting-no-javascript
https://www.turbosite.com.br/blog/conheca-16-hacks-de-javascript-que-podem-facilitar-muito-o-desenvolvimento
{"metaMigratedAt":"2023-06-15T11:50:34.736Z","metaMigratedFrom":"Content","title":"Javascript","breaks":true,"contributors":"[{\"id\":\"821ec6ac-50d9-4784-9772-4e67fa39e6d6\",\"add\":3616,\"del\":408}]"}