Home > Artigos > Código Javascript Limpo - 5 de 5

09-03-2023

Código Javascript Limpo - 5 de 5

Código, Javascript, Limpo, Formatação


5. FORMATAÇÃO


A formatação deve melhorar a legibilidade e o significado de cada linha de código. Ela pode ser vertical e horizontal, mas à semelhança do tema anterior, este também é um tema sensível, pois cada programador terá, para além das regras básicas que podemos nomear, os seus gostos pessoais, que aos seus olhos tornam o código claro. 

Em termos de regras básicas devemos ter em conta que os conceitos relacionados devem estar próximos e os que não estiverem relacionados, separados por espaços. Sobre a formatação vertical podemos dizer que esta inclui os espaçamentos entre as linhas e/ou conjuntos de linhas de código, e na horizontal as "tabs" ou "espaços" entre o código bem como a sua largura total.

Vejamos alguns exemplos do que poderão ser boas práticas e que devem ser adotadas por todos os programadores:

 

Maus exemplos:

const user = {id: 11111,age: "20",gender: "Masculino"};
const currentDate = Date.now();
const showUsers = ()=>{if(users.length > 0){for(let user of users){console.log(user)}}};

const userValidade = (user, currentDate) => { ... }

const checkUsers = (user1, user2) => {
if (user1.email === user2.email) {
removerUser(user2);
return user1;
}
else {
return user2	
}
}

 

Bons exemplos:

 
const user = {id: 11111, age: "20", gender: "Masculino"};
const currentDate = Date.now();
const userValidate = (user, currentDate) => { ... }

const showUsers = () => {
 if (users.length > 0) {
  for (let user of users) {
   console.log(user);
  }
 }
};

const checkUsers = (user1, user2) => {
 if (user1.email === user2.email) {
  removerUser(user2);
  return user1;
 }
 else {
  return user2;
 }
};

 

Explicação:

Sobre o objeto 'user', se olharmos para as duas linhas verificamos que a parte dos "bons exemplos" é mais legível e isso acontece porque o primeiro não tem os espaçamentos corretos depois de algumas vírgulas.

Um pouco mais a baixo reparamos que a função 'showUsers' está colada às variáveis 'user' e 'currentDate'. Eles deviam estar bem separados pois são conceitos diferentes. A função que devia estar colado a essas duas variáveis é a 'userValidate' como podemos ver no "bom exemplo". Ainda sobre a função 'showUsers' reparamos também que ao estar o código todo numa linha, que em javascript não tem qualquer problema, torna-se muito menos legível do que como descrito no "bom exemplo".

Por último a função 'checkUsers'. A formatação vertical está toda alinhada à esquerda o que dificulta saber-se onde começam e terminam as chavetas ou a separação de cada bloco de código. Olhando para o "bom exemplo" torna-se mais claro o corpo da função e a distinção dos blocos 'if' e 'else'.

 

Artigos Relacionados:

 

  

👉 Follow @niuGIS
 

RELACIONADAS


05-05-2023
ECMAScript

Contacte-nos 214 213 262

Informações