The JavaScript file (.js, .mjs)

The basics

What is a JavaScript file?

Anatomy

What's inside a JavaScript file

A JavaScript file is a list of statements that run from top to bottom, plus functions that run later, when something calls them. Here is a short browser script that counts clicks on a button and asks a server for a total, part by part.

// Count clicks on a "like" button
"use strict";

const button = document.querySelector("#like");
let count = 0;

function label(n) {
  return n === 1 ? "1 like" : `${n} likes`;
}

button.addEventListener("click", () => {
  count += 1;
  button.textContent = label(count);
});

async function loadTotal() {
  const response = await fetch("/api/likes");
  const data = await response.json();
  console.log("Total likes:", data.total);
}

loadTotal().catch((error) => console.error(error));

1. 1// Count clicks on a "like" button

   A comment

   // comments run to the end of the line; /* … */ comments can span several. Minifiers remove both.

2. 2"use strict";

   Strict mode

   Turns some silent mistakes into errors, such as assigning to a variable you never declared. It must be the first statement. ES modules are always strict, so they don't need it.

3. 3document.querySelector("#like")

   A browser API

   document isn't part of the JavaScript language: the browser provides it so scripts can read and change the page. Node.js has no document, which is why browser code fails there with "document is not defined".

4. 4const button = … / let count = 0;

   Variables

   const can't be reassigned; let can. Both exist only inside the block where they're declared. The older var is still valid but scoped to the whole function, which causes subtle bugs.

5. 5function label(n) { … }

   A function

   A named, reusable piece of code. Function declarations are hoisted: you can call them from lines above where they're written.

6. 6`${n} likes`

   A template literal

   Backtick strings can insert values with ${…} and span several lines. Here it sits in a conditional expression: condition ? a : b.

7. 7button.addEventListener("click", () => { … })

   An event listener

   Browser JavaScript is mostly event-driven: this registers an arrow function to run every time the button is clicked, long after the rest of the file has finished.

8. 8async function loadTotal() { … }

   An async function

   await pauses this function, and only this function, until the network answers. The rest of the page stays responsive in the meantime.

9. 9await fetch("/api/likes")

   A network request

   fetch asks a server for data, and response.json() parses the answer as JSON, the data format based on JavaScript's own object syntax.

10. 10console.log("Total likes:", …)

    Console output

    Prints to the browser's developer tools (the Console tab) or, in Node.js, to the terminal. Visitors never see it on the page.

11. 11.catch((error) => console.error(error))

    Error handling

    If the request fails, the error is caught and logged here instead of surfacing as an unhandled promise rejection.

Under the hood

Classic scripts vs ES modules

Extensions

.js vs .mjs vs .cjs

{
  "name": "my-app",
  "type": "module"
}

Serving it

The right MIME type and encoding

History

ECMAScript versions

Related formats

Minified files, source maps, TypeScript and JSON

Troubleshooting

The JavaScript errors people hit most, and what they mean

How to

How to open, run and edit a JavaScript file

Security

Is it safe to open a JavaScript file?

Free downloads

Sample JavaScript files to download

Free sample JavaScript files for testing parsers, bundlers, minifiers, upload filters, MIME types and size limits. Each one passes node --check and runs without errors in Node.js and, except the CommonJS sample, in browsers.

Loading…

What's inside sample-script.js

The file is commented: open it in a text editor and each numbered comment marks one of these parts. Run it with node sample-script.js to see its output.

1. Comments 1 and 2: strict mode and variables

   "use strict" at the top, then const and let, with a note on why var is best avoided.

2. Comment 3: values

   An object literal with a string, a number, a boolean, an array and null: the syntax JSON is based on.

3. Comments 4 and 5: functions and modern syntax

   A function with a default parameter, an arrow function, a template literal, then destructuring with a rest element, optional chaining ?., the ?? operator and object spread.

4. Comment 6: array methods

   filter, map and reduce chained together: the doubled scores above 5 add up to 74.

5. Comments 7 and 8: a class and error handling

   A Counter class with a private #count field, and a try/catch around JSON.parse that returns null for invalid input.

6. Comment 9: asynchronous code

   A promise-based wait() and an async function that awaits it before printing.

7. Comments 10 and 11: environment checks and output

   The script only touches document when it exists, so the same file runs in a browser (where it sets an element with id="js-status" to "running") and in Node.js. Results go to console.log.

All sample JavaScript files

• Commented sample script

  sample-script.js · 3.1 KB (3,188 bytes)

  A classic script covering variables, functions, destructuring, array methods, a class with a private field, error handling and async/await, with numbered comments explaining each part. Runs in browsers and Node.js.

  • Checking parsers, linters and minifiers on modern syntax
  • Teaching the building blocks of JavaScript
  DownloadOpen

• ES module (.mjs)

  sample-module.mjs · 1.3 KB (1,303 bytes)

  An ES module that imports named and default exports from sample-module-math.mjs, uses top-level await and import.meta.url, and exports a value. Keep both files in the same folder.

  • Checking a server sends `.mjs` as `text/javascript`
  • Testing module loading in browsers, Node.js and bundlers
  DownloadOpen

• Module that sample-module.mjs imports

  sample-module-math.mjs · 612 bytes

  A small module with only exports: a constant, two named functions and a default export.

  • Testing import resolution
  • A minimal ES module example
  DownloadOpen

• CommonJS module for Node.js

  sample-commonjs.js · 836 bytes

  Node.js's original module system: require(), module.exports, __filename and the require.main === module check. Runs with node sample-commonjs.js; browsers can't run it.

  • Testing tools that must tell CommonJS from ES modules
  • Comparing the two module systems
  DownloadOpen

• Minified JavaScript

  sample-minified.js · 1.3 KB (1,297 bytes)

  The sample script minified with esbuild, keeping a /*! comment at the top. It prints exactly the same output as the original.

  • Testing formatters and source viewers
  • Comparing minified and readable code
  DownloadOpen

• 100 KB JavaScript file

  sample-100kb.js · 100 KB (102,400 bytes)

  A table of the first 14,082 prime numbers and a function that checks every one, padded with a comment to exactly 102,400 bytes.

  • Upload and size-limit tests
  • Parser and minifier benchmarks
  DownloadOpen

Ways to test with them

• MIME types: put sample-module.mjs and sample-module-math.mjs online with a page that loads the first with type="module". If the browser refuses it, the server isn't sending text/javascript for .mjs.
• Module detection: run sample-commonjs.js and sample-module.mjs through your bundler, linter or Node.js version and check each is treated as the right kind of module.
• Minifiers: minify sample-script.js and compare the output of both versions with node; it should be identical, as it is for sample-minified.js.
• Upload filters: many email services and upload forms block .js files outright. Try the samples to see where yours draws the line.
• Upload limits: sample-100kb.js is exactly 102,400 bytes, for testing a limit at the boundary.

Free to use for testing, teaching and demos, commercially or not, with no attribution needed. A link back to this page is always appreciated.

Questions

JavaScript files, frequently asked