Google JavaScript Style Guide

https://google.github.io/styleguide/jsguide.html
Admin
Google JavaScript Style Guide is a comprehensive coding standards document defining Google's...
Tokens:22,568
Snippets:307
Trust Score:8.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### JSDoc File Overview Comment

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

Example of a top-level file overview comment in JSDoc. This is recommended for files with multiple definitions to orient readers.

```javascript
/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @package
 */
```

--------------------------------

### JSDoc Multi-line Example

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

Use this multi-line style for JSDoc comments that span more than one line. Ensure '/**' and '*/' are on their own lines.

```javascript
/**
 * Multiple lines of JSDoc text are written here,
 * wrapped normally.
 * @param {number} arg A number to do something to.
 */
function doSomething(arg) { … }
```

--------------------------------

### JSDoc Record and Extends Comments

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

Example of documenting a record type using JSDoc, including `@extends` for inheritance and a description for the `next` method. Use `@record` for record types.

```javascript
/**
 * Records are also helpful.
 * @extends {Iterator<TYPE>}
 * @record
 * @template TYPE
 */
class Listable {
  /** @return {TYPE} The next item in line to be returned. */
  next() {}
}
```

--------------------------------

### Mutability of Exports in JavaScript (Good Example)

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

Prefer exporting module-scoped variables with accessor functions (getters/setters) or wrappers for mutations to control mutability.

```javascript
// Good: Rather than export the mutable variables foo and mutateFoo directly,
// instead make them module scoped and export a getter for foo and a wrapper for
// mutateFooFunc.
let /** number */ foo = 0;
let /** function(number): number */ mutateFooFunc = (foo) => foo + 1;

/** @return {number} */
export function getFoo() {
  return foo;
}

export function mutateFoo() {
  foo = mutateFooFunc(foo);
}

/** @param {function(number): number} mutateFoo */
export function setMutateFoo(mutateFoo) {
  mutateFooFunc = mutateFoo;
}
```

--------------------------------

### JavaScript var Declaration Placement Example

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

Illustrates the recommendation to declare `var` variables as close as possible to their first use for readability, while avoiding declaration within a block if the variable is referenced outside of it.

```javascript
function sillyFunction() {
  var count = 0;
  for (var x in y) {
    // "count" could be declared here, but don't do that.
    count++;
  }
  console.log(count + ' items in y');
}

```

--------------------------------

### Handle Numeric Response with Exception Handling

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

Use a try-catch block to handle potential exceptions when processing a response. This example demonstrates catching a specific error and continuing execution.

```javascript
try {
  return handleNumericResponse(response);
} catch (ok) {
  // it's not numeric; that's fine, just continue
}
return handleTextResponse(response);
```

--------------------------------

### JSDoc Single-line Example

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

Use this single-line style for concise JSDoc comments. If a single-line comment needs to extend to multiple lines, switch to the multi-line style.

```javascript
/** @const @private {!Foo} A short bit of JSDoc. */
this.foo_ = foo;
```

--------------------------------

### Illegal Inline JSDoc Usage Examples

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

Demonstrates incorrect usage of inline JSDocs, such as documenting function descriptions or using them in specific contexts where only block JSDocs are permitted.

```javascript
// Illegal inline JSDocs.

class MyClass {
  /** @return {string} */ foo() {...}
}

/** No function description allowed inline here. */ function bar() {...}

function /** Function description is also illegal here. */ baz() {...}
```

--------------------------------

### Bad Whitespace in Type Annotations

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

Illustrates common mistakes in whitespace usage within JavaScript type annotations that violate the style guide.

```javascript
// Only put a space after the colon
/** @type {function(string) : number} */
```

```javascript
// Put spaces after colons and commas
/** @type {{foo:number,bar:number}} */
```

```javascript
// No space in union types
/** @type {number | string} */
```

--------------------------------

### Mutability of Exports in JavaScript (Bad Example)

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

Avoid exporting mutable variables and functions that mutate them directly. This can lead to unpredictable behavior.

```javascript
// Bad: both foo and mutateFoo are exported and mutated.
export let /** number */ foo = 0;

/**
 * Mutates foo.
 */
export function mutateFoo() {
  ++foo;
}

/**
 * @param {function(number): number}
 */
export function setMutateFoo(newMutateFoo) {
  // Exported classes and functions can be mutated!
  mutateFoo = () => {
    foo = newMutateFoo(foo);
  };
}
```

--------------------------------

### Long Aliases and Unwrapped Lines for Readability

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

Demonstrates the use of long, namespace-based aliases and shows that require lines exceeding 80 columns must not be wrapped, prioritizing readability and adherence to style guides.

```javascript
const {SomeDataStructure: SomeDataStructureModel} = goog.requireType('identical.package.identifiers.models');
const {SomeDataStructure: SomeDataStructureProto} = goog.require('proto.identical.package.identifiers');
```

--------------------------------

### Use Shorthand Properties in Object Literals

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

