Common Code Smells

Let's talk about code smells.

Code smells occur all the time. They pollute the code, and it contributes to the downfall of the codebase. The broken window effect states that visible signs of disorder bring about more disorder. Left unchecked, maintenance becomes expensive and bugs are more likely to crop up. It erodes user trust and their application experience. It's bad for business.

Here are some of the most common code smells that can drastically improve the code quality.

Cryptic Variable Names

Consider the following code that has unmeaningful variable names.

// ...
async function myFunction() {
    const data = await axios.get('https://dog.ceo/api/breeds/list/all');
    const bod = getBod();
    const dg = data[bod];
    const data2 = await axios.get(`https://dog.ceo/api/breed/${b}/images/random`);
    return data2;
}
// ...

Take a second to understand what is returned from the function. Also, try to understand what the function is doing internally.

To the author who wrote it, it might perfectly clear what it means; however, when a maintainer is tasked with a bug in your function, they have to analyze it before ruling it out.
What is in data? What does it represent? What is b? Does it mean bassethound? What about biewerterrier? Is it breed?

Finally, data2, what is the contents of this variable?

It's not clear. Typescript might be able to help here; however, let's assume we are working in a legacy codebase where Typescript adoption hasn't been prioritized.

Comments can help to declare intent:

// ...
async function myFunction() {
    // Get all of the breeds in json format
    const data = await axios.get('https://dog.ceo/api/breeds/list/all');
    // Get the breed of the day
    const bod = getBod(); 
    // Get the breed
    const dg = data[bod];
    // Get the image of the breed
    const data2 = await axios.get(`https://dog.ceo/api/breed/${b}/images/random`);
    return data2;
}
// ...

Even better, you can use the tools made available to you in most programming languages.

// ...
async function myFunction() {
    const allBreeds = await axios.get('https://dog.ceo/api/breeds/list/all');
    const breedOfTheDay = getBreedOfTheDay();
    const dog = allBreeds[breedOfTheDay];
    const dogImage = await axios.get(`https://dog.ceo/api/breed/${b}/images/random`);
    return dogImage;
}
// ...

This has now been transformed to a version that is still lean and communicates intent without much effort.