JavaScript structure, scope, and modern syntax
JavaScript is the only programming language that runs natively in web browsers, making it the universal language of front-end development. It also runs on servers (Node.js), in mobile apps (React Native), and as the scripting layer of desktop Electron apps. ES6 (ES2015) and subsequent editions introduced arrow functions (() => {}), template literals (`Hello ${name}`), destructuring, modules (import/export), Promises, and async/await. Modern JavaScript is substantially more readable than pre-2015 code, but minified bundles from webpack, Rollup, or Vite collapse all of it into a dense single file to minimise transfer size.
Paste a minified bundle or an API-returned JavaScript payload into the formatter to restore readable structure. The formatter applies consistent indentation, separates statements, and re-wraps long lines. This is useful for auditing third-party scripts for security, debugging production issues when source maps aren't available, and reviewing compiled output.
| Declaration type | Scope | Re-assignable |
|---|---|---|
var | Function (hoisted) | Yes |
let | Block | Yes |
const | Block | No (value may mutate) |
| Arrow function | Lexical this | const/let |
class | Block | Not hoisted |
Formatting vs minification in a build pipeline
In development, formatted JavaScript is essential, consistent indentation, line breaks after statements, and whitespace around operators let you read logic quickly and spot off-by-one errors and missing error handling. In production, a minifier removes that whitespace and shortens variable names, reducing a 120KB file to 40KB. The standard workflow is: write formatted → commit formatted to source control → build pipeline minifies for deployment. Use this formatter for the development direction: restoring readability to minified code you're inspecting or debugging.
Related: JSON formatter for API data, CSS formatter. See the CI/CD guide for linting in automated pipelines.