Utilize shorthand properties when the property name matches the variable name for concise object creation. This example also demonstrates a method shorthand.

```javascript
const foo = 1;
const bar = 2;
const obj = {
  foo,
  bar,
  method() { return this.foo + this.bar; },
};
assertEquals(3, obj.method());
```

--------------------------------

### Prefer Breaking at Higher Syntactic Levels

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

When wrapping lines, break at the highest possible syntactic level. This example shows a preferred way to wrap an assignment statement.

```javascript
currentEstimate =
    calc(currentEstimate + x * currentEstimate) /
        2.0;
```

--------------------------------

### Disallowed Getter Syntax

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

Avoid using JavaScript getter and setter properties, especially when they modify observable state. Provide ordinary methods instead. This example shows a disallowed getter that modifies state.

```javascript
class Foo {
  get next() { return this.nextId++; }
}
```

--------------------------------

### Discouraged Line Wrapping

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

Avoid breaking lines at lower syntactic levels, such as within a function call's arguments, as shown in this discouraged example.

```javascript
currentEstimate = calc(currentEstimate + x *
    currentEstimate) / 2.0;
```

--------------------------------

### Control Structures: Braces Required

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

All control structures must use braces, even for single statements. The first statement of a non-empty block must start on a new line. This rule applies to if, else, for, do, and while statements.

```javascript
if (someVeryLongCondition()) {
  doSomething();
}

for (let i = 0; i < foo.length; i++) {
  bar(foo[i]);
}
```

--------------------------------

### JavaScript var Declaration Scope Example

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

Demonstrates how `var` declarations are function-scoped, not block-scoped, leading to unexpected behavior with closures in loops. The variable `iteration` retains its last value across all setTimeout callbacks.

```javascript
for (var i = 0; i < 3; ++i) {
  var iteration = i;
  setTimeout(function() { console.log(iteration); }, i*1000);
}

// logs 2, 2, 2 -- NOT 0, 1, 2
// because `iteration` is function-scoped, not local to the loop.

```

--------------------------------

### Organize goog.provide and goog.require Statements

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

Place all goog.provide statements first, followed by an empty line, then all goog.require statements. Sort entries alphabetically, with uppercase letters first. Do not wrap statements, even if they exceed 80 columns.

```javascript
goog.provide('namespace.MyClass');
goog.provide('namespace.helperFoo');

goog.require('an.extremelyLongNamespace.thatSomeoneThought.wouldBeNice.andNowItIsLonger.Than80Columns');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.dom.classes');
goog.require('goog.dominoes');

```

--------------------------------

### JSDoc Class and Constructor Comments

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

Demonstrates JSDoc comments for a class, including its description, implemented interfaces, and constructor parameters. Use `@implements` for interfaces.

```javascript
/**
 * A fancier event target that does cool things.
 * @implements {Iterable<string>}
 */
class MyFancyTarget extends EventTarget {
  /**
   * @param {string} arg1 An argument that makes this more interesting.
   * @param {!Array<number>} arg2 List of numbers to be processed.
   */
  constructor(arg1, arg2) {
    // ...
  }
};
```

--------------------------------

### Function Argument Wrapping Patterns

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

Demonstrates preferred methods for wrapping function arguments when they exceed the 80-column limit. Options include indenting arguments on a new line, wrapping at 80 columns, or placing each argument on its own line.

```javascript
// Arguments start on a new line, indented four spaces. Preferred when the
// arguments don't fit on the same line with the function name (or the keyword
// "function") but fit entirely on the second line. Works with very long
// function names, survives renaming without reindenting, low on space.
doSomething(
    descriptiveArgumentOne, descriptiveArgumentTwo, descriptiveArgumentThree) {
  // …
}

// If the argument list is longer, wrap at 80. Uses less vertical space,
// but violates the rectangle rule and is thus not recommended.
doSomething(veryDescriptiveArgumentNumberOne, veryDescriptiveArgumentTwo,
    tableModelEventHandlerProxy, artichokeDescriptorAdapterIterator) {
  // …
}

// Four-space, one argument per line.  Works with long function names,
// survives renaming, and emphasizes each argument.
doSomething(
    veryDescriptiveArgumentNumberOne,
    veryDescriptiveArgumentTwo,
    tableModelEventHandlerProxy,
    artichokeDescriptorAdapterIterator) {
  // …
}
```

--------------------------------

### Provide Namespace Members

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

Members on namespaces can also be provided individually.

```javascript
goog.provide('foo.bar');
goog.provide('foo.bar.CONSTANT');
goog.provide('foo.bar.method');
```

--------------------------------

### Standard and Aliased Imports with goog.require

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

Demonstrates standard aliasing and namespace-based aliasing for disambiguation using `goog.require`. Use these for imports that are used in both code and type annotations.

```javascript
const asserts = goog.require('goog.asserts');
const testingAsserts = goog.require('goog.testing.asserts');
```

--------------------------------

### Naming Default Imports in JavaScript

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

