09-03-2023
Código Javascript Limpo - 5 de 5
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:
RELACIONADAS