Variables

Introduction

Info

This is based on Ryan McDermott's clean-code-javascript that was written in December 2016. Some of the principles may be very JavaScript specific. Most of the principles will apply to all languages.

Naming

Variables use lowerCamelCase and constant names use CONSTANT_CASE. All the rest of the principles below can apply to constants as well as long as they're written in CONSTANT_CASE.

Bad

VariablesConstants

CURRENT_DATE
var_123
var123
TestThisVar

currentDate
constant
TestThisConst

Good

VariablesConstants

currentDate
mutableValues
blastOffTime
streetAddress

MAX_NUMBER
SPEED_OF_LIGHT
GOLDEN_RATIO

Warning

When naming a variable after an acronym, like ATM, ISP, ID. Only the first letter is still capitalized and the rest are lower.

Bad

cashLeftInATM
newCustomerID

Good

cashLeftInAtm
NewCustomerId

Use meaningful and pronounceable names

Bad

const yyyymmdstr = moment().format("YYYY/MM/DD");

Good

const currentDate = moment().format("YYYY/MM/DD");

Use the same vocabulary for the same type of variable

Bad

getUserInfo();  
getClientData();  
getCustomerRecord();

Good

getUser();

Use searchable names

We will read more code than we will ever write. It's important that the code we do write is readable and searchable. By not naming variables that end up being meaningful for understanding our program, we hurt our readers. Make your names searchable. Tools like buddy.js and ESLint can help identify unnamed constants.

Bad

// What the heck is 86400000 for?  
setTimeout(blastOff, 86400000);

Good

// Declare them as capitalized named constants.  
const MILLISECONDS_IN_A_DAY = 86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

Use explanatory variables

Bad

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

Good

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

Avoid Mental Mapping

Explicit is better than implicit.

Bad

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

Good

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

Don't add unneeded context

If your class/object name tells you something, don't repeat that in your variable name.

Bad

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

function paintCar(car) {  
    car.carColor = "Red";
}

Good

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

function paintCar(car) {  
    car.color = "Red";  
}

Use default arguments instead of short circuiting or conditionals

Default arguments are often cleaner than short circuiting. Be aware that if you use them, your function will only provide default values for undefined arguments. Other "falsy" values such as '', "", false, null, 0, and NaN, will not be replaced by a default value.

Bad

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

Good

function createMicrobrewery(name = "Hipster Brew Co.") {  
    // ...  
}