Default import names are derived from the imported file name. This is generally discouraged as default exports are banned by the style guide.

```javascript
import MyClass from '../my-class.js';
import myFunction from '../my_function.js';
import SOME_CONSTANT from '../someconstant.js';
```

--------------------------------

### Documenting Methods and Named Functions with JSDoc

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

Use JSDoc for methods and named functions to document parameter and return types, and method descriptions. Include @override for overridden methods and ensure all annotations are explicit.

```javascript
/** A class that does something. */
class SomeClass extends SomeBaseClass {
  /**
   * Operates on an instance of MyClass and returns something.
   * @param {!MyClass} obj An object that for some reason needs detailed
   *     explanation that spans multiple lines.
   * @param {!OtherClass} obviousOtherClass
   * @return {boolean} Whether something occurred.
   */
  someMethod(obj, obviousOtherClass) { ... }

  /**
   * @param {string} param
   * @return {string}
   * @override
   */
  overriddenMethod(param) { ... }
}

/**
 * Demonstrates how top-level functions follow the same rules.  This one
 * makes an array.
 * @param {TYPE} arg
 * @return {!Array<TYPE>}
 * @template TYPE
 */
function makeArray(arg) { ... }
```

--------------------------------

### Importing for Side Effects with goog.require

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

Shows how to import a module solely for its side effects, such as initialization. A comment is required to explain the necessity and suppress compiler warnings.

```javascript
/** @suppress {extraRequire} Initializes MyFramework. */
goog.require('my.framework.initialization');
```

--------------------------------

### JSDoc Line Wrapping for Param/Return Descriptions

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

Illustrates how to wrap long descriptions for parameters and return values in JSDoc comments. Ensure wrapped lines are indented four spaces.

```javascript
/**
 * Illustrates line wrapping for long param/return descriptions.
 * @param {string} foo This is a param with a description too long to fit in
 *     one line.
 * @return {number} This returns something that has a description too long to
 *     fit in one line.
 */
exports.method = function(foo) {
  return 5;
};
```

--------------------------------

### Discouraged Horizontal Alignment in Objects

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

While permitted, horizontal alignment of object properties with variable whitespace is generally discouraged due to maintenance issues. This example shows both aligned and unaligned versions.

```javascript
{
  tiny: 42, // this is great
  longer: 435, // this too
};

{
  tiny:   42,  // permitted, but future edits
  longer: 435, // may leave it unaligned
};
```

--------------------------------

### ES Module Imports

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

Use import statements for ES modules. Import paths must include the '.js' file extension. Avoid importing the same file multiple times.

```javascript
import './sideeffects.js';

import * as goog from '../closure/goog/goog.js';
import * as parent from '../parent.js';

import {name} from './sibling.js';
```

```javascript
import '../directory/file';
```

```javascript
import '../directory/file.js';
```

```javascript
// Imports have the same path, but since it doesn't align it can be hard to see.
import {short} from './long/path/to/a/file.js';
import {aLongNameThatBreaksAlignment} from './long/path/to/a/file.js';
```

--------------------------------

### Good Whitespace in Type Annotations

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

Demonstrates correct whitespace usage within various JavaScript type annotations, ensuring readability and adherence to style guidelines.

```javascript
/** @type {function(string): number} */
```

```javascript
/** @type {{foo: number, bar: number}} */
```

```javascript
/** @type {number|string} */
```

```javascript
/** @type {!Object<string, string>} */
```

```javascript
/** @type {function(this: Object<string, string>, number): string} */
```

```javascript
/**
 * @type {function(
 *     !SuperDuperReallyReallyLongTypedefThatForcesTheLineBreak,
 *     !OtherVeryLongTypedef): string}
 */
```

```javascript
/**
 * @type {!SuperDuperReallyReallyLongTypedefThatForcesTheLineBreak|
 *     !OtherVeryLongTypedef}
 */
```

--------------------------------

### Using 'export from' Statements in JavaScript

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

Export from statements must not be line-wrapped, making them an exception to the 80-column limit. This applies to both 'export from' flavors.

```javascript
export {specificName} from './other.js';
export * from './another.js';
```

--------------------------------

### Class Declaration and Inheritance in JavaScript

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

Demonstrates class declaration with JSDoc for generics and inheritance. Subclasses of templatized types require explicit template type specification in @extends.

```javascript
/** @template T */
class Foo {
  /** @param {T} x */
  constructor(x) {
    /** @type {T} */
    this.x = x;
  }
}

/** @extends {Foo<number>} */
class Bar extends Foo {
  constructor() {
    super(42);
  }
}

exports.Baz = class extends Bar {
  /** @return {number} */
  method() {
    return this.x;
  }
};
```

```javascript
/** @extends {Bar} */ // <-- unnecessary @extends
exports.Baz = class extends Bar {
  /** @return {number} */
  method() {
    return this.x;
  }
};
```

--------------------------------

### Correct goog.require Usage

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

Use goog.require to import namespaces. Ensure statements are at the top level before any other code.

