Quem nunca criou um código que não conseguia entender depois de um tempo? Ou que não conseguia entender o código de outra pessoa? Pois é. Isso é muito comum. Já tive essa experiência várias vezes e tive que gastar muito tempo em manutenção de código de vários projetos. O grande problema é que se você, a empresa ou a gerência não se preocupam com a qualidade e inovação de código, isso pode desmotivar os demais desenvolvedores e causar um grande impacto no negócio, gerando um débito técnico. E como se não bastasse isso, o código ruim pode causar problemas de segurança, bugs e até mesmo a falência de uma empresa. Até que isso fique nítido, pode ser tarde demais. > 📊 Segundo um estudo feita pela [Stepsize](https://www.stepsize.com/how-codebase-health-impacts-hiring-and-retention-2021-report), 51% dos engenheiros deixaram ou consideraram deixar o emprego por causa de dívidas técnicas. Isso explica por que a remuneração e as oportunidades de crescimento podem não ser suficientes para manter os engenheiros satisfeitos; A dívida técnica causa frustração e dificulta a inovação. E é por isso que existem os princípios de Clean Code para nos ajudar a manter o nosso código legível e de fácil manutenção. Vamos ver alguns desses princípios, como aplicá-los em JavaScript e evitar que nosso código se torne um verdadeiro pesadelo. > ⚠️ Os códigos que vamos ver é apenas para exemplificar os princípios de Clean Code. Não são códigos que você deve usar em produção. ## Use nomes significativos Todo desenvolvedor tem ou teve dificuldade para nomear suas variáveis e funções. Mas é importante que os nomes sejam significativos, e que digam o que elas são ou o que elas fazem. > ⛔ Não abrevie, não use gírias e não use nomes genéricos. ```javascript // ruim 👎 const u = new User(); u.name = 'John'; u.age = 30; const pwd = hash('123456'); const hasPermission = (user) => user.role === 'admin'; const doSomething = (user) => db.save(user); u.addresses.forEach(a => { // ... }); // bom 👍 const user = new User(); user.name = 'John'; user.age = 30; const password = hash('123456'); const isAdmin = (user) => user.role === 'admin'; const saveUser = (user) => db.save(user); user.addresses.forEach(address => { // ... }); ``` ## Use nomes pronunciáveis O nome da variável ou função deve ser pronunciável. Isso facilita a comunicação entre os membros da equipe e legibilidade do código. ```javascript // ruim 👎 const genymdhms = moment().format('YYYYMMDDHHmmss'); // bom 👍 const currentTimestamp = moment().format('YYYYMMDDHHmmss'); ``` ## Use nomes pesquisáveis Os nomes devem ser pesquisáveis. Isso significa que o nome deve ser único e que você consiga encontrá-lo facilmente no seu código. Já pensou em fazer uma busca no seu código onde precisa ajustar uma configuração mas não lembra onde? Isso te custará um tempo. ```javascript // ruim 👎 setTimeout(() => { // ... }, 1000); // bom 👍 const ONE_SECOND = 1000; setTimeout(() => { // ... }, ONE_SECOND); ``` ## Evite comentários óbvios É importante que o código seja autoexplicativo. Comentários são úteis, mas devem ser usados apenas quando necessário. Comentários óbvios são desnecessários. ```javascript // ruim 👎 const sum = (a, b) => a + b; // Soma dois números // bom 👍 const sum = (a, b) => a + b; ``` > ℹ️ Particularmente, somente uso comentários quando preciso informar os outros membros de equipe sobre uma solução bem específica. ## Evite muitas condições Muitas condições podem deixar o código confuso e difícil de entender. Principalmente quando temos muitas condições aninhadas. Tente manter o número de condições o mais baixo possível. ```javascript // ruim 👎 const getDiscount = (user) => { if (user.age >= 18) { if (user.isStudent) { return 0.5; } return 0.2; } return 0; }; // bom 👍 const MIN_AGE = 18; const getDiscount = (user) => { if (user.age < MIN_AGE) return 0; if (user.isStudent) return 0.5; return 0.2; }; ``` ## Evite efeitos colaterais Uma função deve fazer apenas uma coisa. Se ela faz mais do que isso, ela pode ter efeitos colaterais. Efeitos colaterais são ações que a função faz além daquilo que ela deveria fazer. ```javascript // ruim 👎 const add = (a, b) => { console.log(a + b); return a + b; }; // bom 👍 const print = (value) => console.log(value); const add = (a, b) => a + b; print(add(1, 2)); ``` ## Evite repetição Repetição é um dos maiores problemas que encontramos no código. Caso aconteça, é um sinal de que você deve refatorar o seu código e criar pequenos blocos de código que podem ser reutilizados. ```javascript // ruim 👎 async function getPosts(userId) { const userResponse = await fetch(`/api/user/${userId}`, { token }); const user = userResponse.json(); const postResponse = await fetch(`/api/posts/${user.authorId}`); return postResponse.json(); } async function getComments(userId) { const userResponse = await fetch(`/api/user/${userId}`, { token }); const user = userResponse.json(); const commentResponse = await fetch(`/api/comments/${user.commentId}`); return commentResponse.json(); } // bom 👍 async function getUser(userId) { const response = await fetch(`/api/user/${userId}`, { token }); return response.json(); } async function getPosts(userId) { const user = await getUser(userId); const response = await fetch(`/api/posts/${user.authorId}`); return response.json(); } async function getComments(userId) { const user = await getUser(userId); const response = await fetch(`/api/comments/${user.commentId}`); return response.json(); } ``` ## Mantenha o número de parâmetros baixo O ideal para as funções é que elas tenham no máximo 3 parâmetros. Mais do que isso, pode ser um sinal de que a função está fazendo mais do que deveria. Caso precise de mais parâmetros, é melhor usar um objeto. ```javascript // ruim 👎 const dateFormatter = (date, format, timezone, locale) => { // ... }; // bom 👍 const dateFormatter = (date, format, options) => { if (options.timezone) { // ... } if (options.locale) { // ... } }; ``` ## Não use flags como parâmetros Flags são parâmetros que indicam se uma ação deve ou não ser executada. Isso pode ser um sinal de que a função está fazendo mais do que deveria. ```javascript // ruim 👎 const createFile = (name, temp) => { if (temp) { fs.create(`./temp/${name}`); } else { fs.create(name); } }; // bom 👍 const createFile = (name) => fs.create(name); const createTempFile = (name) => fs.create(`./temp/${name}`); ``` ## Use valores padrão ao invés de condicionais Caso uma função precise de um valor padrão, é melhor usar um valor padrão ao invés de uma condicional. Isso conseguimos fazer direto na assinatura da função. ```javascript // ruim 👎 const logError = (err) => { const error = err || "Something went wrong"; console.error(error); }; // bom 👍 const logError = (err = "Something went wrong") => console.error(err); ``` ## Abstraia funções condicionais Caso uma função tenha uma condicional, é melhor abstrair essa condicional em uma função. ```javascript // ruim 👎 const getDiscount = (price, discount) => { if (discount) return price - price * discount; return price; }; // bom 👍 const getDiscount = (price, discount) => price - price * discount; const applyDiscount = (price, discount) => { if (discount) return getDiscount(price, discount); return price; }; ``` ## Mapeie ao invés de condicionais Se o seu código possui muitas condições ou um switch case muito grande, é melhor mapear essas condições em um objeto. ```javascript // ruim 👎 const getDiscount = (user) => { switch (user.type) { case "student": return 0.5; case "teacher": return 0.2; default: return 0; } }; // bom 👍 const DISCOUNTS = { student: 0.5, teacher: 0.2, }; const getDiscount = (user) => DISCOUNTS[user.type] || 0; ``` ## Use desestruturação A desestruturação é uma forma de extrair valores específicos de um objeto ou array.

Objeto

```javascript // ruim 👎 const getFullName = (user) => `${user.firstName} ${user.lastName}`; // bom 👍 const getFullName = ({ firstName, lastName }) => `${firstName} ${lastName}`; ```

Array

```javascript // ruim 👎 const getFirstAndLast = (arr) => [arr[0], arr[arr.length - 1]]; // bom 👍 const getFirstAndLast = ([first, ...rest]) => [first, rest.pop()]; ``` ## Use o operador spread O operador spread é uma forma de espalhar os valores de um objeto ou array. É uma boa pedida para criar novos objetos e arrays sem modificar os originais.

Objeto

```javascript // ruim 👎 const user = { firstName: "John", lastName: "Doe", }; const newUser = Object.assign({}, user, { age: 30 }); // bom 👍 const user = { firstName: "John", lastName: "Doe", }; const newUser = { ...user, age: 30 }; ```

Array

```javascript // ruim 👎 const array = [1, 2, 3]; const newArray = array.concat(4); // bom 👍 const array = [1, 2, 3]; const newArray = [...array, 4]; ``` ## Use template string Template string é uma forma de concatenar strings de forma mais legível. ```javascript // ruim 👎 const getFullName = (firstName, lastName) => firstName + " " + lastName; // bom 👍 const getFullName = (firstName, lastName) => `${firstName} ${lastName}`; ``` ## Use operadores ternários Operadores ternários são uma forma de escrever condicionais de forma rápida. Recomendo para retornos simples. ```javascript // ruim 👎 const getDiscount = (user) => { if (user.type === "student") { return 0.5; } else { return 0; } }; // bom 👍 const getDiscount = (user) => (user.type === "student" ? 0.5 : 0); ``` ## Use o método includes O método includes é uma forma de verificar se um array, uma string ou até mesmo substituir múltiplas condições que contém um determinado valor.

Array

```javascript // ruim 👎 const payments = ["credit", "debit", "cash"]; const mode = "credit"; const hasCredit = payments.indexOf(mode) !== -1; // bom 👍 const payments = ["credit", "debit", "cash"]; const mode = "credit"; const hasCredit = payments.includes(mode); ```

Múltiplas condições

```javascript // ruim 👎 const mode = "credit"; const hasCredit = mode === "credit" || mode === "debit" || mode === "cash"; // bom 👍 const mode = "credit"; const hasCredit = ["credit", "debit", "cash"].includes(mode); ``` > ℹ️ Existem outros métodos que podem substituir condicionais, como o `find`, `some`, `every`, `filter`, `map`, `reduce`, etc. Recomendo que você estude cada um deles. ## Use um formatador e um linter de código Cada desenvolvedor tem seu estilo de código. Porém, para que o projeto seja padronizado e consistente, é importante que todos os colaboradores sigam as mesmas regras. Um formatador de código é uma ferramenta que formata o código de forma automática. Um linter é uma ferramenta que verifica se o código está seguindo as regras definidas. Ambos são essenciais para manter o código limpo e legível. Recomendo o [Prettier](https://prettier.io/) e o [ESLint](https://eslint.org/) para projetos JavaScript e TypeScript. ## Conclusão Ninguém merece ter que lidar com um código mal escrito, não é mesmo? Manter o código limpo e legível é essencial para que o projeto seja escalável e de fácil manutenção. Portanto, é importante que você e sua equipe sigam as boas práticas de programação e documentem o código assim que possível, afim de evitar vários problemas e falta de comunicação no futuro. Caso utilize algum framework ou biblioteca, recomendo que você leia a documentação oficial para entender as boas práticas de cada um.

Blog

JavaScript