Clean Code em JavaScript: Praticas Que Separam Junior de Senior

Codigo Limpo Nao e Perfeccionismo

Clean code e sobre comunicacao. Seu codigo e lido 10x mais do que e escrito. Escrever para humanos e tao importante quanto escrever para maquinas.

1. Nomes Que Explicam

// Ruim
const d = new Date();
const arr = users.filter(u => u.a);

// Bom
const currentDate = new Date();
const activeUsers = users.filter(user => user.isActive);

2. Funcoes Pequenas Com Um Proposito

// Ruim: funcao que faz 3 coisas
function processOrder(order) {
  // valida... calcula... salva... envia email...
}

// Bom: cada funcao faz uma coisa
function validateOrder(order) { ... }
function calculateTotal(items) { ... }
function saveOrder(order) { ... }
function notifyCustomer(order) { ... }

3. Early Return

// Ruim: piramide de ifs
function getDiscount(user) {
  if (user) {
    if (user.isPremium) {
      if (user.orders > 10) {
        return 0.2;
      }
    }
  }
  return 0;
}

// Bom: early returns
function getDiscount(user) {
  if (!user) return 0;
  if (!user.isPremium) return 0;
  if (user.orders <= 10) return 0;
  return 0.2;
}

4. Evite Numeros Magicos

// Ruim
if (user.age >= 18) { ... }
if (items.length > 50) { ... }

// Bom
const MINIMUM_AGE = 18;
const MAX_CART_ITEMS = 50;
if (user.age >= MINIMUM_AGE) { ... }
if (items.length > MAX_CART_ITEMS) { ... }

5. Destructuring Sempre

// Ruim
const name = user.name;
const email = user.email;
const plan = user.plan;

// Bom
const { name, email, plan } = user;

6. Async/Await Em Vez de .then()

// Ruim: callback hell moderno
fetch('/api/user')
  .then(r => r.json())
  .then(user => fetch('/api/posts/' + user.id))
  .then(r => r.json())
  .then(posts => console.log(posts));

// Bom
const userRes = await fetch('/api/user');
const user = await userRes.json();
const postsRes = await fetch('/api/posts/' + user.id);
const posts = await postsRes.json();

7. Optional Chaining e Nullish Coalescing

// Ruim
const city = user && user.address && user.address.city ? user.address.city : 'Nao informado';

// Bom
const city = user?.address?.city ?? 'Nao informado';

Conclusao

Codigo limpo nao e sobre seguir regras cegamente. E sobre empatia: pensar em quem vai ler seu codigo daqui 6 meses (que provavelmente sera voce mesmo).