```javascript
const SomeClass = goog.require('some.package.Class');
```

```javascript
const alias = goog.require('my.long.name.alias');
```

--------------------------------

### Discouraged Default Export Style

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

Illustrates a discouraged legacy pattern for importing a single class or type using a 'default export' style. Prefer destructuring into aliases for new code.

```javascript
const MyClass = goog.require('some.package.MyClass');
const MyType = goog.requireType('some.package.MyType');
```

--------------------------------

### Disallowed goog.require Patterns

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

Avoid extra terms in aliases, masking native types, breaking lines over 80 columns, using random alias names, missing spaces after colons, or using goog.requireType without an alias.

```javascript
// Extra terms must come from the namespace.
const MyClassForBizzing = goog.require('some.package.MyClass');
```

```javascript
// Alias must include the entire final namespace component.
const MyClass = goog.require('some.package.MyClassForBizzing');
```

```javascript
// Alias must not mask native type (should be `const JspbMap` here).
const Map = goog.require('jspb.Map');
```

```javascript
// Don't break goog.require lines over 80 columns.
const SomeDataStructure =
    goog.require('proto.identical.package.identifiers.SomeDataStructure');
```

```javascript
// Alias must be based on the namespace.
const randomName = goog.require('something.else');
```

```javascript
// Missing a space after the colon.
const {Foo:FooProto} = goog.require('some.package.proto.Foo');
```

```javascript
// goog.requireType without an alias.
goog.requireType('some.package.with.a.Type');
```

--------------------------------

### JavaScript Function Declaration in Block Alternative

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

Shows the recommended way to define a function within a block scope using a `var` initialized with a function expression, ensuring consistent behavior across JavaScript environments, unlike block-scoped function declarations.

```javascript
if (x) {
  var foo = function() {};
}

```

--------------------------------

### Avoid Static Container Classes in JavaScript

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

Do not use container classes with only static methods or properties for namespacing. Instead, export individual constants and functions directly.

```javascript
// container.js
// Bad: Container is an exported class that has only static methods and fields.
class Container {
  /** @return {number} */
  static bar() {
    return 1;
  }
}

/** @const {number} */
Container.FOO = 1;

exports = {Container};

```

```javascript
/** @return {number} */
exports.bar = () => {
  return 1;
}

/** @const {number} */
exports.FOO = 1;

```

--------------------------------

### Documenting Class Properties with JSDoc

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

Document all property types using JSDoc. Descriptions can be omitted for private properties if the name and type are self-explanatory. Publicly exported constants follow the same commenting conventions.

```javascript
/** My class. */
class MyClass {
  /** @param {string=} someString */
  constructor(someString = 'default string') {
    /** @private @const {string} */
    this.someString_ = someString;

    /** @private @const {!OtherType} */
    this.someOtherThing_ = functionThatReturnsAThing();

    /**
     * Maximum number of things per pane.
     * @type {number}
     */
    this.someProperty = 4;
  }
}

/**
 * The number of times we'll try before giving up.
 * @const {number}
 */
MyClass.RETRY_COUNT = 33;
```

--------------------------------

### Parameter Name Comments (Before Value)

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

Shows the preferred format for parameter name comments, placed before the value and separated by an equals sign (`=`), used when names don't sufficiently convey meaning.

```javascript
someFunction(obviousParam, /* shouldRender= */ true, /* name= */ 'hello');
```

--------------------------------

### Declare Legacy Namespace with goog.module

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

Optionally use goog.module.declareLegacyNamespace() after the goog.module statement to ease transition, but avoid it when possible due to naming restrictions.

```javascript
goog.module('my.test.helpers');
goog.module.declareLegacyNamespace();
goog.setTestOnly();
```

--------------------------------

### Block Comment Styles

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

Illustrates acceptable styles for block comments, including multi-line `/* ... */` and single-line `//`. Subsequent lines in multi-line `/* ... */` comments should align their asterisks.

```javascript
/*
 * This is
 * okay.
 */

// And so
// is this.

/* This is fine, too. */
```

--------------------------------

### Rest Parameters in JavaScript Functions

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

Employ rest parameters with a '...' prefix in JSDoc for variadic functions, ensuring it's the last parameter. Avoid naming it 'var_args' or 'arguments'.

```javascript
/**
 * @param {!Array<string>} array This is an ordinary parameter.
 * @param {...number} numbers The remainder of arguments are all numbers.
 */
function variadic(array, ...numbers) {}
```

--------------------------------

### Invoke Constructors with Parentheses

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

Always use parentheses `()` when invoking a constructor with `new`. Omitting them can lead to incorrect behavior and subtle mistakes.

```javascript
new Foo;
```

```javascript
new Foo();
```

```javascript
new Foo().Bar();
```

```javascript
new Foo.Bar();
```

--------------------------------

### Forward Declare for Cross-Library Dependencies

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

