javascript

name: javascript description: Google's official JavaScript style guide for ES6+. Covers const/let, arrow functions, template literals, destructuring, modules, naming conventions, JSDoc, and formatting. Enforces modern JavaScript patterns and best practices.

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.