JavaScript

JavaScript defines the behavior and interaction of the application.

JavaScript should be used sparingly. Any and all JavaScript code should be included if, and only if, it is needed for the page to achieve the desired ends, e.g.: when a behavior or interaction cannot be achieved with HTML or CSS alone.

  • JavaScript should be valid
    • No console errors
  • JavaScript should be DRY
    • Be re-usable whenever possible
  • JavaScript should be unobtrusive, fast, efficient, and performant
    • Included after careful consideration
    • Executed only when necessary
    • Evaluated for performance overhead, file size, and maintainability
    • Performs only the necessary tasks without needless overhead
    • Does not contain HTML, CSS, or hard-coded text content
      • Writing markup (HTML) in a JavaScript file makes the content harder to find, harder to edit, and less performant
      • Keep text content external for translations and content management
  • JavaScript should be scoped appropriately
    • Minimize the use of globally scoped variables
    • Use const and let when declaring variables for better scoping and error messaging
    • Use closures or object literals to avoid global scope
  • JavaScript should have the absence or failure of the code carefully considered
    • What happens if for some reason this code is missing or does not run?
    • What happens if the code triggers an error?

Naming Conventions

  • Function and variable names should be descriptive of what they do or represent
  • Boolean values should be prefixed with "is" whenever possible

Formatting

In order to increase readability, please adhere to the following formatting standards.

Comments

  • Write self-explanatory or "self-commenting" code supplemented by code comments
  • Explain what a JavaScript file does at the top of the file
  • Explain what a function does, and make note of required parameters and their types
  • Explain any segments of code that could come across as confusing
  • Mark TODOs and action items with a TODO comment

Casing

  • Variable names should be camelCase
  • Objects, classes, and namespaces should be TitleCase

Organization

JavaScript should exist in its own file and imported into the document via <script> tag at the bottom of the body. Some cases may require it to be imported in the head instead.