Use goog.forwardDeclare to break circular references across library boundaries. This pattern is poorly supported by build tools and should be avoided by organizing code to prevent such dependencies.

```javascript
goog.forwardDeclare('namespace');
```

--------------------------------

### Define Class with Traditional Constructor

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

An alternative to goog.defineClass, this uses traditional constructor functions and goog.inherits for inheritance. Per-instance properties should be defined after the superclass constructor call, and methods on the prototype.

```javascript
/**
  * @constructor @extends {S}
  * @param {string} value
  */
function C(value) {
  S.call(this, 2);
  /** @const */
  this.prop = value;
}
goog.inherits(C, S);

/**
 * @param {string} param
 * @return {number}
 */
C.prototype.method = function(param) {
  return 0;
};
```

--------------------------------

### Destructuring Imports with goog.require and goog.requireType

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

Shows how to destructure imports into aliases for specific members from a module. `goog.require` is used when the imported name is used in code and types, while `goog.requireType` is for type annotations only.

```javascript
const {MyClass} = goog.require('some.package');
const {MyType} = goog.requireType('other.package');
const {clear, clone} = goog.require('goog.array');
const {Rgb} = goog.require('goog.color');
```

--------------------------------

### Parameter Name Comments (After Value)

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

Presents an alternative format for parameter name comments, placed after the value without an equals sign, for consistency with surrounding code.

```javascript
someFunction(obviousParam, true /* shouldRender */, 'hello' /* name */);
```

--------------------------------

### Empty Blocks: Concise Formatting

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

An empty block may be closed immediately after opening (e.g., `{}`) unless it's part of a multi-block statement like if/else or try/catch/finally.

```javascript
function doNothing() {}
```

--------------------------------

### Disallowed goog.module Hierarchy

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

Module namespaces cannot be direct children of other module namespaces. The directory structure must mirror the namespace hierarchy.

```javascript
goog.module('foo.bar');   // 'foo.bar.qux' would be fine, though
goog.module('foo.bar.baz');
```

--------------------------------

### JSDoc Markdown List Formatting

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

When listing items in JSDoc, use Markdown lists for clarity. Plain text formatting may be ignored by documentation tools.

```javascript
/**
 * Computes weight based on three factors:
 *
 *  - items sent
 *  - items received
 *  - last timestamp
 */
```

--------------------------------

### JSDoc Typedef and Enum Comments

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

Shows how to document a type union using `@typedef` and an enum using `@enum`. Individual enum items can also have JSDoc comments.

```javascript
/**
 * A useful type union, which is reused often.
 * @typedef {!FruitType|!FruitTypeEnum}
 */
let CoolUnionType;
```

```javascript
/**
 * Types of fruits.
 * @enum {string}
 */
const FruitTypeEnum = {
  /** This kind is very sour. */
  SOUR: 'sour',
  /** The less-sour kind. */
  SWEET: 'sweet',
};
```

--------------------------------

### Nonempty Blocks: K&R Style Braces

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

Follows Kernighan and Ritchie style for nonempty blocks: no line break before the opening brace, line break after, line break before the closing brace, and line break after the closing brace unless followed by else, catch, while, or a delimiter.

```javascript
class InnerClass {
  constructor() {}

  /** @param {number} foo */
  method(foo) {
    if (condition(foo)) {
      try {
        // Note: this might fail.
        something();
      } catch (err) {
        recover();
      }
    }
  }
}
```

--------------------------------

### JSDoc @see for references

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

The @see tag is used to reference other classes, functions, or methods, providing a lookup to related code elements.

```javascript
/**
 * Adds a single item, recklessly.
 * @see #addSafely
 * @see goog.Collect
 * @see goog.RecklessAdder#add
 */
```

--------------------------------

### Define Class with goog.defineClass

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

Use goog.defineClass for class-like definitions when ES6 classes are not feasible. Ensure per-instance properties are defined after the superclass constructor call and methods are on the prototype.

```javascript
let C = goog.defineClass(S, {
  /**
   * @param {string} value
   */
  constructor(value) {
    S.call(this, 2);
    /** @const */
    this.prop = value;
  },

  /**
   * @param {string} param
   * @return {number}
   */
  method(param) {
    return 0;
  },
});
```

--------------------------------

### Avoiding Circular Dependencies in JavaScript Modules

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

Do not create cycles between ES modules, even though the specification allows it. Cycles can be created using both 'import' and 'export from' statements.

```javascript
// a.js
import './b.js';
```

```javascript
// b.js
import './a.js';

// `export from` can cause circular dependencies too!
export {x} from './c.js';
```

```javascript
// c.js
import './b.js';

export let x;
```

--------------------------------

### Declare goog.module Namespace

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

Each goog.module file must declare a single, unique namespace name. This name should reflect the package and its main exported symbol.

```javascript
goog.module('search.urlHistory.urlHistoryService');
```

--------------------------------

### Descriptive Identifier Naming

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

Use descriptive names for identifiers. Avoid ambiguous abbreviations and do not delete letters within words. Short names are acceptable for variables in very limited scopes (<= 10 lines).

