JavaScript Style Guide

A JavaScript style guide provides conventions for writing clean, readable, and maintainable code. Following a consistent style guide helps teams collaborate more effectively and reduces the cognitive load for developers when switching between different codebases.

1. General Rules

Use Semicolons: Always use semicolons to terminate statements to avoid issues with automatic semicolon insertion.
```
let name = 'John';
```
Try It Now
Use Strict Mode: Use strict mode to catch common coding errors.
```
'use strict';
```
Try It Now

2. Indentation

Use 2 Spaces for Indentation: This improves readability while keeping lines shorter.
```
function sayHello() {
  console.log('Hello');
}
```
Try It Now

3. Variables

Use const for Constants: Use const for variables that won’t be reassigned.
Use let for Variables: Use let for variables that may be reassigned.
Avoid var: Use let or const instead to avoid hoisting issues.
```
const PI = 3.14;
let count = 0;
```
Try It Now

4. Strings

Use Template Literals: Use template literals for multi-line strings and string interpolation.
```
const message = `Hello, ${name}!`;
```
Try It Now

5. Functions

Use Arrow Functions: Use arrow functions for simple expressions and callbacks.
```
const add = (a, b) => a + b;
```
Try It Now
Function Declarations for Named Functions: Use function declarations for named functions.
```
function greet(name) {
  return `Hello, ${name}`;
}
```
Try It Now

6. Objects and Arrays

Use Shorthand Syntax: Use shorthand syntax for object properties and methods.
```
const obj = { name, age };
```
Try It Now
Use Destructuring: Use destructuring for extracting values from objects and arrays.
```
const { name, age } = user;
```
Try It Now

7. Comments

Use JSDoc for Documentation: Use JSDoc comments for documenting functions and modules.

/**
 * Adds two numbers.
 * @param {number} a - First number
 * @param {number} b - Second number
 * @returns {number} Sum of a and b
 */
function add(a, b) {
  return a + b;
}

Try It Now

8. Naming Conventions

CamelCase for Variables and Functions: Use camelCase for variable and function names.
```
let userName = 'John';
```
Try It Now
PascalCase for Classes and Constructors: Use PascalCase for class and constructor names.
```
class User {
  constructor(name) {
    this.name = name;
  }
}
```
Try It Now

9. Control Structures

Use Curly Braces: Always use curly braces for control statements to prevent errors.
```
if (condition) {
  doSomething();
}
```
Try It Now

10. Whitespace

Space Around Operators: Add spaces around operators for readability.
```
let sum = a + b;
```
Try It Now
Space After Keywords: Add a space after keywords like if, for, while.
```
if (true) {
  console.log('Yes');
}
```
Try It Now

11. Error Handling

Use try...catch: Handle errors using try...catch blocks.

try {
  riskyOperation();
} catch (error) {
  console.error(error);
}

Try It Now

12. Modules

Use ES6 Modules: Use import and export for modular code.

// module.js
export const add = (a, b) => a + b;

// main.js
import { add } from './module.js';

Try It Now

Best Practices

Avoid Global Variables: Limit the use of global variables to reduce the risk of conflicts.
Keep Functions Small: Write small, focused functions that do one thing.
Use Linting Tools: Use tools like ESLint to automatically enforce coding standards.

Example of Well-Styled Code:

'use strict';

const greetUser = (name) => {
  const message = `Hello, ${name}!`;
  console.log(message);
};

greetUser('John');

Try It Now

Summary:

Following a consistent JavaScript style guide enhances code readability, maintainability, and reduces bugs. It’s an essential practice for collaborative projects and professional development environments.