<aside> ⚠️ This is not a style guide. It's a guide to producing readable, reusable, and refactorable software in JavaScript. Not every principle herein has to be strictly followed, and even fewer will be universally agreed upon. These are guidelines and nothing more.

</aside>

Variables

Use meaningful and pronounceable variable 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. By not naming variables that end up being meaningful for understanding our program, we hurt our readers. Make your names searchable.

<aside> 💡 Tools like buddy.js and ESLint can help identify unnamed constants.

</aside>

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

// ✅ Good
// Declare them as capitalized named constants.
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000; //86400000;

setTimeout(blastOff, MILLISECONDS_PER_DAY);

Use self 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, color) {
  car.carColor = color;
}

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

function paintCar(car, color) {
  car.color = color;
}

Use default parameters instead of short circuiting or conditionals

Default parameters are often cleaner than short circuiting.

<aside> ⚠️ 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.

</aside>

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

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

Summary

1. Use meaningful and pronounceable variable names
2. Use the same vocabulary for the same type of variable
3. Use searchable names
4. Use self explanatory variables
5. Avoid Mental Mapping
6. Don't add unneeded context
7. Use default parameters instead of short circuiting or conditionals

Functions

Function arguments (2 or fewer ideally)

Limiting the amount of function parameters is incredibly important because it makes their testing easier. Having more than 3 leads to a combinatorial explosion where one have to test tons of different cases with each separate argument.