DEV Community

Cover image for Variáveis (Código Limpo: Que Bruxaria é Essa?!?! - Parte 2)
ananopaisdojavascript
ananopaisdojavascript

Posted on

2 1

Variáveis (Código Limpo: Que Bruxaria é Essa?!?! - Parte 2)

Utilize nomes de variáveis significativos e de fácil pronúncia

Não é recomendável:

const yyyymmdstr = moment().format("YYYY/MM/DD");
Enter fullscreen mode Exit fullscreen mode

É recomendável:

const currentDate = moment().format("YYYY/MM/DD");
Enter fullscreen mode Exit fullscreen mode

Use o mesmo vocabulário para o mesmo tipo de variável

Não é recomendável:

getUserInfo();
getClientData();
getCustomerRecord();
Enter fullscreen mode Exit fullscreen mode

É recomendável:

getUser();
Enter fullscreen mode Exit fullscreen mode

Use nomes fáceis de pesquisar

Leremos mais código do que o escreveremos. É importante que o código que escrevamos seja legível e fácil de pesquisar. Quando não utilizamos nomes de variáveis que, no final das contas, não são significativos para a compreensão do nosso programa, nós ferimos nossos leitores. Faça com que seus nomes sejam fáceis de serem buscados. Ferramentas como buddy.js e ESLint podem ajudar a identificar constantes sem nome.

Não é recomendável:

// Para que serve o número 86400000?!
setTimeout(blastOff, 86400000);
Enter fullscreen mode Exit fullscreen mode

É recomendável:

/*
Declare esse número em uma constante com nomes 
em letras maiúsculas
*/

const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; 
setTimeout(blastOff, MILLISECONDS_PER_DAY);

Enter fullscreen mode Exit fullscreen mode

Utilize variáveis explicativas

Não é recomendável:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
saveCityZipCode(
  address.match(cityZipCodeRegex)[1],
  address.match(cityZipCodeRegex)[2]
);
Enter fullscreen mode Exit fullscreen mode

É recomendável:

const address = "One Infinite Loop, Cupertino 95014";
const cityZipCodeRegex = /^[^,\\]+[,\\\s]+(.+?)\s*(\d{5})?$/;
const [_, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);
Enter fullscreen mode Exit fullscreen mode

Evite o mapeamento mental

Explícito é melhor que implícito

Não é recomendável:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  // Wait, what is `l` for again?
  dispatch(l);
});
Enter fullscreen mode Exit fullscreen mode

É recomendável:

const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
  doStuff();
  doSomeOtherStuff();
  // ...
  // ...
  // ...
  dispatch(location);
});
Enter fullscreen mode Exit fullscreen mode

Não acrescente contextos desnecessários

Se o nome de sua classe/objeto lhe comunica algo, não repita esse princípio no nome da sua variável

Não é recomendável:

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}
Enter fullscreen mode Exit fullscreen mode

É recomendável:

const Car = {
  make: "Honda",
  model: "Accord",
  color: "Blue"
};

function paintCar(car, color) {
  car.color = color;
}
Enter fullscreen mode Exit fullscreen mode

Utilize argumentos padrão em vez de curto circuito ou condicionais

Argumentos padrão são, com frequência, mais limpos do que o curto circuito. Se você os utiliza, tome cuidado porque sua função fornecerá apenas valores padrão para argumentos indefinidos undefined. Outros valores considerados "falsos" como ' ', " ", false, null, 0 e NaN não serão substituídos por um valor padrão.

Não é recomendável:

function createMicrobrewery(name) {
  const breweryName = name || "Hipster Brew Co.";
  // ...
}
Enter fullscreen mode Exit fullscreen mode

É recomendável:

function createMicrobrewery(name = "Hipster Brew Co.") {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

E aí? Gostaram? Até a próxima tradução! 🤗

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more