JavaScript Coding Standards for Beginners

Introduction

This chapter introduces JavaScript coding standards you will reuse throughout this course. Learning conventions early might feel strict, but it saves time as files and teams grow. In engineering we often say: without rules, there is no order—discipline in code shows up early, and experienced developers can often judge quality from style before reading complex logic.

These habits apply in browsers, Node.js, and frameworks. They are not cosmetic; they keep JavaScript readable at scale.

Prerequisites

• Node.js LTS installed
• Ability to create and run a simple script (see Hello World in VS Code)
• VS Code with optional ESLint extension (helpful but not required on day one)

Why Standards Matter So Early

Standards improve readability, reviews, and maintenance—not just aesthetics.

Benefits:

• You can re-read your code after a week without guessing intent
• Teammates spend less time decoding formatting surprises
• Tools (ESLint, Prettier) can automate checks in CI
• Bugs stand out when structure is predictable

Rule 1: Follow Common Naming Conventions

References (read gradually):

• Airbnb JavaScript Style Guide (widely used in industry)
• MDN JavaScript guidelines

Example:

// Order summary with clear names
const MAX_LINE_ITEMS = 100;
 
function calculateTotalPrice(unitPrice, quantity) {
  const totalPrice = unitPrice * quantity;
  return totalPrice;
}

Rule 2: Prefer const, Then let; Avoid var in New Code

// Prefer const when the binding does not change
const appName = "learn-all";
 
// Use let when reassignment is required
let itemCount = 0;
itemCount += 1;
 
// Avoid var in new learning projects (function-scoped, hoisting surprises)

Modern tutorials and linters assume const/let (ES6+).

Rule 3: Use Clear Formatting

• Indentation: 2 spaces is the most common default in JavaScript projects (some teams use 4—match your team)
• Braces: use braces for if/for bodies even for one line when learning—reduces mistakes
• Line length: break long lines for readability (often 80–120 columns)
• Semicolons: pick one style and stay consistent; many teams use semicolons with ESLint semi rules

// Readable conditional with braces
if (itemCount > MAX_LINE_ITEMS) {
  console.log("Too many items");
}

Rule 4: Use Single or Double Quotes Consistently

JavaScript allows 'single' and "double" quotes. Pick one project style.

// Consistent single quotes
const greeting = 'Hello';
const message = `${greeting}, team`;

Template literals (backticks) are best when you need interpolation.

Rule 5: Keep Functions Small and Focused

One function should do one job when possible.

// Small, testable helper
function isAdult(age) {
  return age >= 18;
}
 
function greetUser(name, age) {
  if (!isAdult(age)) {
    return "Access limited";
  }
  return `Welcome, ${name}`;
}

Rule 6: Do Not Commit Secrets or Local Noise

// Never hard-code production API keys in source
const apiKey = "sk-live-REPLACE_ME"; // bad practice

Use environment variables and .env files locally—and add .env to .gitignore.

ESLint: Automate Standards in VS Code

ESLint reports style and common bug patterns as you type.

Quick start in a project folder:

# Initialize npm manifest if you do not have one
npm init -y
 
# Install ESLint as a dev dependency
npm install eslint --save-dev
 
# Generate a starter config (follow prompts; choose popular style if unsure)
npx eslint --init

In VS Code, install the ESLint extension, then enable format on save only after you understand what Prettier/ESLint change—so you learn rules, not only automation.

Rule 7: Comment Why, Not What

// Bad: restates the code
// Add one to count
itemCount += 1;
 
// Good: explains a business rule
// Guests under 18 cannot checkout without a guardian
if (!isAdult(age)) {
  return "Access limited";
}

FAQ

Are semicolons required in JavaScript?

ASI (Automatic Semicolon Insertion) allows omitting semicolons in many cases. Teams differ. For learning, follow one style via ESLint—do not mix randomly.

Is camelCase mandatory?

It is the dominant convention for variables and functions in JavaScript. Consistency matters more than debating perfection.

When should I run ESLint?

On every save locally, and in CI before merge. Start simple; add rules as you understand them.

Do standards differ for browser vs Node.js?

Language conventions are the same. Environment APIs differ (document vs fs), but naming and layout rules transfer.

What is Prettier vs ESLint?

ESLint enforces code quality and many style rules. Prettier formats layout (wrapping, spacing). Many projects use both together.

Why learn standards before frameworks?

Frameworks change; readable JavaScript lasts. Teams hire for maintainable code, not only framework trivia.