DEV Community 👩‍💻👨‍💻

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

Posted on

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! 🤗

Top comments (0)

18 Useful Github Repositories Every Developer Should Bookmark

>> Check out this classic DEV post <<