JavaScript Style Guide

Overview

This style guide summarizes the JavaScript coding standards for all coursework. It is enforced by our ESLint configuration. Following these practices will help you pass the autograder and produce readable, professional code. Key ESLint rules are referenced throughout.

Variable Declaration & Assignment

• Prefer const for variables that never change.(ESLint: prefer-const)
• Use let when reassignment is needed.
• Never use var; it is disallowed.(ESLint: no-var)
• Do not declare variables that are unused.(ESLint: no-unused-vars)

❌ Bad

var total = 0;
var unusedVar = 5; // Unused
total = total + 2;

✅ Good

let total = 0;
// Only use let if variable may change
total += 2; 

// Use const if never reassigned
const userName = 'Alice'; 

Equality & Conditionals

• Always use === and !== for equality checks.(ESLint: eqeqeq)
• Combine if/else blocks to avoid “lonely” if statements.(ESLint: no-lonely-if, unicorn/no-lonely-if)
• Prefer ternary operators (? :) over simple if/else assignments when appropriate.(ESLint: unicorn/prefer-ternary)

if (score == 5) {
message = "Perfect!";
} else {
// "Lonely" if inside else
if (score == 0) {
    message = "Try again.";
}
}

if (flag) {
result = "yes";
} else {
result = "no";
}

if (score === 5) {
message = "Perfect!";
} else if (score === 0) {
message = "Try again.";
}

// Ternary for simple assignments
result = flag ? "yes" : "no";

Function & String Syntax

• Use arrow functions for callbacks where possible.(ESLint: prefer-arrow-callback)
• Always use template literals (`...`) for string interpolation and avoiding string concatenation.(ESLint: prefer-template)

arr.map(function(item) {
// String concatenation
return "Value: " + item; 
});

// Arrow function + template literal
arr.map(item => `Value: ${item}`);  

Advanced & Code Quality

• Destructure properties used repeatedly from objects.(ESLint: unicorn/consistent-destructuring)
• Always include a descriptive error message in throw new Error().(ESLint: unicorn/error-message)
• Avoid disabling ESLint rules without a clear reason.(ESLint: unicorn/no-abusive-eslint-disable)
• Do not use alert() in application code.(ESLint: no-alert)
• Keep return behavior consistent inside functions.(ESLint: consistent-return)

// Repeated property access
for (const user of users) {
if (user.isActive) {
    console.log(user.name + 
        " is active");
}
}

// Throwing error with no message
throw new Error();

// Unneeded ESLint disable
// eslint-disable-next-line eqeqeq
let y = 1;

// Using alert in production code
if (x > 10) {
alert("Too big!");
}

// Use destructuring for 
// repeated property access
for (const { isActive, name } of users) {
if (isActive) {
    console.log(`${name} 
        is active`);
}
}

// Always provide an error message
throw new Error("Input was empty");

// Only disable ESLint with a clear comment
// eslint-disable-next-line eqeqeq 
// -- Must use loose equality 
// for this legacy API
let y = getLegacyValue();

// Use a non-blocking notification 
// instead of alert in user-facing code
if (x > 10) {
showNotification("Too big!");
}