```javascript
errorCount          // No abbreviation.
dnsConnectionIndex  // Most people know what "DNS" stands for.
referrerUrl         // Ditto for "URL".
customerId          // "Id" is both ubiquitous and unlikely to be misunderstood.
```

```javascript
n                   // Meaningless.
nErr                // Ambiguous abbreviation.
nCompConns          // Ambiguous abbreviation.
wgcConnections      // Only your group knows what this stands for.
pcReader            // Lots of things can be abbreviated "pc".
cstmrId             // Deletes internal letters.
kSecondsPerDay      // Do not use Hungarian notation.
```

--------------------------------

### JSDoc for Methods Requiring Return Tags

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

When methods return values, use a single JSDoc comment above the method signature that includes a @return tag. Inline JSDocs are not sufficient for descriptions or tags.

```javascript
class MyClass {
  /**
   * @param {number} arg
   * @return {string}
   */
  bar(arg) {...}
}
```

--------------------------------

### Default Parameters in JavaScript Functions

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

Use default parameters for optional arguments in concrete functions. Ensure optional parameters come after required ones and have default values. Interface and abstract methods must omit default parameter values.

```javascript
/**
 * @param {string} required This parameter is always needed.
 * @param {string=} optional This parameter can be omitted.
 * @param {!Node=} node Another optional parameter.
 */
function maybeDoSomething(required, optional = '', node = undefined) {}
```

```javascript
/** @interface */
class MyInterface {
  /**
   * Interface and abstract methods must omit default parameter values.
   * @param {string=} optional
   */
  someMethod(optional) {}
}
```

--------------------------------

### Markdown link for external references

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

For external links in documentation, Markdown's link syntax should be used instead of JSDoc @link tags.

```javascript
/**
 * This class implements a useful subset of the
 * [native Event interface](https://dom.spec.whatwg.org/#event).
 */
class ApplicationEvent {}
```

--------------------------------

### Prefer Array Literals Over Variadic Constructor

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

Use array literals instead of the `new Array()` constructor to avoid potential errors, especially when specifying array length.

```javascript
const a1 = [x1, x2, x3];
```

```javascript
const a2 = [x1, x2];
```

```javascript
const a3 = [x1];
```

```javascript
const a4 = [];
```

--------------------------------

### Provide Only Top-Level Symbols

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

When defining multiple members on a class (e.g., enums, inner classes), only provide the top-level class symbol. Avoid providing individual constants, enums, or methods.

```javascript
goog.provide('namespace.MyClass');
```

```javascript
goog.provide('namespace.MyClass');
goog.provide('namespace.MyClass.CONSTANT');
goog.provide('namespace.MyClass.Enum');
goog.provide('namespace.MyClass.InnerClass');
goog.provide('namespace.MyClass.TypeDef');
goog.provide('namespace.MyClass.staticMethod');
```

--------------------------------

### Spacing After Commas and Semicolons

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

Always place a single space after a comma or semicolon. Never use spaces before these characters.

```javascript
foo(a, b);
```

```javascript
for (let i = 0; i < 10; i++)
```

--------------------------------

### Create Local Aliases in JavaScript

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

Use `const` to create local aliases for imported namespaces, classes, or functions when it improves readability over fully-qualified names. This applies within functions as well.

```javascript
const staticHelper = importedNamespace.staticHelper;
const CONSTANT_NAME = ImportedClass.CONSTANT_NAME;
const {assert, assertInstanceof} = asserts;
```

--------------------------------

### Spacing Around Binary and Ternary Operators

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

Use a single space on both sides of any binary or ternary operator for clarity.

```javascript
a + b
```

```javascript
a ? b : c
```

--------------------------------

### Define Class Fields in Constructor

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

All non-method properties of a concrete object should be defined in the constructor. Use @const for fields that are never reassigned, and visibility annotations (@private, @protected, @package) for non-public fields.

```javascript
class Foo {
  constructor() {
    /** @private @const {!Bar} */
    this.bar_ = computeBar();

    /** @protected @const {!Baz} */
    this.baz = computeBaz();
  }
}
```

--------------------------------

### Spacing Before Open Curly Brace

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

Place a space before an open curly brace, with exceptions for object literals as the first argument/element or within template expansions.

```javascript
if (condition) {
```

```javascript
foo({a: 1})
```

```javascript
`value is ${x}`
```

--------------------------------

### Using 'goog.require' in ES Modules

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

'goog.require' in ES modules functions similarly to 'goog.module' files. It can be used to require any Closure namespace symbol and will return its value.

```javascript
import * as goog from '../closure/goog/goog.js';
import * as anEsModule from './anEsModule.js';

const GoogPromise = goog.require('goog.Promise');
const myNamespace = goog.require('my.namespace');
```

--------------------------------

### Aliasing with goog.scope

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

Use goog.scope to shorten references to namespaced symbols. Only one goog.scope invocation is allowed per file, placed in the global scope. Do not indent under goog.scope declarations.

