JavaScript Style Guide

A JavaScript style guide is a set of conventions and best practices that developers follow to write clean, consistent and maintainable code. Adhering to a style guide improves code readability, reduces errors and ensures that teams can collaborate effectively.

Importance of a JavaScript Style Guide

1. Consistency: Ensures the code looks uniform across the project.
2. Readability: Makes the code easier to understand for yourself and others.
3. Maintainability: Simplifies debugging and future modifications.
4. Collaboration: Helps teams work together without confusion.

Common JavaScript Style Guide Rules

Here are the most essential practices for writing clean and effective JavaScript code:

1. Use Consistent Indentation

Consistent indentation improves code readability. The standard is 2 spaces or 4 spaces (but not tabs).

Example:

// Good:
function sayHello() {
  console.log("Hello, World!");
}

// Bad:
function sayHello() {
 console.log("Hello, World!");
}

2. Use Semicolons

Always use semicolons at the end of statements to avoid unexpected behavior.

Example:

// Good:
const name = "John";
console.log(name);

// Bad:
const name = "John"
console.log(name)

3. Follow Naming Conventions

Use camelCase for variables and functions, PascalCase for classes and UPPER_CASE for constants.

Example:

// Variables and Functions (camelCase)
let userName = "Alice";
function getUserInfo() {}

// Classes (PascalCase)
class Person {}

// Constants (UPPER_CASE)
const API_KEY = "12345";

4. Use Single Quotes or Template Literals

Prefer single quotes ( ‘ ) for strings or template literals ( ` ) for dynamic strings.

Example:

// Good:
const greeting = 'Hello, World!';
const message = `Hello, ${userName}!`;

// Bad:
const greeting = "Hello, World!";

5. Avoid Global Variables

Global variables can lead to conflicts and unpredictable behavior. Use let or const for block scope.

Example:

// Good:
let age = 25;

// Bad:
age = 25; // Implicit global variable

6. Prefer const Over let

Use const for variables that won’t change and let for reassignable variables. Avoid using var.

Example:

// Good:
const PI = 3.14;
let score = 100;

// Bad:
var score = 100;

7. Write Short, Self-Descriptive Functions

Functions should have clear names and perform a single task.

Example:

// Good:
function calculateTotal(price, tax) {
  return price + tax;
}

// Bad:
function calc(p, t) {
  return p + t;
}

8. Use Arrow Functions

Arrow functions are concise and should be used for callbacks or simple functions.

Example:

// Good:
const add = (a, b) => a + b;

// Bad:
function add(a, b) {
  return a + b;
}

9. Avoid Magic Numbers

Replace hardcoded numbers with descriptive constants.

Example:

// Good:
const MAX_USERS = 50;
if (userCount > MAX_USERS) {
  console.log("Limit reached.");
}

// Bad:
if (userCount > 50) {
  console.log("Limit reached.");
}

10. Add Comments Sparingly

Write comments to explain why, not what. Code should be self-explanatory where possible.

Example:

// Good:
function getDiscount(price) {
  // Apply a 10% discount
  return price * 0.9;
}

// Bad:
function getDiscount(price) {
  // Multiply price by 0.9
  return price * 0.9;
}

Example: Putting It All Together

// Constants
const MAX_USERS = 100;

// Class
class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // Method
  getDetails() {
    return `Name: ${this.name}, Age: ${this.age}`;
  }
}

// Function
const isUserLimitReached = (currentUsers) => currentUsers >= MAX_USERS;

// Execution
const user = new User('Alice', 25);
console.log(user.getDetails());

if (isUserLimitReached(101)) {
  console.log('User limit exceeded.');
}

Tools for Enforcing Style

1. Linters: Tools like ESLint help identify and enforce style rules.
   • Install: npm install eslint –save-dev
   • Run: eslint yourFile.js
2. Code Formatters: Prettier automatically formats your code.
   • Install: npm install prettier –save-dev

Tips for Following a Style Guide

1. Use Version Control: Review style consistency during code reviews.
2. Automate Formatting: Use linters and formatters in your development workflow.
3. Stick to One Style: Choose a style guide like Airbnb, Google or StandardJS and follow it consistently.