JavaScript Style Guide

You will apply common JavaScript style conventions—naming, spacing, quotes, semicolons, and structure—so code is easier to read, review, and maintain.

What it is

A JavaScript style guide is a set of agreed conventions for writing code. The mental model is simple: code is read by humans far more often than it is written. A style guide reduces decisions about naming, spacing, quotes, semicolons, and structure so teams can focus on behavior.

Related terms include naming conventions, formatting, linting, and code review.

Why it matters

• It makes code easier to scan and understand.
• It reduces noisy diffs caused by personal formatting choices.
• It helps new contributors follow team expectations quickly.
• It supports safer refactoring by keeping structure predictable.

Syntax or steps

There is no single official JavaScript style guide, but many teams use conventions similar to Airbnb or Google style. A small useful pattern is:

1. Use const by default, let only when a value changes, and avoid var.
2. Use camelCase for variables and functions, such as const camelCase = true;.
3. Use PascalCase for classes and constructors.
4. Use UPPER_SNAKE_CASE for true constants.
5. Use consistent quotes, indentation, and semicolons.
6. Keep functions short and names descriptive.

Example

const DEFAULT_CURRENCY = 'USD';

function calculateTotal(items) {
  let total = 0;

  for (const item of items) {
    total += item.price * item.quantity;
  }

  return total;
}

class ShoppingCart {
  constructor(items) {
    this.items = items;
  }

  getTotal() {
    return calculateTotal(this.items);
  }
}

const cart = new ShoppingCart([
  { price: 10, quantity: 2 },
  { price: 5, quantity: 1 },
]);

console.log(cart.getTotal(), DEFAULT_CURRENCY); // 25 'USD'

• DEFAULT_CURRENCY uses uppercase because it is a constant.
• calculateTotal uses camelCase and returns a value.
• ShoppingCart uses PascalCase because it is a class.
• The code uses two-space indentation, single quotes, semicolons, and a trailing comma consistently.

Common mistakes

• Inconsistent quotes or semicolons. Fix by choosing one style and using a formatter.
• Vague names like data or temp. Fix by naming what the value represents.
• Declaring variables with var in modern code. Fix by using const or let.
• Writing very long functions. Fix by extracting small helpers with clear names.

When to use it

A style guide is best when a team needs shared expectations. The closest alternative is relying on an automated tool alone. Tools can enforce many rules, but they do not replace naming and architecture decisions.

Use a style guide to define the rules, then use ESLint and Prettier to apply them consistently.

Practice

Guided exercise: rewrite this line using common conventions: var total=0. Expected: let total = 0; or const total = 0; if it never changes.

Challenge: create a small function that formats a user's full name. Use camelCase, a descriptive parameter, and a return statement. Hint: function formatFullName(firstName, lastName) { return firstName + ' ' + lastName; }.

Quick check

Question: Which naming style is commonly used for JavaScript classes?

Answer: PascalCase, such as ShoppingCart.

Summary

A JavaScript style guide is a shared agreement about how code should look and be named. Consistent conventions make code easier to read, review, and maintain. The transferable idea is that predictable style reduces friction for humans, not just computers.