```javascript
goog.provide('my.module.SomeType');

goog.require('goog.dom');
goog.require('goog.ui.Button');

goog.scope(function() {
var Button = goog.ui.Button;
var dom = goog.dom;

// Alias new types after the constructor declaration.
my.module.SomeType = function() { ... };
var SomeType = my.module.SomeType;

// Declare methods on the prototype as usual:
SomeType.prototype.findButton = function() {
  // Button as aliased above.
  this.button = new Button(dom.getElement('my-button'));
};
... 
});  // goog.scope
```

--------------------------------

### Use Object Destructuring for Function Parameters

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

Employ object destructuring for function parameters to unpack values. Keep parameter destructuring simple, using shorthand properties and specifying default values on the left-hand side. Ensure optional destructured objects default to `{}`.

```javascript
/**
 * @param {string} ordinary
 * @param {{num: (number|undefined), str: (string|undefined)}=} param1
 *     num: The number of times to do something.
 *     str: A string to do stuff to.
 */
function destructured(ordinary, {num, str = 'some default'} = {}) {}
```

--------------------------------

### Array Literals: Block-like Formatting

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

Array literals can optionally be formatted as block-like constructs, allowing for multi-line elements or single-line formatting.

```javascript
const a = [
  0,
  1,
  2,
];
```

```javascript
const b =
    [0, 1, 2];
```

```javascript
const c = [0, 1, 2];
```

```javascript
someMethod(foo, [
  0, 1, 2,
], bar);
```

--------------------------------

### Correct Nullability Modifiers for Types

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

Use '?' for nullable types and omit it for non-nullable primitives. Explicitly use '!' or '?' for reference types to avoid ambiguity.

```javascript
const /** ?MyObject */ myObject = null;
const /** number */ someNum = 5;
const /** ?number */ someNullableNum = null;
const /** {foo: string, bar: number} */ record = ...;
const /** !MyTypeDef */ def = ...;
const /** ?SomeCamelCaseName */ n = ...;
```

--------------------------------

### Avoid `new` on Primitive Wrappers

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

Never use `new` with primitive object wrappers like `Boolean`, `Number`, or `String`. Use them as functions for type coercion instead.

```javascript
const /** Boolean */ x = new Boolean(false);
if (x) alert(typeof x);  // alerts 'object' - WAT?
```

```javascript
const /** boolean */ x = Boolean(0);
if (!x) alert(typeof x);  // alerts 'boolean', as expected
```

--------------------------------

### Arrow Function Syntax and Usage

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

Use arrow functions for concise syntax and simplified `this` scoping, especially for nested functions. The single expression form is preferred for readability when returning a value or using `void` with a single function call.

```javascript
/**
 * Arrow functions can be documented just like normal functions.
 * @param {number} numParam A number to add.
 * @param {string} strParam Another number to add that happens to be a string.
 * @return {number} The sum of the two parameters.
 */
const moduleLocalFunc = (numParam, strParam) => numParam + Number(strParam);
```

```javascript
// Uses the single expression syntax with `void` because the program logic does
// not require returning a value.
getValue((result) => void alert(`Got ${result}`));
```

```javascript
class CallbackExample {
  constructor() {
    /** @private {number} */
    this.cachedValue_ = 0;

    // For inline callbacks, you can use inline typing for parameters.
    // Uses a block statement because the value of the single expression should
    // not be returned and the expression is not a single function call.
    getNullableValue((/** ?number */ result) => {
      this.cachedValue_ = result == null ? 0 : result;
    });
  }
}
```

--------------------------------

### Specifying Template Parameter Types

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

Always specify template parameters for generic types like Object, Array, and Promise to improve compiler checks and code readability. Use '*' for 'any' type.

```javascript
const /** !Object<string, !User> */ users = {};
const /** !Array<string> */ books = [];
const /** !Promise<!Response> */ response = ...;

const /** !Promise<undefined> */ thisPromiseReturnsNothingButParameterIsStillUseful = ...;
const /** !Object<string, *> */ mapOfEverything = {};
```

--------------------------------

### JSDoc @link for internal cross-references

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

The {@link ...} tag is used to generate cross-reference links within generated documentation to other parts of the code.

```javascript
/** Processes pending {@link BatchItem} instances. */
function processBatchItems() {}
```

--------------------------------

### JSDoc Allowed Tag Combination

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

Simple tags like '@private', '@const', '@final', and '@export' can be combined on a single line, optionally with a type. More complex annotations should be on their own lines.

```javascript
/**
 * Place more complex annotations (like "implements" and "template")
 * on their own lines. Multiple simple tags (like "export" and "final")
 * may be combined in one line.
 * @export @final
 * @implements {Iterable<TYPE>}
 * @template TYPE
 */
class MyClass {
  /**
   * @param {!ObjType} obj Some object.
   * @param {number=} num An optional number.
   */
  constructor(obj, num = 42) {
    /** @private @const {!Array<!ObjType|number>} */
    this.data_ = [obj, num];
  }
}
```

