Javascript

Google JavaScript Style Guide

Official Google JavaScript coding standards for ES6+ code.

Golden Rules

1. Use `const` by default — let only when reassignment needed, never var 2. Arrow functions for callbacks — traditional functions for methods 3. Template literals for string interpolation 4. Destructuring where it improves readability 5. Named exports over default exports 6. JSDoc for public APIs — document parameters and return types 7. 2-space indentation — consistent formatting

Quick Reference

Naming Conventions

Variables

// ✓ CORRECT
const greeting = 'Hello';
let count = 0;

// ✗ INCORRECT
var greeting = 'Hello';  // never use var

Functions

// ✓ CORRECT - arrow functions for callbacks
const double = (x) => x * 2;
array.map(item => item.id);

// ✓ CORRECT - traditional functions for methods
class User {
  getName() {
    return this.name;
  }
}

// ✓ CORRECT - default parameters
function greet(name, greeting = 'Hello') {
  return `${greeting}, ${name}!`;
}

Strings

// ✓ CORRECT - template literals
const name = 'Alice';
const greeting = `Hello, ${name}!`;

// ✗ INCORRECT
const greeting = 'Hello, ' + name + '!';

Destructuring

// ✓ CORRECT - object destructuring
const {id, name} = user;
const {x, y, ...rest} = coordinates;

// ✓ CORRECT - array destructuring
const [first, second] = items;
const [head, ...tail] = list;

// ✓ CORRECT - function parameters
function processUser({id, name, email}) {
  // ...
}

Modules

// ✓ CORRECT - named exports
export function myFunction() { /* ... */ }
export class MyClass { /* ... */ }

// ✓ CORRECT - named imports
import {myFunction, MyClass} from './my-module.js';

// ✗ INCORRECT - default exports (avoid)
export default function() { /* ... */ }

Classes

// ✓ CORRECT
class Animal {
  #name;  // private field

  constructor(name) {
    this.#name = name;
  }

  speak() {
    return `${this.#name} makes a sound.`;
  }
}

JSDoc

/**
 * Fetches user data from the API.
 * @param {number} userId - The user ID to fetch.
 * @param {Object} options - Optional configuration.
 * @param {number} options.timeout - Request timeout in ms.
 * @return {Promise<Object>} The user data.
 */
function fetchUser(userId, {timeout = 5000} = {}) {
  // ...
}

Promises and Async/Await

// ✓ CORRECT - async/await
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`);
  }
  return response.json();
}

// ✓ CORRECT - error handling
try {
  const user = await fetchUser(1);
} catch (error) {
  console.error('Failed to fetch user:', error);
}

Common Mistakes

When to Use This Guide

• Writing new JavaScript code
• Refactoring existing JavaScript
• Code reviews
• Setting up ESLint rules
• Onboarding new team members

Install

npx skills add testdino-hq/google-styleguides-skills/javascript

Full Guide

See javascript.md for complete details, examples, and edge cases.

Google JavaScript Style Guide

Source: https://google.github.io/styleguide/jsguide.html

Golden Rules

1. Use `const` and `let` — never var 2. Use ES6+ features — arrow functions, destructuring, template literals 3. Semicolons are required at end of every statement 4. 2-space indentation — no tabs 5. Single quotes for strings (except JSON) 6. Always use `===` — never == 7. No unused variables

---

1. Variables

// CORRECT
const PI = 3.14159;
let count = 0;

// INCORRECT
var name = 'Alice'; // never use var

Destructuring

const [first, second] = array;
const { name, age } = user;
const { name: userName } = user;  // with renaming
const { timeout = 5000 } = options;  // with defaults

---

2. Strings

// CORRECT - single quotes
const name = 'Alice';

// CORRECT - template literals for interpolation
const greeting = `Hello, ${name}!`;

// INCORRECT
const greeting = 'Hello, ' + name + '!'; // use template literals

---

3. Functions

// CORRECT - named function declaration
function processData(data) {
  return data.filter(Boolean);
}

// CORRECT - arrow functions for callbacks
const doubled = numbers.map(n => n * 2);

// CORRECT - default parameters
function greet(name, greeting = 'Hello') {
  return `${greeting}, ${name}!`;
}

// CORRECT - rest parameters
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

---

4. Classes

// CORRECT
class Animal {
  #name; // private field

  constructor(name) {
    this.#name = name;
  }

  speak() {
    return `${this.#name} makes a sound.`;
  }
}

// INCORRECT
function Animal(name) { // use class syntax
  this.name = name;
}

---

5. Modules

// CORRECT - named exports
export function processData(data) { return data; }
export const MAX_SIZE = 100;

// CORRECT - imports
import { processData } from './data-processor.js';

---

6. Arrays

// CORRECT - array methods over loops
const evens = numbers.filter(n => n % 2 === 0);
const doubled = numbers.map(n => n * 2);
const total = numbers.reduce((acc, n) => acc + n, 0);

// CORRECT - spread
const combined = [...arr1, ...arr2];
const copy = [...original];

---

7. Async/Await

// CORRECT
async function fetchUser(id) {
  const response = await fetch(`/api/users/${id}`);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  return response.json();
}

// CORRECT - parallel operations
const [users, posts] = await Promise.all([fetchUsers(), fetchPosts()]);

---

8. Naming Conventions

---

Common Mistakes