--------------------------------

### Using Named Exports in JavaScript

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

Always use named exports for symbols intended for external use. This ensures consistent naming across modules.

```javascript
// Do not use default exports: 
export default class Foo { ... } // BAD!
```

```javascript
// Use named exports:
export class Foo { ... }
```

```javascript
// Alternate style named exports:
class Foo { ... }

export {Foo};
```

--------------------------------

### Suppressing Compiler Warnings

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

Shows how to suppress specific compiler warnings at the narrowest reasonable scope using the @suppress annotation in JavaScript.

```javascript
/** @suppress {uselessCode} Unrecognized 'use asm' declaration */
function fn() {
  'use asm';
  return 0;
}
```

--------------------------------

### Indentation for Anonymous Function Expressions

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

When an anonymous function is passed as an argument, its body should be indented two spaces more than the preceding indentation level.

```javascript
prefix.something.reallyLongFunctionName('whatever', (a1, a2) => {
  // Indent the function body +2 relative to indentation depth
  // of the 'prefix' statement one line above.
  if (a1.equals(a2)) {
    someOtherLongFunctionName(a1);
  } else {
    andNowForSomethingCompletelyDifferent(a2.parrot);
  }
});

some.reallyLongFunctionCall(arg1, arg2, arg3)
    .thatsWrapped()
    .then((result) => {
      // Indent the function body +2 relative to the indentation depth
      // of the '.then()' call.
      if (result) {
        result.use();
      }
    });
```

--------------------------------

### Annotating Anonymous Functions in Promises

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

For anonymous functions, especially within promise callbacks, JSDoc annotations for parameters and return types are generally optional. Annotate explicitly if type inference is insufficient or for improved readability.

```javascript
promise.then(
    /** @return {string} */
    (/** !Array<string> */ items) => {
      doSomethingWith(items);
      return items[0];
    });
```

--------------------------------

### JSDoc Disallowed Tag Combination

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

The 'param' tag must occupy its own line and cannot be combined with other tags on the same line.

```javascript
/**
 * The "param" tag must occupy its own line and may not be combined.
 * @param {number} left @param {number} right
 */
function add(left, right) { ... }
```

--------------------------------

### Generator Function Syntax

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

Define generator functions by attaching `*` to the `function` keyword or `yield` keyword. This enables useful abstractions for iteration.

```javascript
/** @return {!Iterator<number>} */
function* gen1() {
  yield 42;
}
```

```javascript
/** @return {!Iterator<number>} */
const gen2 = function*() {
  yield* gen1();
}
```

```javascript
class SomeClass {
  /** @return {!Iterator<number>} */
  * gen() {
    yield 42;
  }
}
```

--------------------------------

### Use Method Shorthand in Object Literals

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

Define methods on object literals using the method shorthand (`method() {… }`) for cleaner syntax. Note that `this` inside a method shorthand refers to the object literal itself.

```javascript
return {
  stuff: 'candy',
  method() {
    return this.stuff;  // Returns 'candy'
  },
};
```

```javascript
class {
  getObjectLiteral() {
    this.stuff = 'fruit';
    return {
      stuff: 'candy',
      method: () => this.stuff,  // Returns 'fruit'
    };
  }
}
```

--------------------------------

### Object Literals: Block-like Formatting

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

Object literals can optionally be formatted as block-like constructs, similar to array literals, allowing for multi-line properties or single-line formatting.

```javascript
const a = {
  a: 0,
  b: 1,
};
```

```javascript
const b =
    {a: 0, b: 1};
```

```javascript
const c = {a: 0, b: 1};
```

```javascript
someMethod(foo, {
  a: 0, b: 1,
}, bar);
```

--------------------------------

### Optional Inline JSDocs for Function Signatures

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

Optionally use inline JSDocs within a function's signature to document parameter and return types without explicit tags. This is suitable when only types need annotation.

```javascript
function /** string */ foo(/** number */ arg) {...}
```

--------------------------------

### Naming Module Imports in ES Modules

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

Module import names (import * as name) should be lowerCamelCase, derived from the imported file name. Exceptions exist for common open-source libraries like threejs.

```javascript
import * as fileOne from '../file-one.js';
import * as fileTwo from '../file_two.js';
import * as fileThree from '../filethree.js';
```

```javascript
import * as libString from './lib/string.js';
import * as math from './math/math.js';
import * as vectorMath from './vector/math.js';
```

--------------------------------

### JSDoc Annotation Dependency

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

All external types used in JSDoc annotations must be goog.require'd, unless declared in externs.

```javascript
/**
 * @param {!some.unimported.Dependency} param All external types used in JSDoc
 *     annotations must be goog.require'd, unless declared in externs.
 */
function someFunction(param) {
  // goog.require lines must be at the top level before any other code.
  const alias = goog.require('my.long.name.alias');
  // ...
}
```
Tokens:
Raw